{"id":30849,"date":"2025-10-02T20:32:44","date_gmt":"2025-10-02T17:32:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/"},"modified":"2025-10-02T20:32:44","modified_gmt":"2025-10-02T17:32:44","slug":"uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/","title":{"rendered":"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi"},"content":{"rendered":"<p>Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir yapay zeka ajan\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 anlay\u0131p, arka planda farkl\u0131 sistemlerle etkile\u015fime girerek dinamik \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini hayal etseniz? Next.js ve LangGraph.js&#8217;in birle\u015fimiyle, \u00fcretim-haz\u0131r, \u00f6l\u00e7eklenebilir ve ak\u0131ll\u0131 AI ajanlar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu rehberde, bu iki g\u00fc\u00e7l\u00fc teknolojiyi kullanarak s\u0131f\u0131rdan nas\u0131l otonom ajanlar in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.<\/p>\n<style>\n  .uzman-ipucu {\n    background-color: #e0f7fa;\n    border-left: 5px solid #00bcd4;\n    padding: 15px;\n    margin: 20px 0;\n    font-style: italic;\n    color: #006064;\n  }\n  pre {\n    background-color: #2d2d2d;\n    color: #f8f8f2;\n    padding: 15px;\n    border-radius: 5px;\n    overflow-x: auto;\n  }\n  code {\n    font-family: 'Fira Code', 'Cascadia Code', monospace;\n    font-size: 0.9em;\n  }\n  \/* Mobil uyumluluk i\u00e7in temel ayarlar *\/\n  body {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    color: #333;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 20px;\n  }\n  img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n    margin: 15px 0;\n  }\n  h2, h3 {\n    color: #2c3e50;\n  }\n  ul, ol {\n    margin-left: 20px;\n  }\n  \/* K\u00fc\u00e7\u00fck ekranlar i\u00e7in medya sorgusu *\/\n  @media (max-width: 768px) {\n    body {\n      padding: 10px;\n    }\n    h2 {\n      font-size: 1.8em;\n    }\n    h3 {\n      font-size: 1.4em;\n    }\n    .uzman-ipucu {\n      padding: 10px;\n    }\n    pre {\n      padding: 10px;\n      font-size: 0.8em;\n    }\n  }\n<\/style>\n<p>Son y\u0131llarda B\u00fcy\u00fck Dil Modelleri (LLM&#8217;ler), do\u011fal dili anlama ve \u00fcretme yetenekleriyle teknoloji d\u00fcnyas\u0131nda devrim yaratt\u0131. Ancak, \u00e7o\u011fu LLM uygulamas\u0131n\u0131n temelinde tek seferlik bir istek-yan\u0131t d\u00f6ng\u00fcs\u00fc yatar. Bir soru sorar\u0131z, bir cevap al\u0131r\u0131z ve s\u00fcre\u00e7 genellikle orada biter. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda ise bu yakla\u015f\u0131m, karma\u015f\u0131k sorunlar\u0131 \u00e7\u00f6zmek veya birden fazla ad\u0131m\u0131 i\u00e7eren g\u00f6revleri tamamlamak i\u00e7in yetersiz kalabilir. \u0130\u015fte tam da bu noktada &#8220;yapay zeka ajanlar\u0131&#8221; sahneye \u00e7\u0131k\u0131yor ve geleneksel LLM&#8217;lerin s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 ortadan kald\u0131rarak ak\u0131ll\u0131 sistemlerin yeni bir \u00e7a\u011f\u0131n\u0131 ba\u015flat\u0131yor.<\/p>\n<p>Bir yapay zeka ajan\u0131, basit bir LLM sorgusundan \u00e7ok daha fazlas\u0131d\u0131r. \u00c7evresini alg\u0131lama, hedefler belirleme, bu hedeflere ula\u015fmak i\u00e7in bir eylem plan\u0131 olu\u015fturma, bu plan\u0131 uygulama ve gerekirse plan\u0131 dinamik olarak ayarlama yetene\u011fine sahip otonom bir varl\u0131kt\u0131r. Bu, ajan\u0131n &#8220;d\u00fc\u015f\u00fcnebilece\u011fi&#8221; (muhakeme), &#8220;ara\u00e7lar&#8221; (harici API&#8217;ler, veritabanlar\u0131, kod yorumlay\u0131c\u0131lar) kullanabilece\u011fi ve en \u00f6nemlisi, &#8220;haf\u0131za&#8221; (durum y\u00f6netimi) sayesinde birden fazla etkile\u015fimde ba\u011flam\u0131 koruyabilece\u011fi anlam\u0131na gelir. \u00d6rne\u011fin, bir m\u00fc\u015fteri hizmetleri ajan\u0131, sadece &#8220;sipari\u015fim nerede?&#8221; sorusuna yan\u0131t vermekle kalmaz, ayn\u0131 zamanda m\u00fc\u015fterinin ge\u00e7mi\u015f sipari\u015flerini kontrol edebilir, kargo \u015firketinin API&#8217;siyle entegre olabilir ve hatta \u00fcr\u00fcn iade s\u00fcre\u00e7lerini ba\u015flatabilir. Bu karma\u015f\u0131kl\u0131k ve \u00e7ok ad\u0131ml\u0131 etkile\u015fim yetene\u011fi, geleneksel LLM&#8217;lerin sa\u011flayamad\u0131\u011f\u0131 bir de\u011fer sunar.<\/p>\n<p>Bu yeteneklerin \u00fcretim ortam\u0131nda, yani ger\u00e7ek kullan\u0131c\u0131lar\u0131n kulland\u0131\u011f\u0131 uygulamalarda sorunsuz bir \u015fekilde \u00e7al\u0131\u015fabilmesi i\u00e7in sa\u011flam bir altyap\u0131ya ihtiyac\u0131m\u0131z var. Next.js, modern web uygulamas\u0131 geli\u015ftirme konusundaki g\u00fcc\u00fcyle (sunucu taraf\u0131 renderlama, API rotalar\u0131, Edge fonksiyonlar\u0131 ve \u00fcst\u00fcn performans optimizasyonlar\u0131), bu ajanlar\u0131n kullan\u0131c\u0131 aray\u00fczlerini ve arka plan servislerini bar\u0131nd\u0131rmak i\u00e7in m\u00fckemmel bir platform sunar. Kullan\u0131c\u0131 deneyimini \u00f6n planda tutan Next.js, ayn\u0131 zamanda \u00f6l\u00e7eklenebilirlik ve bak\u0131m kolayl\u0131\u011f\u0131 gibi \u00f6nemli \u00fcretim gereksinimlerini de kar\u015f\u0131lar. \u00d6te yandan, LangGraph.js, bu ajanlar\u0131n karma\u015f\u0131k karar verme s\u00fcre\u00e7lerini, durum y\u00f6netimini ve ara\u00e7 kullan\u0131m\u0131n\u0131 grafik tabanl\u0131 bir yakla\u015f\u0131mla tan\u0131mlamam\u0131z\u0131 sa\u011flayan \u00f6zel bir k\u00fct\u00fcphanedir. LangGraph.js, ajan\u0131n ad\u0131mlar\u0131n\u0131, olas\u0131 eylemlerini ve bu eylemler aras\u0131ndaki ge\u00e7i\u015fleri net bir \u015fekilde modellememize imkan tan\u0131r, b\u00f6ylece ajanlar\u0131n davran\u0131\u015flar\u0131 \u00f6ng\u00f6r\u00fclebilir ve debug edilebilir hale gelir. Bir arac\u0131, geleneksel bir LLM&#8217;i dinamik, etkile\u015fimli ve amaca y\u00f6nelik bir sisteme d\u00f6n\u00fc\u015ft\u00fcren sihirli bile\u015fendir. \u00d6zetle, Next.js bize h\u0131zl\u0131, g\u00fc\u00e7l\u00fc ve kullan\u0131c\u0131 dostu bir &#8220;ev&#8221; sa\u011flarken, LangGraph.js bu evin i\u00e7inde ya\u015fayan &#8220;beyin&#8221;i in\u015fa etmemize yard\u0131mc\u0131 olur. Bu iki teknolojinin birle\u015fimi, sadece bir sohbet botu de\u011fil, ger\u00e7ek i\u015f y\u00fcklerini \u00fcstlenebilen, kararlar alabilen ve kullan\u0131c\u0131larla anlaml\u0131 bir \u015fekilde etkile\u015fime ge\u00e7ebilen \u00fcretim-haz\u0131r yapay zeka ajanlar\u0131 geli\u015ftirmemizin \u00f6n\u00fcn\u00fc a\u00e7ar.<\/p>\n<h2>Temel Kavramlar: Next.js ve LangGraph.js Bize Ne Sunuyor?<\/h2>\n<p>\u00dcretim-haz\u0131r yapay zeka ajanlar\u0131 in\u015fa etme yolculu\u011fumuza ba\u015flarken, kulland\u0131\u011f\u0131m\u0131z temel yap\u0131 ta\u015flar\u0131n\u0131 derinlemesine anlamak kritik \u00f6nem ta\u015f\u0131r. Next.js ve LangGraph.js, bu ajanlar\u0131n hem kullan\u0131c\u0131ya d\u00f6n\u00fck aray\u00fcz\u00fcn\u00fc hem de ak\u0131ll\u0131 karar verme mekanizmas\u0131n\u0131 olu\u015fturmak i\u00e7in se\u00e7ti\u011fimiz iki ana teknolojidir. Her ikisinin de kendine \u00f6zg\u00fc g\u00fc\u00e7l\u00fc y\u00f6nleri vard\u0131r ve birlikte, s\u0131radan bir uygulaman\u0131n \u00f6tesine ge\u00e7en bir deneyim sunarlar.<\/p>\n<h3>Next.js Nedir ve Neden AI Ajanlar\u0131 \u0130\u00e7in \u0130dealdir?<\/h3>\n<p>Next.js, React tabanl\u0131, a\u00e7\u0131k kaynakl\u0131 bir web geli\u015ftirme framework&#8217;\u00fcd\u00fcr. Geli\u015ftiricilere sunucu taraf\u0131 renderlama (SSR), statik site \u00fcretimi (SSG) ve art\u0131ml\u0131 statik yenileme (ISR) gibi g\u00fc\u00e7l\u00fc \u00f6zellikler sunarak, hem performansl\u0131 hem de SEO dostu uygulamalar olu\u015fturma imkan\u0131 tan\u0131r. AI ajanlar\u0131 ba\u011flam\u0131nda, Next.js&#8217;in sundu\u011fu avantajlar paha bi\u00e7ilmezdir:<\/p>\n<ul>\n<li><strong>\u00dcst\u00fcn Kullan\u0131c\u0131 Deneyimi (UX):<\/strong> H\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve ak\u0131c\u0131 aray\u00fczler, kullan\u0131c\u0131lar\u0131n ajanlarla etkile\u015fimini keyifli hale getirir. Next.js&#8217;in optimizasyon yetenekleri sayesinde, ajan\u0131n\u0131z\u0131n yan\u0131tlar\u0131 ne kadar karma\u015f\u0131k olursa olsun, kullan\u0131c\u0131 aray\u00fcz\u00fc her zaman duyarl\u0131 kal\u0131r.<\/li>\n<li><strong>API Rotlar\u0131 ve Sunucusuz Fonksiyonlar:<\/strong> Next.js, do\u011frudan proje i\u00e7erisinde API endpoint&#8217;leri olu\u015fturman\u0131za olanak tan\u0131r. Bu, LangGraph.js tabanl\u0131 ajan mant\u0131\u011f\u0131n\u0131z\u0131 bar\u0131nd\u0131rmak i\u00e7in ideal bir ortam sa\u011flar. Geleneksel bir backend sunucusu kurma ve y\u00f6netme y\u00fck\u00fcnden kurtulursunuz. \u00d6zellikle <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/route-handlers\">Route Handlers<\/a> ve <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/edge-and-nodejs-runtimes\">Edge Fonksiyonlar\u0131<\/a>, d\u00fc\u015f\u00fck gecikmeli ve k\u00fcresel olarak da\u011f\u0131t\u0131lm\u0131\u015f ajan servisleri i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/li>\n<li><strong>React Ekosistemi:<\/strong> Bildi\u011finiz ve sevdi\u011finiz React bile\u015fenlerini kullanarak ajan\u0131n\u0131z\u0131n sohbet aray\u00fcz\u00fcn\u00fc, \u00e7\u0131kt\u0131lar\u0131n\u0131 veya etkile\u015fimli \u00f6\u011felerini kolayca geli\u015ftirebilirsiniz. Bu, frontend geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve mevcut React projelerine entegrasyonu kolayla\u015ft\u0131r\u0131r.<\/li>\n<li><strong>\u00d6l\u00e7eklenebilirlik:<\/strong> Vercel gibi platformlarda Next.js uygulamalar\u0131 da\u011f\u0131t\u0131ld\u0131\u011f\u0131nda, API rotalar\u0131 otomatik olarak sunucusuz fonksiyonlara d\u00f6n\u00fc\u015f\u00fcr. Bu, uygulaman\u0131z\u0131n talebe g\u00f6re kolayca \u00f6l\u00e7eklenebilece\u011fi anlam\u0131na gelir; yani, ajan\u0131n\u0131z milyonlarca kullan\u0131c\u0131ya hizmet vermeye haz\u0131r olabilir.<\/li>\n<li><strong>Hibrit Renderlama:<\/strong> Ajan aray\u00fcz\u00fcn\u00fcz\u00fcn belirli k\u0131s\u0131mlar\u0131n\u0131 statik olarak olu\u015fturabilirken, ajanla etkile\u015fim k\u0131sm\u0131n\u0131 sunucu veya istemci taraf\u0131nda dinamik olarak i\u015fleyebilirsiniz. Bu esneklik, hem h\u0131z hem de ki\u015fiselle\u015ftirilmi\u015f deneyim a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck avantaj sa\u011flar.<\/li>\n<\/ul>\n<h3>LangGraph.js Nedir ve Ajan\u0131 Ak\u0131ll\u0131 Yapan Nedir?<\/h3>\n<p>LangGraph.js, <a href=\"https:\/\/www.langchain.com\/\">LangChain<\/a> ekosisteminin g\u00fc\u00e7l\u00fc bir uzant\u0131s\u0131d\u0131r ve \u00f6zellikle d\u00f6ng\u00fcsel mant\u0131k (loops), durum y\u00f6netimi (state management) ve \u00e7ok ad\u0131ml\u0131 karar verme s\u00fcre\u00e7leri i\u00e7eren ajan sistemleri olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Geleneksel LangChain zincirleri do\u011frusal bir ak\u0131\u015fa sahipken, LangGraph.js bize bu ak\u0131\u015f\u0131 grafik tabanl\u0131 bir \u015fekilde, d\u00fc\u011f\u00fcmler ve kenarlar arac\u0131l\u0131\u011f\u0131yla tan\u0131mlama imkan\u0131 sunar. Ajan\u0131 ger\u00e7ekten ak\u0131ll\u0131 yapan \u015fey, bu yeteneklerdir:<\/p>\n<ul>\n<li><strong>Grafik Tabanl\u0131 Yap\u0131:<\/strong> Ajan\u0131n\u0131z\u0131n farkl\u0131 ad\u0131mlar\u0131n\u0131 (LLM \u00e7a\u011fr\u0131s\u0131, ara\u00e7 kullan\u0131m\u0131, karar verme) birer &#8220;d\u00fc\u011f\u00fcm&#8221; olarak tan\u0131mlars\u0131n\u0131z. Bu d\u00fc\u011f\u00fcmler aras\u0131ndaki ge\u00e7i\u015fler &#8220;kenarlar&#8221; ile belirlenir. Bu g\u00f6rsel ve mod\u00fcler yap\u0131, ajan\u0131n karma\u015f\u0131k davran\u0131\u015flar\u0131n\u0131 tasarlamay\u0131 ve hata ay\u0131klamay\u0131 \u00e7ok daha kolay hale getirir.<\/li>\n<li><strong>D\u00f6ng\u00fcsel Muhakeme (Loopy Reasoning):<\/strong> Ajanlar genellikle bir hedefi ger\u00e7ekle\u015ftirmek i\u00e7in birden fazla deneme yapma ve geri bildirim d\u00f6ng\u00fclerine ihtiya\u00e7 duyarlar. LangGraph.js, bu d\u00f6ng\u00fcsel mant\u0131\u011f\u0131 (\u00f6rne\u011fin, bir ara\u00e7 ba\u015far\u0131s\u0131z oldu\u011funda tekrar deneme veya farkl\u0131 bir araca ge\u00e7me) do\u011fal bir \u015fekilde modellemenizi sa\u011flar.<\/li>\n<li><strong>Durum Y\u00f6netimi:<\/strong> Her ad\u0131mda ajan\u0131n &#8220;durumu&#8221; g\u00fcncellenir. Bu durum, ajan\u0131n ba\u011flam\u0131, ald\u0131\u011f\u0131 kararlar, kulland\u0131\u011f\u0131 ara\u00e7lar\u0131n \u00e7\u0131kt\u0131lar\u0131 gibi bilgileri i\u00e7erir. LangGraph.js, bu durumun d\u00fc\u011f\u00fcmler aras\u0131nda nas\u0131l ta\u015f\u0131naca\u011f\u0131n\u0131 otomatik olarak y\u00f6netir, b\u00f6ylece ajan ge\u00e7mi\u015f etkile\u015fimlerini &#8220;hat\u0131rlayabilir&#8221; ve daha tutarl\u0131 kararlar alabilir.<\/li>\n<li><strong>Ara\u00e7 Entegrasyonu:<\/strong> Ajanlar\u0131n harici sistemlerle etkile\u015fime girmesi, onlar\u0131n ger\u00e7ek de\u011ferini ortaya koyar. LangGraph.js, LangChain&#8217;in zengin <a href=\"https:\/\/python.langchain.com\/docs\/modules\/agents\/tools\/\">ara\u00e7 (tool)<\/a> koleksiyonuyla sorunsuz bir \u015fekilde entegre olur. Bu ara\u00e7lar, veritaban\u0131 sorgular\u0131ndan API \u00e7a\u011fr\u0131lar\u0131na, web kaz\u0131madan kod yorumlamaya kadar her \u015feyi yapabilir. Ajan\u0131n\u0131z, belirli bir g\u00f6revi yerine getirmek i\u00e7in hangi arac\u0131 ne zaman kullanaca\u011f\u0131na karar verebilir.<\/li>\n<li><strong>Ko\u015fullu Ge\u00e7i\u015fler:<\/strong> Ajan\u0131n bir d\u00fc\u011f\u00fcmden di\u011ferine nas\u0131l ge\u00e7ece\u011fi, belirli ko\u015fullara ba\u011fl\u0131 olabilir. \u00d6rne\u011fin, bir LLM&#8217;in yan\u0131t\u0131na g\u00f6re farkl\u0131 bir araca y\u00f6nlendirilebilir veya bir hata durumunda farkl\u0131 bir hata i\u015fleme d\u00fc\u011f\u00fcm\u00fcne ge\u00e7ebilir. Bu esneklik, ajan\u0131n dinamik ve adaptif davran\u0131\u015flar sergilemesini sa\u011flar.<\/li>\n<\/ul>\n<p>Bu iki teknolojinin sinerjisi, ger\u00e7ekten d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc bir potansiyel sunar. Next.js, AI ajan\u0131n\u0131z i\u00e7in performans\u0131 y\u00fcksek, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir &#8220;\u00f6n y\u00fcz&#8221; ve &#8220;API katman\u0131&#8221; sa\u011flarken, LangGraph.js ajan\u0131n karma\u015f\u0131k &#8220;beynini&#8221; in\u015fa etmemize, onun d\u00fc\u015f\u00fcnmesini, \u00f6\u011frenmesini ve etkile\u015fime girmesini sa\u011flayan mimariyi sunar. Bir sonraki b\u00f6l\u00fcmde, bu kavramlar\u0131 somutla\u015ft\u0131rarak ilk AI ajan\u0131 projemizi nas\u0131l kuraca\u011f\u0131m\u0131z\u0131 ve basit bir LangGraph.js ajan\u0131 nas\u0131l tan\u0131mlayaca\u011f\u0131m\u0131z\u0131 g\u00f6rece\u011fiz.<\/p>\n<h2>\u0130lk AI Ajan\u0131m\u0131z\u0131 Olu\u015fturma: Ad\u0131m Ad\u0131m Rehber<\/h2>\n<p>Teorik temelleri anlad\u0131\u011f\u0131m\u0131za g\u00f6re, art\u0131k kollar\u0131 s\u0131vay\u0131p ilk yapay zeka ajan\u0131m\u0131z\u0131 in\u015fa etmeye ba\u015flayabiliriz. Bu b\u00f6l\u00fcmde, Next.js projesini nas\u0131l kuraca\u011f\u0131m\u0131z\u0131, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 nas\u0131l y\u00fckleyece\u011fimizi ve ard\u0131ndan basit bir LangGraph.js ajan\u0131n\u0131n temel yap\u0131s\u0131n\u0131 ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 ele alaca\u011f\u0131z. Amac\u0131m\u0131z, hava durumu bilgisini sorgulayabilen basit bir ajan geli\u015ftirmek olacak. Bu \u00f6rnek, LangGraph.js&#8217;in temel bile\u015fenlerini anlamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n<h3>Next.js Projesi Kurulumu Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>\u00d6ncelikle, yeni bir Next.js projesi olu\u015ftural\u0131m. Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code>\nnpx create-next-app@latest my-ai-agent-app --typescript --eslint --app\n<\/pre>\n<p><\/code><\/p>\n<p>Bu komut, App Router tabanl\u0131, TypeScript ve ESLint deste\u011fi olan yeni bir Next.js projesi ba\u015flatacakt\u0131r. Proje olu\u015fturulduktan sonra, dizine girin:<\/p>\n<pre><code>\ncd my-ai-agent-app\n<\/pre>\n<p><\/code><\/p>\n<p>\u015eimdi ajan\u0131m\u0131z i\u00e7in gerekli olan paketleri kural\u0131m. LangGraph.js, LangChain'in bir par\u00e7as\u0131 oldu\u011fundan, \u00f6ncelikle LangChain'i, ard\u0131ndan LangGraph.js'i ve dil modelimiz i\u00e7in OpenAI SDK's\u0131n\u0131 kurmal\u0131y\u0131z (alternatif olarak Anthropic veya di\u011fer LLM sa\u011flay\u0131c\u0131lar\u0131n\u0131 kullanabilirsiniz):<\/p>\n<pre><code>\nnpm install langchain langgraph openai\n<\/pre>\n<p><\/code><\/p>\n<p>Son olarak, API anahtarlar\u0131m\u0131z\u0131 g\u00fcvenli bir \u015fekilde y\u00f6netmek i\u00e7in bir <code>.env.local<\/code> dosyas\u0131 olu\u015ftural\u0131m. Projenizin k\u00f6k dizininde bu dosyay\u0131 olu\u015fturun ve LLM sa\u011flay\u0131c\u0131n\u0131z\u0131n API anahtar\u0131n\u0131 ekleyin:<\/p>\n<pre><code>\n# .env.local dosyas\u0131\nOPENAI_API_KEY=\"sk-...\"\n<\/pre>\n<p><\/code><\/p>\n<p>Bu anahtara, Next.js uygulaman\u0131z\u0131n API rotalar\u0131ndan <code>process.env.OPENAI_API_KEY<\/code> \u015feklinde eri\u015febileceksiniz.<\/p>\n<h3>Basit Bir LangGraph Ajans\u0131n\u0131n Yap\u0131s\u0131 Nas\u0131l Olmal\u0131d\u0131r?<\/h3>\n<p>Bir LangGraph ajan\u0131, d\u00fc\u011f\u00fcmlerden (nodes), kenarlardan (edges) ve durumdan (state) olu\u015fur. D\u00fc\u011f\u00fcmler, ajan\u0131n ger\u00e7ekle\u015ftirebilece\u011fi eylemleri veya mant\u0131k par\u00e7ac\u0131klar\u0131n\u0131 temsil ederken, kenarlar bu d\u00fc\u011f\u00fcmler aras\u0131ndaki ge\u00e7i\u015fleri tan\u0131mlar. Durum, ajan\u0131n etkile\u015fim boyunca edindi\u011fi bilgileri saklar. Hava durumu ajan\u0131 \u00f6rne\u011fimizde, a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyece\u011fiz:<\/p>\n<ol>\n<li><strong>Ara\u00e7 Tan\u0131mlama:<\/strong> Hava durumu bilgisini \u00e7ekecek bir ara\u00e7 (tool) olu\u015fturaca\u011f\u0131z.<\/li>\n<li><strong>LLM Tan\u0131mlama:<\/strong> Kullan\u0131c\u0131n\u0131n sorgusunu anlayacak ve arac\u0131 kullan\u0131p kullanmayaca\u011f\u0131na karar verecek bir LLM belirleyece\u011fiz.<\/li>\n<li><strong>Ajan Durumu Tan\u0131mlama:<\/strong> Ajana \u00f6zg\u00fc durumu (mesajlar, al\u0131nan kararlar vb.) y\u00f6netecek bir yap\u0131 olu\u015fturaca\u011f\u0131z.<\/li>\n<li><strong>Grafi\u011fi Olu\u015fturma:<\/strong> D\u00fc\u011f\u00fcmleri ve aralar\u0131ndaki ge\u00e7i\u015fleri tan\u0131mlayarak LangGraph'\u0131 in\u015fa edece\u011fiz.<\/li>\n<\/ol>\n<p>\u015eimdi, <code>app\/api\/agent\/route.ts<\/code> ad\u0131nda bir API rotas\u0131 olu\u015ftural\u0131m ve bu rotan\u0131n i\u00e7erisine ajan mant\u0131\u011f\u0131m\u0131z\u0131 yerle\u015ftirelim.<\/p>\n<pre><code>\n\/\/ app\/api\/agent\/route.ts\n\nimport { NextRequest, NextResponse } from 'next\/server';\nimport { StateGraph, END } from '@langchain\/langgraph';\nimport { ChatOpenAI } from '@langchain\/openai';\nimport { Tool } from '@langchain\/core\/tools';\nimport { AgentExecutor, AgentStep } from 'langchain\/agents';\nimport { pull } from 'langchain\/hub';\nimport { AgentAction, AgentFinish, BaseMessage } from 'langchain\/schema';\nimport { RunnablePassthrough, RunnableSequence } from '@langchain\/core\/runnables';\nimport { MessagesPlaceholder } from '@langchain\/core\/prompts';\nimport {\n  ChatPromptTemplate,\n  AIMessage,\n  HumanMessage,\n} from '@langchain\/core\/messages';\n\n\/\/ 1. Ara\u00e7 Tan\u0131mlama: Hava durumu API'sini sim\u00fcle eden bir ara\u00e7\nclass WeatherTool extends Tool {\n  name = 'get_current_weather';\n  description = 'Bir \u015fehir i\u00e7in g\u00fcncel hava durumu bilgisini d\u00f6nd\u00fcr\u00fcr. Parametre olarak \u015fehir ad\u0131 (string) al\u0131r.';\n\n  async _call(input: string): Promise<string> {\n    \/\/ Ger\u00e7ek bir API \u00e7a\u011fr\u0131s\u0131 yerine basit bir sim\u00fclasyon\n    console.log(<code>Hava durumu sorgulan\u0131yor: ${input}<\/code>);\n    if (input.toLowerCase() === 'istanbul') {\n      return '\u0130stanbul\\'da hava \u015fu an par\u00e7al\u0131 bulutlu ve 15\u00b0C.';\n    } else if (input.toLowerCase() === 'ankara') {\n      return 'Ankara\\'da hava a\u00e7\u0131k ve 10\u00b0C.';\n    } else {\n      return <code>\u00dczg\u00fcn\u00fcm, ${input} i\u00e7in hava durumu bilgisi bulunamad\u0131.<\/code>;\n    }\n  }\n}\n\nconst tools = [new WeatherTool()];\n\n\/\/ 2. LLM Tan\u0131mlama\nconst llm = new ChatOpenAI({\n  model: 'gpt-4o-mini', \/\/ Daha h\u0131zl\u0131 yan\u0131tlar i\u00e7in uygun bir model\n  temperature: 0,\n  openAIApiKey: process.env.OPENAI_API_KEY,\n});\n\n\/\/ Ajan i\u00e7in prompt olu\u015fturma\nconst prompt = ChatPromptTemplate.fromMessages([\n  new MessagesPlaceholder('chat_history'),\n  ['human', '{input}'],\n  new MessagesPlaceholder('agent_scratchpad'),\n]);\n\nconst bindedModel = llm.bind({\n  tools: tools.map((tool) => tool.toJSON()),\n});\n\n\/\/ Ajan d\u00fc\u011f\u00fcm\u00fc (LLM'i ve ara\u00e7lar\u0131 kullanarak bir eylem plan\u0131 olu\u015fturur)\nconst agentRunnable = RunnableSequence.from([\n  RunnablePassthrough.assign({\n    agent_scratchpad: (input: { steps: AgentStep[] }) =>\n      input.steps.map((s) => s.log),\n  }),\n  prompt,\n  bindedModel,\n  {\n    steps: (input: { steps: AgentStep[] }) => input.steps,\n    output: (output: AgentAction | AgentFinish) => output,\n  }\n]);\n\n\/\/ LangGraph i\u00e7in ajan durumu\ninterface AgentState {\n  input: string;\n  chat_history: BaseMessage[];\n  steps: AgentStep[];\n}\n\n\/\/ LangGraph olu\u015fturma\nconst workflow = new StateGraph<AgentState>()\n  .addNode('agent', async (state: AgentState) => {\n    \/\/ Ajan\u0131n bir eylem veya son yan\u0131t \u00fcretmesini sa\u011flayan mant\u0131k\n    const response = await agentRunnable.invoke({\n      input: state.input,\n      chat_history: state.chat_history,\n      steps: state.steps,\n    });\n    return { ...state, steps: [...state.steps, { log: response.output.log, observation: '' }] };\n  })\n  .addNode('tool_executor', async (state: AgentState) => {\n    \/\/ Ajan\u0131n se\u00e7ti\u011fi arac\u0131 \u00e7al\u0131\u015ft\u0131ran mant\u0131k\n    const lastStep = state.steps[state.steps.length - 1];\n    if ('tool' in lastStep.log && 'tool_input' in lastStep.log) {\n      const tool = tools.find(t => t.name === lastStep.log.tool);\n      if (tool) {\n        const observation = await tool.invoke(lastStep.log.tool_input);\n        return { ...state, steps: [...state.steps.slice(0, -1), { ...lastStep, observation }] };\n      }\n    }\n    return state; \/\/ Ara\u00e7 bulunamazsa veya eylem uygun de\u011filse durumu de\u011fi\u015ftirme\n  });\n\n\/\/ Ko\u015fullu kenar: Ajan bir ara\u00e7 kullanmak istiyorsa 'tool_executor'a git, bitirdiyse sona\nconst shouldContinue = (state: AgentState): string => {\n  const lastStep = state.steps[state.steps.length - 1];\n  if (lastStep && 'tool' in lastStep.log) {\n    return 'tool'; \/\/ Ara\u00e7 kullan\u0131m\u0131 var\n  }\n  return 'end'; \/\/ Ajan i\u015fini bitirdi\n};\n\nworkflow\n  .addConditionalEdges('agent', shouldContinue, {\n    tool: 'tool_executor',\n    end: END,\n  })\n  .addEdge('tool_executor', 'agent'); \/\/ Ara\u00e7 \u00e7al\u0131\u015ft\u0131ktan sonra tekrar ajana d\u00f6n\n\nworkflow.setEntryPoint('agent'); \/\/ Ba\u015flang\u0131\u00e7 d\u00fc\u011f\u00fcm\u00fcn\u00fc belirle\n\nconst app = workflow.compile();\n\nexport async function POST(req: NextRequest) {\n  try {\n    const { message, history } = await req.json();\n\n    const result = await app.invoke({\n      input: message,\n      chat_history: history || [],\n      steps: [],\n    });\n\n    \/\/ Son ad\u0131m\u0131 kontrol ederek ajan\u0131n \u00e7\u0131kt\u0131s\u0131n\u0131 bul\n    let finalOutput = '\u00dczg\u00fcn\u00fcm, bir yan\u0131t olu\u015fturulamad\u0131.';\n    for (const step of result.steps) {\n        if ('tool' in step.log) {\n            finalOutput = step.observation; \/\/ Arac\u0131n \u00e7\u0131kt\u0131s\u0131\n        } else if ('output' in step.log) {\n            finalOutput = step.log.output; \/\/ LLM'in son yan\u0131t\u0131\n            break;\n        }\n    }\n\n    return NextResponse.json({ response: finalOutput });\n  } catch (error) {\n    console.error('API Error:', error);\n    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<div class=\"uzman-ipucu\">\n  Uzman \u0130pucu: Yukar\u0131daki kod, LangGraph'\u0131n temel mant\u0131\u011f\u0131n\u0131 g\u00f6stermektedir. Ger\u00e7ek bir \u00fcretim ortam\u0131nda, agentRunnable'\u0131 AgentExecutor'dan veya Agent'tan t\u00fcretmek, LangChain'in yerle\u015fik tool \u00e7a\u011f\u0131rma ve \u00e7\u0131kt\u0131 ayr\u0131\u015ft\u0131rma mekanizmalar\u0131ndan daha fazla faydalanman\u0131z\u0131 sa\u011flayabilir. Burada basitle\u015ftirilmi\u015f bir yakla\u015f\u0131m izlenmi\u015ftir. Ayr\u0131ca, <code>BaseMessage<\/code> t\u00fcr\u00fcn\u00fcn bir <code>AIMessage<\/code> veya <code>HumanMessage<\/code> oldu\u011funu belirtmek, sohbet ge\u00e7mi\u015fini daha do\u011fru y\u00f6netmenize yard\u0131mc\u0131 olur.\n<\/div>\n<p>Bu kodda, bir kullan\u0131c\u0131n\u0131n sorusunu alan, hava durumu arac\u0131n\u0131 kullan\u0131p kullanmayaca\u011f\u0131na karar veren ve sonra bu arac\u0131 \u00e7al\u0131\u015ft\u0131rarak yan\u0131t\u0131 geri d\u00f6nd\u00fcren basit bir ajan tasvir edilmi\u015ftir. <code>shouldContinue<\/code> fonksiyonu, ajan\u0131n bir sonraki eylemini belirleyen ko\u015fullu mant\u0131\u011f\u0131 i\u00e7erir. E\u011fer ajan bir ara\u00e7 kullanmas\u0131 gerekti\u011fine karar verirse, <code>tool_executor<\/code> d\u00fc\u011f\u00fcm\u00fcne ge\u00e7er. Aksi takdirde, i\u015flem sona erer.<\/p>\n<p>Bu API rotas\u0131na basit bir frontend iste\u011fi g\u00f6ndermek i\u00e7in \u00f6rne\u011fin <code>app\/page.tsx<\/code> dosyan\u0131z\u0131 g\u00fcncelleyebilirsiniz:<\/p>\n<pre><code>\n\/\/ app\/page.tsx\n'use client'; \/\/ Bu bir istemci bile\u015feni olmal\u0131\n\nimport { useState } from 'react';\n\nexport default function Home() {\n  const [input, setInput] = useState('');\n  const [messages, setMessages] = useState<{ sender: string; text: string }[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const sendMessage = async () => {\n    if (!input.trim()) return;\n\n    const userMessage = { sender: 'user', text: input };\n    setMessages((prev) => [...prev, userMessage]);\n    setInput('');\n    setLoading(true);\n\n    try {\n      const res = await fetch('\/api\/agent', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application\/json',\n        },\n        body: JSON.stringify({\n          message: input,\n          history: messages.map(msg => ({\n            type: msg.sender === 'user' ? 'human' : 'ai',\n            content: msg.text,\n          })),\n        }),\n      });\n\n      const data = await res.json();\n      setMessages((prev) => [...prev, { sender: 'ai', text: data.response || data.error }]);\n    } catch (error) {\n      console.error('Mesaj g\u00f6nderme hatas\u0131:', error);\n      setMessages((prev) => [...prev, { sender: 'ai', text: 'Bir hata olu\u015ftu.' }]);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div style={{ maxWidth: '800px', margin: 'auto', padding: '20px', border: '1px solid #ccc', borderRadius: '8px', display: 'flex', flexDirection: 'column', height: '90vh' }}>\n      <h1 style={{ textAlign: 'center', color: '#2c3e50' }}>AI Hava Durumu Ajan\u0131<\/h1>\n      <div style={{ flexGrow: 1, overflowY: 'auto', marginBottom: '15px', border: '1px solid #eee', padding: '10px', borderRadius: '4px', backgroundColor: '#f9f9f9' }}>\n        {messages.map((msg, index) => (\n          <div key={index} style={{ marginBottom: '10px', textAlign: msg.sender === 'user' ? 'right' : 'left' }}>\n            <span style={{ display: 'inline-block', padding: '8px 12px', borderRadius: '15px', backgroundColor: msg.sender === 'user' ? '#dcf8c6' : '#e2e2e2', color: '#333' }}>\n              <strong>{msg.sender === 'user' ? 'Siz' : 'Ajan'}:<\/strong> {msg.text}\n            <\/span>\n          <\/div>\n        ))}\n        {loading && <div style={{ textAlign: 'center', fontStyle: 'italic', color: '#888' }}>Ajan d\u00fc\u015f\u00fcn\u00fcyor...<\/div>}\n      <\/div>\n      <div style={{ display: 'flex' }}>\n        <input\n          type=\"text\"\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyPress={(e) => {\n            if (e.key === 'Enter') {\n              sendMessage();\n            }\n          }}\n          placeholder=\"\u015eehir ad\u0131 girin (\u00f6rn: \u0130stanbul, Ankara)\"\n          style={{ flexGrow: 1, padding: '10px', border: '1px solid #ccc', borderRadius: '4px', marginRight: '10px' }}\n          disabled={loading}\n        \/>\n        <button\n          onClick={sendMessage}\n          style={{ padding: '10px 15px', backgroundColor: '#0070f3', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}\n          disabled={loading}\n        >\n          G\u00f6nder\n        <\/button>\n      <\/div>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Art\u0131k projenizi \u00e7al\u0131\u015ft\u0131rabilir ve ajan\u0131n\u0131zla etkile\u015fime ge\u00e7ebilirsiniz:<\/p>\n<pre><code>\nnpm run dev\n<\/pre>\n<p><\/code><\/p>\n<p>Taray\u0131c\u0131n\u0131zda <code>http:\/\/localhost:3000<\/code> adresine giderek ajan\u0131n\u0131zla sohbet edebilir, \u0130stanbul veya Ankara'n\u0131n hava durumunu sorarak arac\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6zlemleyebilirsiniz. Bu b\u00f6l\u00fcm, LangGraph.js ve Next.js'in temel entegrasyonunu sa\u011flam bir \u015fekilde anlaman\u0131z\u0131 sa\u011flam\u0131\u015ft\u0131r. Bir sonraki ad\u0131mda, bu ajanlar\u0131 \u00fcretim ortam\u0131na haz\u0131r hale getirmek i\u00e7in optimizasyon ve \u00f6l\u00e7eklenebilirlik stratejilerini inceleyece\u011fiz.<\/p>\n<h2>\u00dcretim-Haz\u0131r Ajanlar \u0130\u00e7in Optimizasyon ve \u00d6l\u00e7eklenebilirlik<\/h2>\n<p>Basit bir AI ajan\u0131n\u0131 \u00e7al\u0131\u015f\u0131r duruma getirmek harika bir ba\u015flang\u0131\u00e7t\u0131r, ancak bu ajan\u0131 ger\u00e7ek d\u00fcnya senaryolar\u0131nda, binlerce kullan\u0131c\u0131n\u0131n ayn\u0131 anda eri\u015febilece\u011fi bir \u00fcretim ortam\u0131na ta\u015f\u0131mak farkl\u0131 zorluklar\u0131 beraberinde getirir. Performans, \u00f6l\u00e7eklenebilirlik, durum y\u00f6netimi ve g\u00fcvenlik, \u00fcretim-haz\u0131r ajanlar i\u00e7in g\u00f6z ard\u0131 edilemez \u00f6nceliklerdir. Bu b\u00f6l\u00fcmde, ajan\u0131n\u0131z\u0131n bu gereksinimleri kar\u015f\u0131layabilmesi i\u00e7in neler yapabilece\u011finizi detayl\u0131ca inceleyece\u011fiz.<\/p>\n<h3>Performans \u0130\u00e7in Next.js Edge Fonksiyonlar\u0131 Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n<p>D\u00fc\u015f\u00fck gecikme s\u00fcresi, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. \u00d6zellikle AI ajanlar\u0131, LLM'lerle ve harici API'lerle etkile\u015fime girdikleri i\u00e7in do\u011fal olarak bir miktar gecikme ya\u015fayabilirler. Next.js'in Edge Fonksiyonlar\u0131, bu gecikmeyi minimuma indirmek i\u00e7in harika bir f\u0131rsat sunar. Edge Fonksiyonlar\u0131, i\u00e7eri\u011fi son kullan\u0131c\u0131ya co\u011frafi olarak en yak\u0131n sunucularda \u00e7al\u0131\u015ft\u0131rmak \u00fczere tasarlanm\u0131\u015ft\u0131r.<\/p>\n<p>AI ajan\u0131n\u0131z\u0131n API rotas\u0131n\u0131 Edge runtime'da \u00e7al\u0131\u015ft\u0131rmak i\u00e7in, API rotan\u0131z\u0131n (\u00f6rne\u011fin <code>app\/api\/agent\/route.ts<\/code>) en ba\u015f\u0131na a\u015fa\u011f\u0131daki kodu eklemeniz yeterlidir:<\/p>\n<pre><code>\n\/\/ app\/api\/agent\/route.ts\nexport const runtime = 'edge'; \/\/ Edge runtime'\u0131 etkinle\u015ftir\n<\/pre>\n<p><\/code><\/p>\n<p><strong>Avantajlar\u0131:<\/strong><\/p>\n<ul>\n<li><strong>D\u00fc\u015f\u00fck Gecikme:<\/strong> Kullan\u0131c\u0131ya co\u011frafi olarak daha yak\u0131n bir konumda \u00e7al\u0131\u015farak, LLM \u00e7a\u011fr\u0131lar\u0131 ve di\u011fer network i\u015flemleri i\u00e7in gecikmeyi \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n<li><strong>K\u00fcresel Da\u011f\u0131t\u0131m:<\/strong> Ajan\u0131n\u0131z\u0131n d\u00fcnya \u00e7ap\u0131nda tutarl\u0131 bir performans sunmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong>Maliyet Etkinli\u011fi:<\/strong> Genellikle sunucusuz fonksiyonlar gibi, yaln\u0131zca kullan\u0131ld\u0131\u011f\u0131nda \u00f6deme yapars\u0131n\u0131z.<\/li>\n<\/ul>\n<p><strong>Zorluklar ve \u00c7\u00f6z\u00fcmleri:<\/strong><\/p>\n<p>Edge runtime, Node.js runtime'\u0131na g\u00f6re daha k\u0131s\u0131tl\u0131 bir ortamd\u0131r. Baz\u0131 Node.js mod\u00fclleri veya yerel ba\u011f\u0131ml\u0131l\u0131klar Edge'de \u00e7al\u0131\u015fmayabilir. LangChain ve LangGraph.js k\u00fct\u00fcphaneleri genellikle Edge uyumlu olacak \u015fekilde tasarlanm\u0131\u015ft\u0131r, ancak kulland\u0131\u011f\u0131n\u0131z di\u011fer ara\u00e7lar veya veritaban\u0131 s\u00fcr\u00fcc\u00fcleri bu k\u0131s\u0131tlamalara tak\u0131labilir.<\/p>\n<ul>\n<li><strong>Veritaban\u0131 Ba\u011flant\u0131lar\u0131:<\/strong> Edge fonksiyonlar\u0131ndan geleneksel ili\u015fkisel veritabanlar\u0131na (PostgreSQL, MySQL) do\u011frudan ba\u011flant\u0131lar bazen sorunlu olabilir. \u00c7\u00f6z\u00fcm olarak, veritaban\u0131 proxies (\u00f6rne\u011fin Supabase, PlanetScale'in Edge uyumlu adapt\u00f6rleri) veya HTTP tabanl\u0131 API'ler arac\u0131l\u0131\u011f\u0131yla veritaban\u0131na eri\u015fim sa\u011flayabilirsiniz. NoSQL veritabanlar\u0131 (\u00f6rne\u011fin DynamoDB'nin HTTP API'si) veya Redis gibi in-memory cache'ler genellikle daha Edge dostudur.<\/li>\n<li><strong>B\u00fcy\u00fck Ba\u011f\u0131ml\u0131l\u0131klar:<\/strong> Paket boyutunu minimal tutmak \u00f6nemlidir. Sadece ger\u00e7ekten ihtiyac\u0131n\u0131z olan ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyin.<\/li>\n<\/ul>\n<h3>Durum Y\u00f6netimi ve Kal\u0131c\u0131l\u0131k Nas\u0131l Sa\u011flan\u0131r?<\/h3>\n<p>LangGraph.js, bir ajan\u0131n durumunu d\u00fc\u011f\u00fcmler aras\u0131nda otomatik olarak ta\u015f\u0131r, ancak bu durum genellikle tek bir \"\u00e7al\u0131\u015ft\u0131rma\" (run) s\u00fcresince haf\u0131zada tutulur. Bir kullan\u0131c\u0131yla birden fazla etkile\u015fimde bulunan (yani oturum bazl\u0131) bir ajan i\u00e7in bu yeterli de\u011fildir. Ajana \"haf\u0131za\" kazand\u0131rmak ve sohbet ge\u00e7mi\u015fini korumak i\u00e7in durumun kal\u0131c\u0131 hale getirilmesi gerekir.<\/p>\n<p><strong>Stratejiler:<\/strong><\/p>\n<ol>\n<li><strong>Veritaban\u0131 Entegrasyonu:<\/strong> En yayg\u0131n ve sa\u011flam y\u00f6ntem, ajan oturum durumunu bir veritaban\u0131nda saklamakt\u0131r.<\/li>\n<ul>\n<li><strong>PostgreSQL\/MongoDB:<\/strong> Karma\u015f\u0131k sohbet ge\u00e7mi\u015fleri ve ajan durumu nesneleri i\u00e7in uygundur. Her kullan\u0131c\u0131 oturumu i\u00e7in benzersiz bir <code>session_id<\/code> olu\u015fturup, bu ID'ye ba\u011fl\u0131 olarak mesajlar\u0131 ve ajan\u0131n i\u00e7 durumunu veritaban\u0131nda saklayabilirsiniz.<\/li>\n<li><strong>Redis:<\/strong> Daha h\u0131zl\u0131 eri\u015fim gerektiren ve daha k\u0131sa \u00f6m\u00fcrl\u00fc durumlar veya \u00f6nbellekleme i\u00e7in idealdir. \u00d6rne\u011fin, son N mesaj\u0131 Redis'te tutarken, daha eski mesajlar\u0131 bir ili\u015fkisel veritaban\u0131na kaydedebilirsiniz.<\/li>\n<\/ul>\n<li><strong>Session ID Kullan\u0131m\u0131:<\/strong> Her yeni kullan\u0131c\u0131 etkile\u015fimi veya oturum i\u00e7in benzersiz bir <code>session_id<\/code> olu\u015fturun. Bu ID'yi hem frontend'de hem de backend'de saklay\u0131n ve API \u00e7a\u011fr\u0131lar\u0131n\u0131zla birlikte g\u00f6nderin. Backend, bu <code>session_id<\/code>'yi kullanarak ilgili sohbet ge\u00e7mi\u015fini ve ajan durumunu veritaban\u0131ndan \u00e7eker.<\/li>\n<\/ol>\n<pre><code>\n\/\/ Durum y\u00f6netimini i\u00e7eren geli\u015fmi\u015f bir API rotas\u0131 \u00f6rne\u011fi (basit\u00e7e g\u00f6sterilmi\u015ftir)\n\/\/ app\/api\/agent\/route.ts i\u00e7indeki POST fonksiyonunu g\u00fcncelleyelim\n\n\/\/ ... (\u00d6nceki kodlar) ...\n\nexport async function POST(req: NextRequest) {\n  try {\n    const { message, sessionId, chatHistory } = await req.json(); \/\/ sessionId ve chatHistory al\n    let currentHistory = chatHistory || [];\n\n    \/\/ Ger\u00e7ek bir uygulamada, sessionId'yi kullanarak veritaban\u0131ndan ge\u00e7mi\u015fi \u00e7ekeriz\n    \/\/ \u00d6rnek: const dbHistory = await getChatHistoryFromDB(sessionId);\n    \/\/ currentHistory = [...dbHistory, ...currentHistory];\n\n    const result = await app.invoke({\n      input: message,\n      chat_history: currentHistory.map((msg: any) =>\n        msg.type === 'human' ? new HumanMessage(msg.content) : new AIMessage(msg.content)\n      ),\n      steps: [],\n    });\n\n    \/\/ ... (\u00c7\u0131kt\u0131 i\u015fleme k\u0131sm\u0131 ayn\u0131 kal\u0131r) ...\n\n    \/\/ Yan\u0131t\u0131 veritaban\u0131na kaydet (ger\u00e7ek uygulamada)\n    \/\/ await saveMessageToDB(sessionId, { type: 'human', content: message });\n    \/\/ await saveMessageToDB(sessionId, { type: 'ai', content: finalOutput });\n\n    return NextResponse.json({ response: finalOutput, newSessionId: sessionId });\n  } catch (error) {\n    console.error('API Error:', error);\n    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<div class=\"uzman-ipucu\">\n  Uzman \u0130pucu: Durum y\u00f6netiminde <code>LangChainMessageHistory<\/code> gibi LangChain mod\u00fcllerini veya do\u011frudan <a href=\"https:\/\/github.com\/langchain-ai\/langchainjs\/tree\/main\/libs\/langchain-community\/src\/stores\">LangChain Community Stores<\/a>'u veritaban\u0131n\u0131zla entegre ederek daha yap\u0131sal bir yakla\u015f\u0131m izleyebilirsiniz.\n<\/div>\n<h3>G\u00fcvenlik ve Kimlik Do\u011frulama Neden \u00d6nemlidir?<\/h3>\n<p>\u00dcretim ortam\u0131ndaki her uygulama gibi, AI ajanlar\u0131 da g\u00fcvenlik konusunda titizlikle ele al\u0131nmal\u0131d\u0131r.<\/p>\n<ul>\n<li><strong>API Anahtarlar\u0131n\u0131n Korunmas\u0131:<\/strong> LLM sa\u011flay\u0131c\u0131lar\u0131n\u0131z\u0131n (OpenAI, Anthropic vb.) API anahtarlar\u0131n\u0131 asla istemci taraf\u0131nda veya versiyon kontrol\u00fcnde (Git) a\u00e7\u0131k\u00e7a bulundurmay\u0131n. Her zaman ortam de\u011fi\u015fkenleri (<code>.env.local<\/code>) arac\u0131l\u0131\u011f\u0131yla sunucu taraf\u0131nda (API rotalar\u0131 veya Edge fonksiyonlar\u0131) eri\u015fin.<\/li>\n<li><strong>Kullan\u0131c\u0131 Kimlik Do\u011frulama ve Yetkilendirme:<\/strong> Ajan\u0131n\u0131z belirli kullan\u0131c\u0131lara \u00f6zel veya hassas bilgilere eri\u015fiyorsa (\u00f6rne\u011fin, sipari\u015f ge\u00e7mi\u015fi), kullan\u0131c\u0131lar\u0131n kimlik do\u011frulamas\u0131 yap\u0131ld\u0131\u011f\u0131ndan ve yaln\u0131zca kendi verilerine eri\u015febildiklerinden emin olun. JWT (JSON Web Tokens) veya NextAuth.js gibi \u00e7\u00f6z\u00fcmler bu konuda yard\u0131mc\u0131 olabilir.<\/li>\n<li><strong>Giri\u015f Do\u011frulama ve Temizleme (Input Validation and Sanitization):<\/strong> Kullan\u0131c\u0131lardan gelen giri\u015fleri her zaman do\u011frulay\u0131n ve temizleyin. Bu, prompt injection gibi sald\u0131r\u0131lar\u0131 \u00f6nlemenin yan\u0131 s\u0131ra, ajan\u0131n beklenmedik veya zararl\u0131 girdilerle kar\u015f\u0131la\u015fmas\u0131n\u0131 engeller. \u00d6zellikle arac\u0131 \u00e7a\u011fr\u0131lar\u0131 yapmadan \u00f6nce giri\u015fleri titizlikle kontrol edin.<\/li>\n<li><strong>Hata Y\u00f6netimi ve Loglama:<\/strong> \u00dcretim ortam\u0131nda olu\u015fan hatalar\u0131 yakalay\u0131n ve detayl\u0131 bir \u015fekilde loglay\u0131n. Bu, g\u00fcvenlik zafiyetlerinin veya performans sorunlar\u0131n\u0131n h\u0131zl\u0131ca tespit edilmesine yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\n<p>Bu optimizasyon ve g\u00fcvenlik stratejilerini uygulayarak, AI ajanlar\u0131n\u0131z\u0131 sadece ak\u0131ll\u0131 de\u011fil, ayn\u0131 zamanda g\u00fcvenilir, h\u0131zl\u0131 ve \u00f6l\u00e7eklenebilir hale getirebilirsiniz. Bir sonraki b\u00f6l\u00fcmde, bu prensipleri bir araya getirerek ger\u00e7ek bir d\u00fcnya senaryosunu, yani bir e-ticaret m\u00fc\u015fteri hizmetleri ajan\u0131n\u0131 nas\u0131l in\u015fa edebilece\u011fimize odaklanaca\u011f\u0131z.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryosu: E-ticaret M\u00fc\u015fteri Hizmetleri Ajan\u0131<\/h2>\n<p>Teoriyi ve teknik detaylar\u0131 inceledikten sonra, edindi\u011fimiz bilgileri somut bir ger\u00e7ek d\u00fcnya senaryosuna uygulayal\u0131m: E-ticaret m\u00fc\u015fteri hizmetleri ajan\u0131. Bu vaka analizi, LangGraph.js ile karma\u015f\u0131k bir ajan\u0131 nas\u0131l tasarlayaca\u011f\u0131m\u0131z\u0131 ve Next.js'in sundu\u011fu olanaklarla nas\u0131l entegre edece\u011fimizi g\u00f6sterecek. Amac\u0131m\u0131z, kullan\u0131c\u0131n\u0131n sorular\u0131n\u0131 anlayan, ilgili bilgilere eri\u015fen ve ba\u011flam\u0131 koruyarak dinamik yan\u0131tlar \u00fcreten bir ajan yaratmakt\u0131r.<\/p>\n<h3>Vaka Analizi: E-ticaret Destek Ajan\u0131 Nas\u0131l Geli\u015ftirilir?<\/h3>\n<p><strong>Problem:<\/strong> Geleneksel m\u00fc\u015fteri hizmetleri sistemleri genellikle insan m\u00fcdahalesi gerektirir veya basit SSS'lerle s\u0131n\u0131rl\u0131d\u0131r. M\u00fc\u015fteriler; sipari\u015f durumu sorgulama, \u00fcr\u00fcn bilgisi alma, iade s\u00fcre\u00e7lerini \u00f6\u011frenme gibi konularda h\u0131zl\u0131 ve do\u011fru yan\u0131tlara ihtiya\u00e7 duyar. Bu durum, insan kaynaklar\u0131 \u00fczerinde b\u00fcy\u00fck bir y\u00fck olu\u015fturabilir ve yan\u0131t s\u00fcrelerini uzatabilir.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Next.js tabanl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc ile g\u00fc\u00e7lendirilmi\u015f, LangGraph.js ile geli\u015ftirilmi\u015f bir AI m\u00fc\u015fteri hizmetleri ajan\u0131. Bu ajan, do\u011fal dil i\u015fleme yetene\u011fi sayesinde m\u00fc\u015fteri sorular\u0131n\u0131 anlayacak, \u00e7e\u015fitli \"ara\u00e7lar\u0131\" kullanarak gerekli bilgilere ula\u015facak ve ki\u015fiselle\u015ftirilmi\u015f yan\u0131tlar sunacakt\u0131r.<\/p>\n<h4>Ajan\u0131n Yetenekleri ve Kullanaca\u011f\u0131 Ara\u00e7lar:<\/h4>\n<ol>\n<li><strong>Sipari\u015f Durumu Sorgulama:<\/strong> M\u00fc\u015fterinin sipari\u015f numaras\u0131n\u0131 veya kullan\u0131c\u0131 hesab\u0131n\u0131 kullanarak mevcut ve ge\u00e7mi\u015f sipari\u015flerin durumunu (kargoya verildi, teslim edildi vb.) sorgulayabilir.\n<ul>\n<li><strong>Ara\u00e7:<\/strong> <code>getOrderStatus(orderId: string, userId: string)<\/code> - Bir veritaban\u0131 veya harici kargo API'si ile entegre.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u00dcr\u00fcn Bilgisi Sa\u011flama:<\/strong> Belirli bir \u00fcr\u00fcn hakk\u0131nda detayl\u0131 bilgi (fiyat, stok, \u00f6zellikler) verebilir veya benzer \u00fcr\u00fcnler \u00f6nerebilir.\n<ul>\n<li><strong>Ara\u00e7:<\/strong> <code>getProductDetails(productIdOrName: string)<\/code> - \u00dcr\u00fcn katalog API'si ile entegre.<\/li>\n<li><strong>Ara\u00e7:<\/strong> <code>recommendProducts(category: string)<\/code> - \u00d6neri motoru API'si.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u0130ade Politikas\u0131 ve S\u00fcreci A\u00e7\u0131klama:<\/strong> M\u00fc\u015fterilere iade ko\u015fullar\u0131, s\u00fcresi ve nas\u0131l yap\u0131laca\u011f\u0131 hakk\u0131nda bilgi verebilir.\n<ul>\n<li><strong>Ara\u00e7:<\/strong> <code>getReturnPolicy()<\/code> - Statik bir bilgi bankas\u0131 veya CMS entegrasyonu.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Genel Bilgi ve SSS:<\/strong> S\u0131k\u00e7a sorulan di\u011fer sorulara (\u00f6deme y\u00f6ntemleri, kargo \u00fccretleri vb.) yan\u0131t verebilir.\n<ul>\n<li><strong>Ara\u00e7:<\/strong> <code>searchKnowledgeBase(query: string)<\/code> - Vekt\u00f6r veritaban\u0131 destekli bir SSS arama motoru.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4>LangGraph Ajan\u0131n\u0131n Karar D\u00f6ng\u00fcs\u00fc:<\/h4>\n<p>Bu ajan\u0131n LangGraph.js \u00fczerindeki i\u015f ak\u0131\u015f\u0131, dinamik karar verme yetene\u011fini sergileyecektir:<\/p>\n<ol>\n<li><strong>Giri\u015f (Human Message):<\/strong> Kullan\u0131c\u0131dan bir mesaj al\u0131n\u0131r.<\/li>\n<li><strong>Soru Tipi Belirleme (Ajan D\u00fc\u011f\u00fcm\u00fc):<\/strong> LLM, gelen mesaj\u0131n hangi kategoriye girdi\u011fini belirlemeye \u00e7al\u0131\u015f\u0131r:\n<ul>\n<li>Sipari\u015f sorgusu mu?<\/li>\n<li>\u00dcr\u00fcn bilgisi mi?<\/li>\n<li>\u0130adeyle ilgili mi?<\/li>\n<li>Genel bir soru mu?<\/li>\n<li>Veya hi\u00e7bir kategoriye girmiyor mu?<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u0130lgili Arac\u0131 \u00c7a\u011f\u0131rma (Ko\u015fullu Kenarlar):<\/strong> LLM'in belirledi\u011fi soru tipine g\u00f6re ajan, uygun araca y\u00f6nlendirilir. \u00d6rne\u011fin, \"Sipari\u015f durumum ne?\" gibi bir soru i\u00e7in <code>getOrderStatus<\/code> arac\u0131na y\u00f6nlendirilir. E\u011fer gerekli parametreler (sipari\u015f numaras\u0131) eksikse, ajan kullan\u0131c\u0131dan bu bilgiyi ister (d\u00f6ng\u00fcsel muhakeme).<\/li>\n<li><strong>Arac\u0131n \u00c7al\u0131\u015ft\u0131r\u0131lmas\u0131 (Ara\u00e7 D\u00fc\u011f\u00fcm\u00fc):<\/strong> Se\u00e7ilen ara\u00e7 \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve sonu\u00e7 ajan\u0131n durumuna eklenir.<\/li>\n<li><strong>Yan\u0131t Olu\u015fturma ve Kullan\u0131c\u0131ya D\u00f6nme (Ajan D\u00fc\u011f\u00fcm\u00fc):<\/strong> Ajan, arac\u0131n \u00e7\u0131kt\u0131s\u0131n\u0131 ve sohbet ge\u00e7mi\u015fini kullanarak kullan\u0131c\u0131ya do\u011fal dilde bir yan\u0131t olu\u015fturur. E\u011fer ba\u015fka bir araca ihtiya\u00e7 duyulmuyorsa, s\u00fcre\u00e7 sona erer.<\/li>\n<li><strong>D\u00f6ng\u00fcsel Tekrar:<\/strong> E\u011fer ilk ara\u00e7 yeterli bilgiyi sa\u011flamazsa veya kullan\u0131c\u0131 yeni bir soru sorarsa, ajan tekrar Soru Tipi Belirleme ad\u0131m\u0131na d\u00f6ner.<\/li>\n<\/ol>\n<pre><code>\n\/\/ app\/api\/customer-service-agent\/route.ts (\u00d6rnek bir API rotas\u0131 yap\u0131s\u0131)\n\nimport { NextRequest, NextResponse } from 'next\/server';\nimport { StateGraph, END } from '@langchain\/langgraph';\nimport { ChatOpenAI } from '@langchain\/openai';\nimport { Tool } from '@langchain\/core\/tools';\nimport { BaseMessage, HumanMessage, AIMessage } from 'langchain\/schema';\nimport { ChatPromptTemplate, MessagesPlaceholder } from '@langchain\/core\/prompts';\nimport { RunnablePassthrough, RunnableSequence } from '@langchain\/core\/runnables';\nimport { convertTo }= require('@langchain\/core\/messages'); \/\/ \u00d6rnek i\u00e7in gerekli\n\n\/\/ \u00d6rnek Ara\u00e7lar (Ger\u00e7ek uygulamada detayl\u0131 API entegrasyonlar\u0131 olur)\nclass GetOrderStatusTool extends Tool {\n  name = 'get_order_status';\n  description = 'Kullan\u0131c\u0131n\u0131n sipari\u015f numaras\u0131n\u0131 (string) ve kullan\u0131c\u0131 ID\\'sini (string) alarak sipari\u015f durumunu d\u00f6nd\u00fcr\u00fcr.';\n  async _call(input: string): Promise<string> {\n    const { orderId, userId } = JSON.parse(input); \/\/ Varsay\u0131msal JSON input\n    if (orderId === '12345' && userId === 'user1') {\n      return <code>Sipari\u015f ${orderId} \u015fu anda &#039;Kargoya Verildi&#039; durumundad\u0131r. Tahmini teslimat: 3 g\u00fcn.<\/code>;\n    }\n    return 'Belirtilen sipari\u015f numaras\u0131 veya kullan\u0131c\u0131 ID ile sipari\u015f bulunamad\u0131.';\n  }\n}\n\nclass GetProductDetailsTool extends Tool {\n  name = 'get_product_details';\n  description = '\u00dcr\u00fcn ad\u0131 (string) veya ID (string) ile \u00fcr\u00fcn detaylar\u0131n\u0131 (fiyat, stok) d\u00f6nd\u00fcr\u00fcr.';\n  async _call(input: string): Promise<string> {\n    if (input.toLowerCase().includes('laptop')) {\n      return 'Gaming Laptop: Fiyat 20.000 TL, Stokta 5 adet, \u00d6zellikler: i7 i\u015flemci, 16GB RAM.';\n    }\n    return 'Belirtilen \u00fcr\u00fcn bulunamad\u0131.';\n  }\n}\n\nconst customerServiceTools = [new GetOrderStatusTool(), new GetProductDetailsTool()];\n\nconst llm = new ChatOpenAI({\n  model: 'gpt-4o-mini',\n  temperature: 0,\n  openAIApiKey: process.env.OPENAI_API_KEY,\n});\n\nconst prompt = ChatPromptTemplate.fromMessages([\n  ['system', 'Sen bir e-ticaret m\u00fc\u015fteri hizmetleri ajan\u0131s\u0131n. M\u00fc\u015fterilere yard\u0131mc\u0131 olmak i\u00e7in elinden gelenin en iyisini yap. Gerekirse ara\u00e7lar\u0131 kullan.'],\n  new MessagesPlaceholder('chat_history'),\n  ['human', '{input}'],\n  new MessagesPlaceholder('agent_scratchpad'),\n]);\n\nconst agentRunnable = RunnableSequence.from([\n  RunnablePassthrough.assign({\n    agent_scratchpad: (input: { steps: any[] }) =>\n      input.steps.map((s) => s.log),\n  }),\n  prompt,\n  llm.bind({ tools: customerServiceTools.map(tool => tool.toJSON()) }),\n  {\n    steps: (input: { steps: any[] }) => input.steps,\n    output: (output: any) => output, \/\/ LLM'den gelen \u00e7\u0131kt\u0131y\u0131 direkt al\n  }\n]);\n\ninterface CustomerServiceAgentState {\n  input: string;\n  chat_history: BaseMessage[];\n  steps: any[]; \/\/ AgentStep[] yerine daha genel bir tip\n}\n\nconst workflow = new StateGraph<CustomerServiceAgentState>()\n  .addNode('agent', async (state: CustomerServiceAgentState) => {\n    const response = await agentRunnable.invoke({\n      input: state.input,\n      chat_history: state.chat_history,\n      steps: state.steps,\n    });\n    return { ...state, steps: [...state.steps, { log: response.output.log, observation: '' }] };\n  })\n  .addNode('tool_executor', async (state: CustomerServiceAgentState) => {\n    const lastStep = state.steps[state.steps.length - 1];\n    if (lastStep && 'tool' in lastStep.log && 'tool_input' in lastStep.log) {\n      const tool = customerServiceTools.find(t => t.name === lastStep.log.tool);\n      if (tool) {\n        const observation = await tool.invoke(lastStep.log.tool_input);\n        return { ...state, steps: [...state.steps.slice(0, -1), { ...lastStep, observation }] };\n      }\n    }\n    return state;\n  });\n\nconst shouldContinue = (state: CustomerServiceAgentState): string => {\n  const lastStep = state.steps[state.steps.length - 1];\n  if (lastStep && 'tool' in lastStep.log) {\n    return 'tool';\n  }\n  return 'end';\n};\n\nworkflow\n  .addConditionalEdges('agent', shouldContinue, {\n    tool: 'tool_executor',\n    end: END,\n  })\n  .addEdge('tool_executor', 'agent');\n\nworkflow.setEntryPoint('agent');\nconst app = workflow.compile();\n\n\nexport async function POST(req: NextRequest) {\n  try {\n    const { message, history, sessionId } = await req.json();\n\n    \/\/ Ger\u00e7ek bir uygulamada, burada sessionId'yi kullanarak veritaban\u0131ndan ge\u00e7mi\u015fi \u00e7ekeriz\n    \/\/ const currentHistoryFromDB = await getChatHistory(sessionId);\n    \/\/ const mergedHistory = [...currentHistoryFromDB, ...history]; \/\/ Mevcut ge\u00e7mi\u015fi birle\u015ftir\n\n    const result = await app.invoke({\n      input: message,\n      chat_history: history.map((msg: any) =>\n        msg.type === 'human' ? new HumanMessage(msg.content) : new AIMessage(msg.content)\n      ),\n      steps: [], \/\/ Her \u00e7a\u011fr\u0131da yeni bir ad\u0131m dizisi ba\u015flat\u0131yoruz\n    });\n\n    let finalOutput = '\u00dczg\u00fcn\u00fcm, bir yan\u0131t olu\u015fturulamad\u0131.';\n    for (const step of result.steps) {\n        if ('tool' in step.log) {\n            finalOutput = step.observation;\n        } else if ('output' in step.log) {\n            finalOutput = step.log.output;\n            break;\n        }\n    }\n\n    \/\/ Ger\u00e7ek uygulamada, ajan\u0131n yan\u0131t\u0131n\u0131 ve kullan\u0131c\u0131n\u0131n mesaj\u0131n\u0131 veritaban\u0131na kaydederiz\n    \/\/ await saveMessage(sessionId, { type: 'human', content: message });\n    \/\/ await saveMessage(sessionId, { type: 'ai', content: finalOutput });\n\n    return NextResponse.json({ response: finalOutput });\n  } catch (error) {\n    console.error('Customer Service Agent API Error:', error);\n    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod, e-ticaret ajan\u0131 i\u00e7in temel bir API rotas\u0131 olu\u015fturur. Frontend'de, bu rotay\u0131 kullanarak ajana istek g\u00f6nderecek ve yan\u0131tlar\u0131 g\u00f6sterecek bir sohbet aray\u00fcz\u00fc geli\u015ftirebiliriz. Bu aray\u00fcz\u00fcn mobil uyumlu olmas\u0131, g\u00fcn\u00fcm\u00fcz e-ticaret deneyimi i\u00e7in hayati \u00f6neme sahiptir. A\u015fa\u011f\u0131da, mobil uyumlu bir aray\u00fcz i\u00e7in basit bir CSS medya sorgusu \u00f6rne\u011fi verilmi\u015ftir (<code><\/p>\n<style><\/code> etiketi i\u00e7indeki \u00f6rne\u011fe ek olarak):<\/p>\n<pre><code>\n\/* Daha karma\u015f\u0131k aray\u00fczler i\u00e7in \u00f6rnek medya sorgusu *\/\n@media (max-width: 600px) {\n  .chat-container {\n    width: 100%;\n    margin: 0;\n    border-radius: 0;\n  }\n  .chat-input-area {\n    flex-direction: column;\n  }\n  .chat-input-area input {\n    margin-bottom: 10px;\n    margin-right: 0;\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu vaka analizi, Next.js'in frontend ve backend g\u00fcc\u00fcn\u00fc, LangGraph.js'in ak\u0131ll\u0131 ajan modelleme yetene\u011fiyle birle\u015ftirerek ger\u00e7ek d\u00fcnyada nas\u0131l bir de\u011fer yaratabilece\u011fimizi g\u00f6stermektedir. Ajan, sadece sorular\u0131 yan\u0131tlamakla kalm\u0131yor, ayn\u0131 zamanda kullan\u0131c\u0131n\u0131n ba\u011flam\u0131n\u0131 anlayarak ve harici ara\u00e7lar\u0131 etkili bir \u015fekilde kullanarak proaktif \u00e7\u00f6z\u00fcmler sunabiliyor. Bu t\u00fcr ajanlar, m\u00fc\u015fteri memnuniyetini art\u0131r\u0131rken operasyonel maliyetleri d\u00fc\u015f\u00fcrme potansiyeline sahiptir.<\/p>\n<h2>Geli\u015fmi\u015f Teknikler ve Gelecek Trendler<\/h2>\n<p>AI ajanlar\u0131 alan\u0131ndaki geli\u015fmeler ba\u015f d\u00f6nd\u00fcr\u00fcc\u00fc bir h\u0131zla devam ediyor ve \u00fcretim-haz\u0131r ajanlar in\u015fa etmek, s\u00fcrekli \u00f6\u011frenmeyi ve yeni teknikleri benimsemeyi gerektiriyor. Temel bir ajan\u0131n \u00f6tesine ge\u00e7mek isteyen deneyimli geli\u015ftiriciler i\u00e7in, bu b\u00f6l\u00fcmde daha geli\u015fmi\u015f yakla\u015f\u0131mlar\u0131 ve bu alan\u0131n gelece\u011fini \u015fekillendiren trendleri ele alaca\u011f\u0131z.<\/p>\n<h3>\u00c7oklu Ajan Sistemleri ve \u0130leti\u015fim Stratejileri Nelerdir?<\/h3>\n<p>Tek bir b\u00fcy\u00fck ve her \u015feyi yapmaya \u00e7al\u0131\u015fan ajan\u0131n yerine, her biri belirli bir uzmanl\u0131k alan\u0131na sahip birden fazla ajan\u0131 bir araya getirmek, karma\u015f\u0131k problemlerin \u00e7\u00f6z\u00fcm\u00fcnde daha etkili olabilir. Bu \"ajan topluluklar\u0131\", insan tak\u0131mlar\u0131na benzer \u015fekilde birbirleriyle i\u015fbirli\u011fi yaparak g\u00f6revleri tamamlar.<\/p>\n<ul>\n<li><strong>Uzmanla\u015fm\u0131\u015f Ajanlar:<\/strong> Her ajan belirli bir g\u00f6reve veya bilgi alan\u0131na odaklan\u0131r. \u00d6rne\u011fin, bir \"veri analisti ajan\", bir \"kod geli\u015ftirici ajan\" veya bir \"ara\u015ft\u0131rmac\u0131 ajan\" olabilir. E-ticaret senaryosunda, \"sipari\u015f ajan\u0131\", \"\u00fcr\u00fcn ajan\u0131\" ve \"iade ajan\u0131\" gibi ayr\u0131\u015fmalar d\u00fc\u015f\u00fcnebiliriz.<\/li>\n<li><strong>\u0130leti\u015fim Protokolleri:<\/strong> Ajanlar aras\u0131ndaki etkili ileti\u015fim, sistemin ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6neme sahiptir.\n<ul>\n<li><strong>Mesaj Kuyruklar\u0131 (RabbitMQ, Kafka, AWS SQS):<\/strong> Ajanlar, mesajlar\u0131 bu kuyruklara g\u00f6nderip alarak e\u015fzamans\u0131z bir \u015fekilde ileti\u015fim kurabilirler. Bu, \u00f6zellikle \u00f6l\u00e7eklenebilirlik ve hata tolerans\u0131 i\u00e7in \u00f6nemlidir.<\/li>\n<li><strong>Ortak Bir \"D\u00fc\u015f\u00fcnce Alan\u0131\" (Shared Scratchpad):<\/strong> Ajanlar\u0131n ortak bir durumu veya ge\u00e7ici not defterini g\u00fcncelleyerek birbirlerinin ilerlemesini g\u00f6rmesi sa\u011flanabilir. LangGraph'\u0131n durum y\u00f6netimi, bu yakla\u015f\u0131ma bir ba\u015flang\u0131\u00e7 noktas\u0131 sunar.<\/li>\n<li><strong>Y\u00f6netici Ajan (Orchestrator Agent):<\/strong> Daha karma\u015f\u0131k sistemlerde, birden fazla ajan\u0131 koordine eden ve g\u00f6revleri uygun ajana y\u00f6nlendiren bir y\u00f6netici ajan bulunabilir. Bu, s\u00fcreci daha d\u00fczenli ve verimli hale getirir.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"uzman-ipucu\">\n  Uzman \u0130pucu: \u00c7oklu ajan sistemleri, karma\u015f\u0131kl\u0131\u011f\u0131 art\u0131rsa da, her ajan\u0131n daha basit ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, her ajan\u0131n kendi \u00f6zel ara\u00e7 setine sahip olmas\u0131, genel sistemin yeteneklerini zenginle\u015ftirir.\n<\/div>\n<h3>\u0130nsan Destekli Ajanlar: Handoff Mekanizmalar\u0131 Nas\u0131l Olu\u015fturulur?<\/h3>\n<p>En ak\u0131ll\u0131 AI ajanlar\u0131 bile bazen insan m\u00fcdahalesine ihtiya\u00e7 duyar. Ajan\u0131n yetersiz kald\u0131\u011f\u0131, etik ikilemlerle kar\u015f\u0131la\u015ft\u0131\u011f\u0131 veya m\u00fc\u015fteri talebinin \u00e7ok karma\u015f\u0131k oldu\u011fu durumlarda, s\u00fcreci bir insan operat\u00f6re sorunsuz bir \u015fekilde aktarabilmek \u00fcretim-haz\u0131r sistemler i\u00e7in olmazsa olmazd\u0131r. Bu \"handoff\" mekanizmalar\u0131, hibrit bir m\u00fc\u015fteri hizmetleri modeli olu\u015fturur.<\/p>\n<ul>\n<li><strong>Kriter Tan\u0131mlama:<\/strong> Ajan\u0131n bir insan operat\u00f6re aktarma yapmas\u0131 gerekti\u011fi durumlar\u0131 \u00f6nceden belirleyin. \u00d6rne\u011fin:\n<ul>\n<li>Belirli anahtar kelimelerin alg\u0131lanmas\u0131 (\"\u015firketinizi \u015fikayet edece\u011fim\").<\/li>\n<li>Ajan\u0131n belirli bir ara\u00e7 setini art arda ba\u015far\u0131s\u0131z bir \u015fekilde kullanmas\u0131.<\/li>\n<li>Kullan\u0131c\u0131n\u0131n iste\u011finin mevcut ara\u00e7larla \u00e7\u00f6z\u00fclemeyecek kadar karma\u015f\u0131k olmas\u0131.<\/li>\n<li>Kullan\u0131c\u0131n\u0131n a\u00e7\u0131k\u00e7a bir insanla konu\u015fmak istemesi.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Aktar\u0131m S\u00fcreci:<\/strong>\n<ul>\n<li><strong>Bildirim Sistemi:<\/strong> Ajan, bir handoff gerekti\u011finde ilgili insan operat\u00f6re veya bir destek kuyru\u011funa (\u00f6rn: Slack, e-posta, Intercom) otomatik olarak bildirim g\u00f6nderir.<\/li>\n<li><strong>Ba\u011flam Aktar\u0131m\u0131:<\/strong> Ajan\u0131n o ana kadar toplad\u0131\u011f\u0131 t\u00fcm bilgiler (sohbet ge\u00e7mi\u015fi, kullan\u0131c\u0131 bilgileri, ajan\u0131n ald\u0131\u011f\u0131 kararlar), insan operat\u00f6re sorunsuz bir \u015fekilde aktar\u0131lmal\u0131d\u0131r. Bu, operat\u00f6r\u00fcn konuya h\u0131zla hakim olmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong>Kullan\u0131c\u0131ya Bilgi Verme:<\/strong> Kullan\u0131c\u0131ya, talebinin bir insan operat\u00f6re aktar\u0131ld\u0131\u011f\u0131 ve k\u0131sa s\u00fcre i\u00e7inde kendisine yard\u0131mc\u0131 olunaca\u011f\u0131 bilgisi verilmelidir.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Test Edilebilirlik ve \u0130zleme Neden Kritik?<\/h3>\n<p>\u00dcretim ortam\u0131ndaki her yaz\u0131l\u0131m gibi, AI ajanlar\u0131n\u0131n da s\u00fcrekli olarak test edilmesi ve izlenmesi gerekir. Aksi takdirde, ajanlar beklenmedik davran\u0131\u015flar sergileyebilir, hatal\u0131 kararlar alabilir veya performans sorunlar\u0131 ya\u015fayabilir.<\/p>\n<ul>\n<li><strong>Unit ve Entegrasyon Testleri:<\/strong>\n<ul>\n<li><strong>Ara\u00e7 Testleri:<\/strong> Her bir arac\u0131n\u0131z\u0131n (API entegrasyonu, veritaban\u0131 sorgusu) ba\u011f\u0131ms\u0131z olarak do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun.<\/li>\n<li><strong>D\u00fc\u011f\u00fcm Testleri:<\/strong> LangGraph'taki her bir d\u00fc\u011f\u00fcm\u00fcn (LLM \u00e7a\u011fr\u0131s\u0131, ko\u015fullu mant\u0131k) beklenen \u00e7\u0131kt\u0131lar\u0131 \u00fcretti\u011fini test edin.<\/li>\n<li><strong>U\u00e7tan Uca (End-to-End) Testler:<\/strong> Ajan\u0131n belirli senaryolarda (\u00f6rn: \"Hava durumu nedir?\", \"Sipari\u015fimi iptal et\") do\u011fru kararlar\u0131 verdi\u011fini ve beklenen yan\u0131tlar\u0131 \u00fcretti\u011fini test edin.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u0130zleme (Monitoring) ve Loglama:<\/strong>\n<ul>\n<li><strong>LLM Kullan\u0131m\u0131 ve Maliyeti:<\/strong> Hangi LLM'lerin ne s\u0131kl\u0131kta \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131 ve ne kadar maliyet yaratt\u0131\u011f\u0131n\u0131 izleyin.<\/li>\n<li><strong>Ajan\u0131n Kararlar\u0131:<\/strong> Ajan\u0131n hangi arac\u0131 ne zaman \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131, hangi ko\u015fullu ge\u00e7i\u015fi se\u00e7ti\u011fini ve neden bu kararlar\u0131 ald\u0131\u011f\u0131n\u0131 loglay\u0131n. Bu, ajan\u0131n \"d\u00fc\u015f\u00fcnce s\u00fcrecini\" anlaman\u0131za yard\u0131mc\u0131 olur.<\/li>\n<li><strong>Hata Oranlar\u0131:<\/strong> Ara\u00e7 \u00e7a\u011fr\u0131lar\u0131ndaki ba\u015far\u0131s\u0131zl\u0131klar\u0131, LLM'den gelen hatalar\u0131 veya di\u011fer beklenmedik durumlar\u0131 izleyin.<\/li>\n<li><strong>LangSmith:<\/strong> LangChain ekosisteminin bir par\u00e7as\u0131 olan <a href=\"https:\/\/www.langchain.com\/langsmith\">LangSmith<\/a>, ajanlar\u0131n\u0131z\u0131 izlemek, hata ay\u0131klamak ve de\u011ferlendirmek i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir platformdur. Ajan\u0131n\u0131z\u0131n her ad\u0131m\u0131n\u0131 g\u00f6rselle\u015ftirebilir, prompt'lar\u0131 ve \u00e7\u0131kt\u0131lar\u0131 inceleyebilirsiniz.<\/li>\n<li><strong>Prometheus\/Grafana:<\/strong> Ajan\u0131n\u0131z\u0131n genel performans metriklerini (gecikme, i\u015flem h\u0131z\u0131) izlemek i\u00e7in standart sistem izleme ara\u00e7lar\u0131yla entegrasyon sa\u011flay\u0131n.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Bu geli\u015fmi\u015f teknikler, Next.js ve LangGraph.js ile in\u015fa etti\u011finiz AI ajanlar\u0131n\u0131n sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda sa\u011flam, g\u00fcvenilir ve s\u00fcrekli olarak iyile\u015ftirilebilir olmas\u0131n\u0131 sa\u011flar. Yapay zeka ajanlar\u0131 d\u00fcnyas\u0131 s\u00fcrekli evrim ge\u00e7irdi\u011finden, bu ara\u00e7lar\u0131 ve metodolojileri benimsemek, gelecekteki zorluklara kar\u015f\u0131 sizi haz\u0131rlayacakt\u0131r.<\/p>\n<h2>Sonu\u00e7: AI Ajanlar\u0131n\u0131n Gelece\u011fi ve Yapabilecekleriniz<\/h2>\n<p>Bu makale boyunca, Next.js'in modern web geli\u015ftirme yeteneklerini ve LangGraph.js'in ak\u0131ll\u0131 ajan modelleme g\u00fcc\u00fcn\u00fc birle\u015ftirerek \u00fcretim-haz\u0131r yapay zeka ajanlar\u0131 olu\u015fturman\u0131n inceliklerini ke\u015ffettik. Geleneksel LLM'lerin tek seferlik yan\u0131tlar\u0131n\u0131n \u00f6tesine ge\u00e7erek, karar verme, ara\u00e7 kullanma ve durum y\u00f6netimi gibi yeteneklere sahip otonom sistemlerin nas\u0131l in\u015fa edilebilece\u011fini ad\u0131m ad\u0131m g\u00f6rd\u00fck. Proje kurulumundan basit bir hava durumu ajan\u0131na, oradan da e-ticaret m\u00fc\u015fteri hizmetleri ajan\u0131 gibi ger\u00e7ek d\u00fcnya senaryolar\u0131na uzanan bu yolculukta, performans optimizasyonu, \u00f6l\u00e7eklenebilirlik, g\u00fcvenlik ve ileri d\u00fczey tekniklerin \u00f6nemini vurgulad\u0131k.<\/p>\n<p>Yapay zeka ajanlar\u0131, sadece bir trend olman\u0131n \u00f6tesinde, yaz\u0131l\u0131m geli\u015ftirmenin gelece\u011finde merkezi bir rol oynamaya adayd\u0131r. \u0130\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmekten ki\u015fiselle\u015ftirilmi\u015f kullan\u0131c\u0131 deneyimleri sunmaya kadar geni\u015f bir uygulama yelpazesine sahiptirler. Next.js ve LangGraph.js gibi ara\u00e7larla donanm\u0131\u015f olarak, siz de bu heyecan verici alanda yenilik\u00e7i \u00e7\u00f6z\u00fcmler geli\u015ftirebilir, kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in daha ak\u0131ll\u0131, daha etkile\u015fimli ve daha de\u011ferli uygulamalar sunabilirsiniz. Ba\u015far\u0131, sadece do\u011fru ara\u00e7lar\u0131 se\u00e7mekle de\u011fil, ayn\u0131 zamanda bu ara\u00e7lar\u0131n sundu\u011fu esneklikten en iyi \u015fekilde yararlanarak problemleri yarat\u0131c\u0131 bir \u015fekilde \u00e7\u00f6zmekle de m\u00fcmk\u00fcnd\u00fcr. \u015eimdi s\u0131ra sizde; kendi \u00fcretim-haz\u0131r AI ajanlar\u0131n\u0131z\u0131 in\u015fa etmeye ba\u015flay\u0131n ve hayal g\u00fcc\u00fcn\u00fcz\u00fcn s\u0131n\u0131rlar\u0131n\u0131 zorlay\u0131n!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. LangGraph.js yerine ba\u015fka bir k\u00fct\u00fcphane kullanabilir miyim?<\/strong><\/p>\n<p>Evet, LangGraph.js, LangChain ekosisteminin bir par\u00e7as\u0131 olup d\u00f6ng\u00fcsel mant\u0131k ve durum y\u00f6netimi i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015ft\u0131r. Ancak, e\u011fer daha basit, do\u011frusal bir ajan ak\u0131\u015f\u0131na ihtiyac\u0131n\u0131z varsa, do\u011frudan LangChain'in <a href=\"https:\/\/js.langchain.com\/docs\/modules\/agents\/\">Agent Executor<\/a>'lar\u0131n\u0131 veya custom chain'lerini kullanabilirsiniz. Bununla birlikte, karma\u015f\u0131k, \u00e7ok ad\u0131ml\u0131 ve d\u00f6ng\u00fcsel muhakeme gerektiren ajanlar i\u00e7in LangGraph.js \u00e7ok daha uygun ve g\u00fc\u00e7l\u00fc bir se\u00e7enektir.<\/p>\n<p><strong>2. \u00dcretimde ajan\u0131m\u0131n performans\u0131n\u0131 nas\u0131l daha da art\u0131rabilirim?<\/strong><\/p>\n<p>Performans\u0131 art\u0131rmak i\u00e7in birka\u00e7 strateji izleyebilirsiniz: (1) Next.js Edge Fonksiyonlar\u0131n\u0131 kullanarak gecikmeyi minimize edin. (2) Daha h\u0131zl\u0131 ve maliyet etkin LLM'ler (\u00f6rn. GPT-4o-mini, Claude Haiku) kullan\u0131n. (3) Ajan\u0131n\u0131z\u0131n \u00e7\u0131kt\u0131lar\u0131n\u0131 veya s\u0131k kullan\u0131lan ara\u00e7 sonu\u00e7lar\u0131n\u0131 Redis gibi bir \u00f6nbellek (cache) sisteminde tutun. (4) Gereksiz LLM \u00e7a\u011fr\u0131lar\u0131n\u0131 azaltmak i\u00e7in ak\u0131ll\u0131 prompt m\u00fchendisli\u011fi ve durum y\u00f6netimini optimize edin. (5) LangChain'in yerle\u015fik <a href=\"https:\/\/js.langchain.com\/docs\/integrations\/llms\/ollama\">streaming<\/a> \u00f6zelliklerini kullanarak yan\u0131tlar\u0131 par\u00e7al\u0131 olarak aktar\u0131n (chunking), bu da kullan\u0131c\u0131 alg\u0131s\u0131nda daha h\u0131zl\u0131 bir deneyim sunar.<\/p>\n<p><strong>3. Next.js ile ajan\u0131m\u0131 nas\u0131l da\u011f\u0131t\u0131r\u0131m?<\/strong><\/p>\n<p>Next.js uygulaman\u0131z\u0131 da\u011f\u0131tman\u0131n en kolay yolu <a href=\"https:\/\/vercel.com\/\">Vercel<\/a> kullanmakt\u0131r. Vercel, Next.js'in yarat\u0131c\u0131lar\u0131 taraf\u0131ndan geli\u015ftirilmi\u015ftir ve sunucusuz fonksiyonlar (API rotalar\u0131 ve Edge fonksiyonlar\u0131 dahil) i\u00e7in m\u00fckemmel entegrasyon ve optimizasyon sunar. Git deponuzu Vercel'e ba\u011flaman\u0131z yeterlidir, gerisini Vercel halleder. Alternatif olarak, AWS Amplify, Netlify veya kendi sunucular\u0131n\u0131zda (Node.js runtime ile) da\u011f\u0131t\u0131m yapabilirsiniz, ancak Edge fonksiyonlar\u0131n\u0131n avantajlar\u0131ndan tam olarak yararlanamayabilirsiniz.<\/p>\n<p><strong>4. Ajan\u0131ma \u00f6zel verilerimi (veritaban\u0131, \u015firket i\u00e7i API'ler) nas\u0131l entegre ederim?<\/strong><\/p>\n<p>Ajan\u0131n\u0131za \u00f6zel verileri entegre etmenin yolu, LangGraph.js'in \"ara\u00e7lar\" (tools) konseptini kullanmakt\u0131r. \u015eirket i\u00e7i API'lerinize veya veritaban\u0131n\u0131za eri\u015fen \u00f6zel fonksiyonlar yaz\u0131n ve bunlar\u0131 birer <code>Tool<\/code> olarak tan\u0131mlay\u0131n. Ard\u0131ndan, ajan\u0131n bu ara\u00e7lar\u0131 kullanabilmesi i\u00e7in LLM prompt'unuza ekleyin. G\u00fcvenlik i\u00e7in, bu ara\u00e7lar\u0131n API anahtarlar\u0131n\u0131 veya kimlik bilgilerini sunucu taraf\u0131nda (<code>.env.local<\/code>) tutmaya \u00f6zen g\u00f6sterin ve istemci taraf\u0131nda asla if\u015fa etmeyin. Veritaban\u0131 entegrasyonu i\u00e7in, <a href=\"https:\/\/www.prisma.io\/\">Prisma<\/a> veya <a href=\"https:\/\/drizzle.team\/\">Drizzle ORM<\/a> gibi ORM'ler kullanmak, veri eri\u015fimini daha y\u00f6netilebilir hale getirebilir.<\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1342],"tags":[],"class_list":{"0":"post-30849","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ai","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi<\/title>\n<meta name=\"description\" content=\"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir yapay zeka ajan\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 anlay\u0131p, arka planda farkl\u0131 sistemlerle etkile\u015fime girerek dinamik \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini hayal etseniz? Next.js ve LangGraph.js&#039;in birle\u015fimiyle, \u00fcretim-haz\u0131r, \u00f6l\u00e7eklenebilir ve ak\u0131ll\u0131 AI ajanlar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu rehberde, bu iki g\u00fc\u00e7l\u00fc teknolojiyi kullanarak s\u0131f\u0131rdan nas\u0131l otonom ajanlar in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir yapay zeka ajan\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 anlay\u0131p, arka planda farkl\u0131 sistemlerle etkile\u015fime girerek dinamik \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini hayal etseniz? Next.js ve LangGraph.js&#039;in birle\u015fimiyle, \u00fcretim-haz\u0131r, \u00f6l\u00e7eklenebilir ve ak\u0131ll\u0131 AI ajanlar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu rehberde, bu iki g\u00fc\u00e7l\u00fc teknolojiyi kullanarak s\u0131f\u0131rdan nas\u0131l otonom ajanlar in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-02T17:32:44+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"36 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi\",\"datePublished\":\"2025-10-02T17:32:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/\"},\"wordCount\":5582,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"AI\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/\",\"name\":\"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-02T17:32:44+00:00\",\"description\":\"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir yapay zeka ajan\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 anlay\u0131p, arka planda farkl\u0131 sistemlerle etkile\u015fime girerek dinamik \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini hayal etseniz? Next.js ve LangGraph.js'in birle\u015fimiyle, \u00fcretim-haz\u0131r, \u00f6l\u00e7eklenebilir ve ak\u0131ll\u0131 AI ajanlar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu rehberde, bu iki g\u00fc\u00e7l\u00fc teknolojiyi kullanarak s\u0131f\u0131rdan nas\u0131l otonom ajanlar in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi","description":"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir yapay zeka ajan\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 anlay\u0131p, arka planda farkl\u0131 sistemlerle etkile\u015fime girerek dinamik \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini hayal etseniz? Next.js ve LangGraph.js'in birle\u015fimiyle, \u00fcretim-haz\u0131r, \u00f6l\u00e7eklenebilir ve ak\u0131ll\u0131 AI ajanlar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu rehberde, bu iki g\u00fc\u00e7l\u00fc teknolojiyi kullanarak s\u0131f\u0131rdan nas\u0131l otonom ajanlar in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi","og_description":"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir yapay zeka ajan\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 anlay\u0131p, arka planda farkl\u0131 sistemlerle etkile\u015fime girerek dinamik \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini hayal etseniz? Next.js ve LangGraph.js'in birle\u015fimiyle, \u00fcretim-haz\u0131r, \u00f6l\u00e7eklenebilir ve ak\u0131ll\u0131 AI ajanlar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu rehberde, bu iki g\u00fc\u00e7l\u00fc teknolojiyi kullanarak s\u0131f\u0131rdan nas\u0131l otonom ajanlar in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-02T17:32:44+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"36 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi","datePublished":"2025-10-02T17:32:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/"},"wordCount":5582,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["AI"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/","name":"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-02T17:32:44+00:00","description":"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u015f s\u00fcre\u00e7lerini otomatikle\u015ftirmek i\u00e7in s\u00fcrekli yenilik\u00e7i \u00e7\u00f6z\u00fcmler ar\u0131yor. Peki ya bir yapay zeka ajan\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 anlay\u0131p, arka planda farkl\u0131 sistemlerle etkile\u015fime girerek dinamik \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini hayal etseniz? Next.js ve LangGraph.js'in birle\u015fimiyle, \u00fcretim-haz\u0131r, \u00f6l\u00e7eklenebilir ve ak\u0131ll\u0131 AI ajanlar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu rehberde, bu iki g\u00fc\u00e7l\u00fc teknolojiyi kullanarak s\u0131f\u0131rdan nas\u0131l otonom ajanlar in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/uretim-hazir-ai-ajanlari-next-js-ve-langgraph-js-ile-gelistirme-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00dcretim-Haz\u0131r AI Ajanlar\u0131: Next.js ve LangGraph.js ile Geli\u015ftirme Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30849"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30849\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}