<h1>ReactJs Özel API Servisi ve Interceptor ile API İsteklerini Takip Etme</h1><img src="https://miro.medium.com/max/1400/1*VjWJqiAXy8A9EFEAO-cY3w.jpeg">Api isteklerini düzenli bir şekilde yönetmek ve her component de aynı api fonksiyonunu yazmamak için genel bir yapı kurabilirsiniz.Axios interceptors fonksiyonu api isteklerini takip eder ve hata durumuna göre istediğiniz işlemleri gerçekleştirmenizi sağlar.Şimdi bir react projesi oluşturup adımları beraber yapalım.npm veya yarn ile bir react projesi oluşturup src içersine constans klasörünü açalım.<blockquote>Not: npm ile bir react projesi oluşturma (<code>npx create-react-app my-app</code>).</blockquote><blockquote>yarn ile bir react projesi oluşturma (<code>yarn create react-app my-app</code>).</blockquote>Constans klasörü içerisine header.json ve config.json dosyalarını oluşturalım. config.json dosyasına kullanacağımız urlleri tanımlıyoruz.<img src="https://miro.medium.com/max/1400/1*6cUfndHL9c0fPqWkhFhZEA.png">config.jsonheader.json dosyasın da api isteklerindeki kullanacağımız content type ‘ları belirtiyoruz.<img src="https://miro.medium.com/max/1400/1*pe-utA22Oj_QhKpvH7jOrw.png">header.jsonŞimdi src içerisine api &gt; client klasörü açıp client.js, errorParser.js ve https.js dosyalarını oluşturalım.errorParser.js hatalı http isteklerini istediğimiz formata çevireceğimiz bir fonksiyon yazıp export edelim. Api isteği hataya düştüğünde bu fonksiyon çalışarak status ve mesajı formatlayıp return etmektedir.<img src="https://miro.medium.com/max/1400/1*uVQI82ElGqdyU_Kj92OfRw.png">errorParser.jshttp.js dosyamız da axios create ederek api isteği üzerinde ki ayarlarımızı yapıyoruz. Burada interceptor request ve response yönetebiliriz. Burada ki örnekte her api isteğinde bearer token’ı ayrı ayrı göndermek yerine interceptor request ile her api isteğinde iletilmesini sağladık.Sizler request ve response fonksiyonunda gereksinim duyduğunuz işlemleri gerçekleştirebilirsiniz. Axios create ettikten sonra tüm axios methodlarını http.js üzerinden yöneterek interceptor ‘ün çalışmasını sağlayacağız.<img src="https://miro.medium.com/max/1400/1*6nkWnRtJE5xdaOYmqPQUjQ.png">http.jsclient.js dosyası axios methodlarının bulunduğu alandır burada kullanacağınız axios methodlarını yazıp export edelim. Dikkat ederseniz http.js dosyasında axios create etmiştik burada doğrudan axios methodlarını kullanmadık http.js üzerinden get, post, delete ve put methodlarını oluşturduk.<img src="https://miro.medium.com/max/1400/1*PpyDSRf3ohaMVgWV6N-UQw.png">client.jsŞimdi api &gt; service klasörü açıp içerisine dataParser.js ve generalService.js dosyaları oluşturalım.dataParser.js de servisten dönen cevabı success ve error olarak formatlayarak her api cevabını standart bir formata dönüştürmüş oluyoruz.<img src="https://miro.medium.com/max/1400/1*t332HkwoxO9D99tenaxA3A.png">dataParser.jsGeriye yazmış olduğumuz bu yapıda api istekleri için özel dosyalar oluşturup bu dosyalar da ilgili api leri yönetmek kaldı.Genel api istekleri için generalService.js dosyasını oluşturdum. Burada isteklerimizi gruplayıp ona göre dosyalar oluşturarak yalın ve okunabilir servis hazırlamış olacağız.<img src="https://miro.medium.com/max/1400/1*7hk4lU8Dpe2v0WC08BOdNQ.png">generalService.jsYapıyı oluşturduktan sonra kullanmak istediğimiz servisde ki fonksiyonu çağırıp sonucu görebiliriz.<img src="https://miro.medium.com/max/1400/1*PFMVHMUqle55usEqckiCWg.png">App.jsTüm servislerinizi fonksiyonlara çevirerek dinamik bir yapı oluşturduk. Bu yapıda her component de axios import edip config’lerini yada body ayarlamak zorunda kalmıyoruz. Düzenli ve temiz bir görünüm elde etmiş olduk.

Api isteklerini düzenli bir şekilde yönetmek ve her component de aynı api fonksiyonunu yazmamak için genel bir yapı kurabilirsiniz.  Axios interceptors fonksiyonu ile api isteklerini takip eder ve hata durumuna göre istediğiniz işlemleri gerçekleştirmenizi sağlar.

ReactJs Özel API Servisi ve Interceptor ile API İsteklerini Takip Etme

## 1. Yazılımcının Gözünden Yapay Zeka: Tehdit mi, Yoksa 10x Bilişsel Çarpan mı?

Yazılım dünyasında son yıllarda yaşanan en büyük paradigma değişimi, yapay zekanın "kod tamamlayan basit bir asistan" olmaktan çıkıp, karmaşık problemleri analiz eden ve otonom karar alabilen **AI Agent (Yapay Zeka Ajanları)** formuna evrilmesidir.

Peki, sahada aktif olarak milyonlarca kullanıcıya hizmet veren kurumsal sistemler geliştiren bir yazılımcı olarak yapay zekayı nasıl konumlandırmalıyız?

Yapay zeka yazılımcının yerini almayacak; ancak **yapay zekayı bir çarpan (leverage) olarak kullanan yazılımcılar**, geleneksel yöntemlerde ısrar eden meslektaşlarının çok önüne geçecektir. Yapay zeka, boilerplate kod yazma, tekrar eden refactoring ve temel test senaryoları gibi **bilişsel yükü yüksek fakat katma değeri düşük** işleri üstlenerek mühendisin asıl işine — yani **sistem mimarisi, veri akışı, performans ve iş mantığına** — odaklanmasını sağlar.

---

## 2. AI Agent ile Hızlı Sistemler İnşa Etmek

Geleneksel LLM'ler yalnızca metin üretirken, **AI Agent'lar** çevrelerini algılar, karar alır ve araçları (`tools`) kullanarak gerçek dünyada eyleme geçer.

### Agentic ReAct (Reasoning + Acting) Döngüsü:
1. **Hedef Analizi (Planlama)**: "Bu servise yeni bir endpoint ekle ve testlerini yaz."
2. **Araç Seçimi (Tool Selection)**: Dosya ağacını tara (`list_dir`), ilgili kontrolcüyü oku (`view_file`).
3. **Eylem ve Doğrulama**: Kodu yaz, terminalde `npm test` çalıştır, hata varsa hatayı okuyup kendini düzelt (Self-Correction).
4. **Tamamlama**: Değişiklikleri Git dalına commit'le ve PR aç.

Bu döngü, saatler süren prototipleme ve entegrasyon süreçlerini dakikalara indirmektedir.

---

## 3. Otomatik Code Review Pipeline'ı (GitOps & CI/CD)

Ekip çalışmasında en çok zaman alan aşamalardan biri Pull Request (PR) incelemeleridir. Kod standartları, tip güvenliği, bellek sızıntıları (memory leaks) ve güvenlik açıkları gibi konuları bir **AI Code Reviewer Agent** ile otomatize etmek mümkündür.

Aşağıda, GitHub Actions veya yerel Git hook üzerinde çalışan örnek bir **TypeScript AI Reviewer Agent** mimarisi yer almaktadır:

```typescript
// scripts/ai-code-reviewer.ts
import { GoogleGenerativeAI } from "@google/generative-ai";
import { execSync } from "child_process";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

async function runAutoCodeReview() {
  // 1. Son commit veya PR'daki diff'i al
  const gitDiff = execSync("git diff HEAD~1 HEAD", { encoding: "utf-8" });

  if (!gitDiff.trim()) {
    console.log("İncelenecek kod değişikliği bulunamadı.");
    return;
  }

  // 2. Kıdemli Mühendis Sistem Prompt'u
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
  const prompt = `
Sen kıdemli bir yazılım mimarısın. Aşağıdaki Git Diff çıktısını detaylı incele.
Özellikle şu başlıklara odaklan:
1. Bellek sızıntıları ve useEffect bağımlılık hataları
2. TypeScript tip güvenliği (any kullanımı, eksik null check)
3. Olası güvenlik zafiyetleri (SQL Injection, XSS, hassas veri sızıntısı)
4. Performans ve gereksiz re-render riskleri

GIT DIFF:
${gitDiff}

Lütfen raporu Markdown formatında, yapıcı ve direkt çözüm önerileriyle hazırla.
`;

  console.log("🤖 AI Agent kod incelemesini başlatıyor...");
  const result = await model.generateContent(prompt);
  const reviewReport = result.response.text();

  console.log("\n=== AI CODE REVIEW RAPORU ===\n");
  console.log(reviewReport);
}

runAutoCodeReview().catch(console.error);
```

---

## 4. Gerçek Üretim Deneyimi: Neler Öğrendik?

Türk Telekom Muud Müzik gibi yüksek trafikli kurumsal projelerde yapay zeka ve agent sistemlerini entegre ederken edindiğim temel prensipler:

- **Deterministik Sınırlar Koyun**: LLM'in serbestçe tahmin yürütmesine izin vermeyin. JSON Schema ve kesin tip tanımları (Zod / TypeScript) ile çıktıları sınırlandırın.
- **Her Zaman Doğrulama Katmanı Bulundurun**: AI tarafından üretilen kod, mutlaka otomatik **Unit Test (Jest)** ve **Lint (ESLint)** kontrollerinden geçmelidir.
- **Agent'lara Doğru Bağlamı (Context) Verin**: Modelin projenin genel mimarisini, kullanılan kütüphane sürümlerini ve tasarım kalıplarını bilmesi, halüsinasyonları %90 oranında engeller.

---

## 5. Sonuç

Yapay zeka ve AI Agent'lar, yazılım mühendisliğini sonlandırmıyor; tam tersine mühendisliği daha yaratıcı, daha stratejik ve çok daha hızlı bir seviyeye taşıyor. 

Bugün bir yazılımcının en değerli yeteneği, yalnızca kod yazmak değil; **otonom sistemleri yönetebilmek, doğru mimariyi kurgulamak ve yapay zekayı bir güç çarpanı olarak iş akışlarına dahil etmektir**.

Otonom AI Agent iş akışları, CI/CD pipeline'larında otomatik PR code review sistemleri ve üretim ortamında çalışan kıdemli bir yazılımcının gözünden yapay zeka devrimi.

AI Agent Kullanarak Hızlı Sistemler, Otomatik Code Review ve Yazılımcının Gözünden Yapay Zeka

## Retrieval-Augmented Generation (RAG) Mimarisine Bakış

Büyük Dil Modelleri (LLM), parametrik hafızalarında geniş bilgi barındırsalar da güncel kurumsal verilere, özel şirket içi dokümanlara veya dinamik API sonuçlarına doğrudan erişemezler. **RAG (Retrieval-Augmented Generation)**, kullanıcının sorgusuyla ilgili en alakalı bilgi parçacıklarını dış bir kaynaktan çekerek LLM'in bağlam penceresine (Context Window) enjekte eden mimaridir.

---

## 1. Yalnızca Vektör Araması Neden Yetmez?

Geleneksel RAG pipeline'ları metinleri embedding vektörlerine çevirerek **Cosine Similarity** ile semantik arama yapar. Ancak salt yoğun (dense) vektör aramasının iki temel zayıflığı vardır:
1. **Anahtar Kelime Hassasiyeti**: Ürün kodları, hata ID'leri veya özel isimlerde semantik benzerlik zayıf kalabilir.
2. **Kavramsal Dağılma**: Benzer anlamlı fakat bağlam dışı paragraflar üst sıralara çıkabilir.

Bu sorunu çözmek için **Hibrit Arama (Dense Vector + Sparse BM25)** yaklaşımı uygulanır.

```typescript
// Hibrit Arama Mantığı (Reciprocal Rank Fusion - RRF)
interface SearchResult {
 docId: string;
 content: string;
 score: number;
}

function reciprocalRankFusion(
 vectorResults: SearchResult[],
 keywordResults: SearchResult[],
 k = 60
): SearchResult[] {
 const scoreMap = new Map<string, { doc: SearchResult; score: number }>();

 const processList = (list: SearchResult[]) => {
 list.forEach((item, rank) => {
 const current = scoreMap.get(item.docId) || { doc: item, score: 0 };
 current.score += 1 / (k + rank + 1);
 scoreMap.set(item.docId, current);
 });
 };

 processList(vectorResults);
 processList(keywordResults);

 return Array.from(scoreMap.values())
 .sort((a, b) => b.score - a.score)
 .map((entry) => ({ ...entry.doc, score: entry.score }));
}
```

---

## 2. Cross-Encoder Reranking Adımı

İlk arama aşamasında getirilen ilk 20-30 aday doküman, daha hassas bir **Cross-Encoder Reranker** (örneğin `bge-reranker-large` veya Cohere Rerank) modelinden geçirilerek gerçek anlamsal ilgi sırasına dizilir ve en iyi 3-5 parça seçilir:

```typescript
// Reranking Pipeline
const initialCandidates = await vectorDB.hybridQuery({ query, topK: 25 });
const rankedDocuments = await reranker.rank({
 query: query,
 documents: initialCandidates.map(d => d.content),
 topN: 4
});
```

---

## 3. Bağlam Enjeksiyonu ve Deterministik Prompt Şablonu

```typescript
const prompt = `Aşağıdaki bağlam bilgilerini temel alarak soruyu yanıtla. Bağlamda yer almayan bilgiler için tahmin yürütme.

BAĞLAM:
${rankedDocuments.map((doc, i) => `[${i + 1}] ${doc.text}`).join('\n\n')}

SORU:
${userQuery}

YANIT:`;
```

### Özet ve En İyi Uygulamalar
- **Chunking Stratejisi**: Sabit karakter bölme yerine semantik paragraf ve başlık tabanlı chunking kullanın.
- **Metadata Filtreleme**: Tarih, kategori ve yetki etiketlerini vektör aramasında pre-filter olarak uygulayın.

Vektör veritabanları (Pinecone, Chroma, Qdrant), yoğun ve seyrek (dense + BM25) hibrit arama, semantik chunking ve LLM bağlam penceresi optimizasyon stratejileri.

Temel LLM Mimarisi ve RAG Sistemlerinde Hibrit Arama & Reranking

## Model Context Protocol (MCP) Nedir?

**Model Context Protocol (MCP)**, yapay zeka modelleri (LLM'ler) ile harici araçlar, veritabanları, API'lar ve geliştirme ortamları arasındaki iletişimi standartlaştıran açık bir protokoldür. 

Eski modelde her LLM için özel fonksiyon çağırma (function calling) formatları ve entegrasyonlar yazmak gerekirken; MCP ile bir kez yazılan bir MCP Sunucusu (Server), Claude, Cursor, Antigravity veya özel agent sistemleri tarafından anında kullanılabilir hale gelir.

---

## 1. MCP Mimarisi: İstemci (Client) ve Sunucu (Server)

MCP istemci-sunucu mimarisi üzerine kuruludur:
- **MCP Server**: Dosya okuma, SQL çalıştırma, API çağırma veya git operasyonları gibi araçları (`tools`), kaynakları (`resources`) ve istem şablonlarını (`prompts`) dışa sunar.
- **MCP Client / Agent**: LLM'in ihtiyaç duyduğu araçları keşfeder, LLM'in ürettiği parametrelerle aracı tetikler ve sonucu tekrar modele iletir.

```typescript
// TypeScript ile MCP Sunucusu Oluşturma
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new McpServer({
 name: "music-catalog-mcp",
 version: "1.0.0"
});

// Şarkı arama aracı tanımlama
server.tool(
 "searchTracks",
 {
 genre: z.string().describe("Müzik türü (Rock, Pop, Jazz vb.)"),
 limit: z.number().default(5).describe("Maksimum sonuç sayısı")
 },
 async ({ genre, limit }) => {
 const tracks = await database.tracks.find({ genre }).limit(limit);
 return {
 content: [
 {
 type: "text",
 text: JSON.stringify(tracks, null, 2)
 }
 ]
 };
 }
);

const transport = new StdioServerTransport();
await server.connect(transport);
```

---

## 2. Ajan Karar Döngüsü (ReAct Pattern)

Agentic sistemlerde model şu adımları izler:
1. **Düşün (Thought)**: Kullanıcının hedefine ulaşmak için hangi araca ihtiyaç olduğunu analiz eder.
2. **Eylem (Action)**: Uygun MCP aracını JSON parametreleriyle çağırır.
3. **Gözlem (Observation)**: Aracın döndürdüğü sonucu bağlamına ekler.
4. **Nihai Yanıt (Final Answer)**: Yeterli bilgi toplandığında kullanıcıya sonuç sunar veya sonraki adıma geçer.

---

## 3. LangGraph ile Durumsal (Stateful) Ajan Entegrasyonu

TypeScript ile LangGraph kullanarak durum yönetimi sağlanan çok adımlı ajan grafiği:

```typescript
import { StateGraph, END } from "@langchain/langgraph";

interface AgentState {
 messages: Array<{ role: string; content: string }>;
 toolsRequired: boolean;
}

const workflow = new StateGraph<AgentState>({
 channels: {
 messages: { value: (x, y) => x.concat(y), default: () => [] },
 toolsRequired: { value: (x, y) => y ?? x, default: () => false }
 }
})
 .addNode("llm_reasoner", async (state) => {
 const response = await callLLMWithTools(state.messages);
 return { messages: [response] };
 })
 .addNode("mcp_executor", async (state) => {
 const lastMsg = state.messages[state.messages.length - 1];
 const toolResult = await executeMcpTool(lastMsg);
 return { messages: [toolResult] };
 })
 .addEdge("mcp_executor", "llm_reasoner");
```

### Gelecek Vizyonu
MCP ve otonom ajanlar, statik chat botlarının ötesine geçerek karmaşık iş akışlarını bağımsızca tamamlayabilen dijital çalışma arkadaşları dönemini başlatmaktadır.

Anthropic Model Context Protocol (MCP) standartları ile araçları ve veritabanlarını bağlama, multi-agent iş akışları ve LangGraph/TypeScript ile stateful ajan orkestrasyonu.

Blog

ReactJs Özel API Servisi ve Interceptor ile API İsteklerini Takip Etme

AI Agent Kullanarak Hızlı Sistemler, Otomatik Code Review ve Yazılımcının Gözünden Yapay Zeka

Temel LLM Mimarisi ve RAG Sistemlerinde Hibrit Arama & Reranking

Model Context Protocol (MCP) ile Otonom Ajanlar ve Tool Calling Mimarisi