CopilotKit: Tüm Yığın AI Ajanı, Üretken UI ve Sohbet Uygulamaları İçin Üst Düzey SDK

Arka Plan Özeti

CopilotKit, AI Copilot ve Ajan-native uygulamalar oluşturmak için özel olarak tasarlanmış açık kaynaklı bir çerçevedir. GitHub'da 28.9k'dan fazla yıldız almış ve 100.000'den fazla geliştirici tarafından benimsenmiştir. Bu çerçevenin temel değeri, AI ajanını kullanıcı arayüzü ile derinlemesine entegre ederek, ajanın UI'yi gerçek zamanlı olarak kontrol etmesini, bağlam bilgilerini iletmesini ve üretken UI ile dinamik olarak arayüz bileşenlerini oluşturmasını sağlamaktadır.

Temel Bulgu

1. Mimari Tasarım ve Temel Fonksiyonlar

CopilotKit, ön uç bileşen katmanı, CopilotRuntime çalışma zamanı katmanı ve ajan bağlantı katmanını içeren üç katmanlı bir mimari tasarım kullanmaktadır.

Ön uç bileşen katmanı, tamamen başsız (Headless) UI'den önceden oluşturulmuş özelleştirilebilir bileşenlerin tam spektrumuna kadar bir dizi seçenek sunar; geliştiriciler ihtiyaçlarına göre esnek bir şekilde seçim yapabilirler. CopilotRuntime, arka uç orkestrasyon motoru olarak, ön uç istemcilerden gelen istekleri işlemek, LLM çağrılarını yönetmek ve ajan etkileşimlerini sağlamakla sorumludur. Ajan bağlantı katmanı ise AG-UI protokolü aracılığıyla herhangi bir ajan çerçevesini bağlar; bu çerçeveler arasında LangGraph, CrewAI, LlamaIndex gibi örnekler bulunmaktadır.

CopilotKit'in temel özellikleri arasında, ajanın çalışma zamanında dinamik olarak UI bileşenlerini oluşturmasına olanak tanıyan üretken UI (Generative UI); ön uç ile ajan arasında çift yönlü durum senkronizasyonu sağlayan paylaşılan durum (Shared State); ve ajanın yürütme sürecinde insan girişi veya onayı talep etmesine olanak tanıyan İnsan-döngüde (Human-in-the-Loop) desteği bulunmaktadır. Bu özellikler, gerçek etkileşimli AI uygulamaları oluşturmayı mümkün kılmakta, yalnızca basit bir soru-cevap sisteminden daha fazlasını sunmaktadır.

Çalışma Akışı Şeması:

2. AG-UI Protokolü: Ekosistemin Temeli

AG-UI (Ajan-Kullanıcı Etkileşim Protokolü), CopilotKit ekibi tarafından sunulan açık, hafif, olay odaklı bir protokol standardıdır ve AI ajanları ile kullanıcı odaklı uygulamalar arasındaki iletişim yöntemlerini standartlaştırmayı amaçlamaktadır. Bu protokol, Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI gibi önde gelen firmalar ve çerçeveler tarafından geniş çapta benimsenmiş ve giderek büyüyen bir ekosistem oluşturmuştur.

AG-UI protokolü, geleneksel ön uç ve arka uç iletişim modelinin (istek-yanıt) ajan uygulamalarının karmaşık ihtiyaçlarını karşılayamadığı kritik bir sorunu çözmektedir. Ajanlar, durum güncellemelerini gerçek zamanlı olarak akıtarak, işleme kesintileri ve onay süreçlerini yöneterek, UI ile ajan durumunu senkronize ederek daha esnek bir iletişim mekanizmasına ihtiyaç duymaktadır. AG-UI, olay akışı (Event Streaming) aracılığıyla bu işlevleri gerçekleştirmiştir; gerçek zamanlı metin akışı, araç çağrıları, durum senkronizasyonu ve özel olayları desteklemektedir.

Mevcut ajan protokolü alanında üç ana sütunun bir arada bulunduğu bir yapı gözlemlenmektedir: AG-UI, ajan ile kullanıcı etkileşim katmanına odaklanırken, MCP (Model Bağlam Protokolü) ajan ile araçlar ve veriler arasındaki bağlantıyı sağlamaktadır; A2A (Ajan-ajan) ise ajanlar arasındaki koordineli iletişimi yönetmektedir. Dikkate değer bir nokta, AG-UI'nin A2A protokolü ile el sıkışma entegrasyonu gerçekleştirmiş olması ve üretken UI render'ı için Google'ın A2UI standardını tam olarak desteklemesidir.

3. Ana Akım Çerçevelerle Entegrasyon

CopilotKit ile LangGraph'ın entegrasyonu en olgun kullanım senaryolarından biridir. Basit bir yapılandırma ile geliştiriciler, LangGraph aracını CopilotKit ön yüzüne bağlayarak durum paylaşımı ve gerçek zamanlı akış yanıtları gerçekleştirebilir. Entegrasyon süreci genellikle useCoAgent hook'unu kullanarak aracı bağlamayı, copilotkitemitstate fonksiyonu ile aracı taraftan durum güncellemeleri göndermeyi ve useCopilotAction kullanarak insan-makine işbirliği kesme noktalarını tanımlamayı içerir.

CrewAI geliştiricileri için CopilotKit, kutudan çıkar çıkmaz kullanılabilir entegrasyon çözümleri sunmaktadır. AG-UI protokolü aracılığıyla geliştiriciler, herhangi bir CrewAI aracını gerçek zamanlı etkileşim destekleyen bir ön yüz uygulaması olarak açığa çıkarabilir. LangGraph ve CrewAI dışında, AG-UI protokolü ayrıca Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex gibi birçok çerçeveyi destekleyerek gerçek bir çoklu çerçeve etkileşimi oluşturur.

4. Benzer Çerçevelerle Karşılaştırma Analizi

Vercel AI SDK ile karşılaştırıldığında, CopilotKit'in konumlandırması belirgin farklılıklar göstermektedir. Vercel AI SDK, sohbet arayüzlerinin akış metin aktarımını basitleştirmeye odaklanırken, mükemmel useChat hook ve UI bileşenleri sunmaktadır; CopilotKit ise derin aracı entegrasyonu, üretken UI ve insan-makine işbirliği yeteneklerine daha fazla vurgu yapmaktadır.

LangChain ile ilişkisi ise daha çok tamamlayıcıdır, rekabetten ziyade. LangChain, aracın "beyni" (mantık ve iş akışı) üzerinde yoğunlaşırken, CopilotKit bu beynin "yüzü, sesi ve elleri" - yani uygulama ile etkileşimde bulunan arayüzü sağlar. Geliştiriciler genellikle LangChain/LangGraph kullanarak aracı mantığını tanımlar ve ardından kullanıcı etkileşim katmanını oluşturmak için CopilotKit kullanır.

5. Tipik Uygulama Senaryoları

CopilotKit'in tipik kullanım senaryoları birçok alanı kapsamaktadır. SaaS Copilot, en yaygın uygulama senaryosudur; akıllı asistan, kullanıcıları karmaşık iş akışlarını tamamlamaları için yönlendirebilir ve bağlama duyarlı yardım sunabilir. Ortak Yaratım Copilot ise insan-makine işbirliğine vurgu yaparak, AI ve kullanıcıların birlikte içerik oluşturmasını sağlar ve verimliliği önemli ölçüde artırır. Diyalog Tabanlı Form Doldurma, karmaşık formları doğal diyalog etkileşimine dönüştürerek, kullanıcıların sohbet yoluyla karmaşık veri girişi yapmalarını sağlar. Araştırma Aracı Uygulamaları, resmi gösterimlerdeki araştırma kanvası uygulaması gibi, LangGraph aracını ön yüzle derin entegrasyonunu göstererek, araştırma taslağı oluşturma, bölüm yazma ve insan onayı süreçlerini tamamlar.

Hızlı Başlangıç: Kod Örneği

Temel Entegrasyon Örneği

Aşağıda CopilotKit ile LangGraph entegrasyonu için en küçük çalıştırılabilir örnek verilmiştir:

Ön yüz (Next.js/React):

// app/page.tsx "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css";

export default function Home() { return (

Araştırma Asistanı

); }Çalışma Zamanı API Yolu:

// app/api/copilotkit/route.ts import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime"; import { NextRequest } from "next/server";const copilotKit = new CopilotRuntime({ remoteEndpoints: [ { url: process.env.LANGGRAPHURL || "http://localhost:8000" }, ], });

const serviceAdapter = new OpenAIAdapter();

export const POST = async (req: NextRequest) => { const { handleRequest } = copilotKit; return handleRequest(req, { serviceAdapter }); };

Paylaşılan Durum Örneği

// useCoAgent kullanarak ön ve arka uç durum senkronizasyonu sağlama import { useCoAgent } from "@copilotkit/react-core";

function ResearchCanvas() { const { state, setState } = useCoAgent({ name: "researchagent", initialState: { topic: "", outline: [], currentSection: null, }, });

return (

setState({ ...state, topic: e.target.value })} placeholder="Araştırma konusunu girin" />

); }

İnsan-Makine İşbirliği (Human-in-the-Loop) Örneği

import { useCopilotAction } from "@copilotkit/react-core";

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Belgeyi yayınlamadan önce kullanıcı onayı gereklidir", parameters: [ { name: "title", type: "string", description: "Belge başlığı" }, { name: "content", type: "string", description: "Belge içeriği" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });

if (confirmed) { await api.publish({ title, content }); return "Belge başarıyla yayınlandı"; } return "Yayınlama iptal edildi"; }, });

return ...; }`

Tipik Uygulama Örnekleri

Örnek 1: SaaS Akıllı Asistan

Senaryo: Bir kurumsal proje yönetim aracı, kullanıcıların hızlı bir şekilde görev oluşturmasına, kaynak atamasına ve raporlar üretmesine yardımcı olan AI asistanı ile entegre edilmiştir.

Uygulama Noktaları:

• CopilotKit'in paylaşılan durum özelliğini kullanarak AI'nın mevcut proje görünümünü gerçek zamanlı olarak anlamasını sağlamak
• Görev kartları, Gantt grafikleri gibi bileşenleri dinamik olarak oluşturmak için üretken UI kullanmak
• Anahtar işlemlerin (örneğin proje silme) kullanıcı onayı gerektirdiğinden emin olmak için insan-makine işbirliği düğümleri oluşturmakKullanıcılar doğal dil aracılığıyla karmaşık işlemleri tamamlayabilir, örneğin "Bana gelecek hafta sonlanacak görevleri ön uç ekibine atayıp ilerleme raporu oluştur".CopilotKit'in stratejik konumu, aracılık uygulama geliştirme için bir altyapı katmanı olmaktır. AG-UI protokolü daha fazla üretici tarafından benimsenirken (Microsoft, Google, AWS vb. desteklemektedir), açık standartlara dayalı bir aracılık uygulama ekosistemi oluşmaktadır. CopilotKit, önceden oluşturulmuş bileşenler, üretken UI modelleri ve derin çerçeve entegrasyonu sunarak, üretim düzeyinde AI Copilot oluşturma eşiğini önemli ölçüde düşürmekte, geliştiricilerin altyapı iletişim detayları yerine iş mantığına odaklanmalarını sağlamaktadır.