CopilotKit：สร้าง AI Agent เต็มสแต็ค, Generative UI และแอปพลิเคชันแชทด้วย SDK ชั้นนำ

ภาพรวมพื้นฐาน

CopilotKit เป็นกรอบงานโอเพนซอร์สที่ออกแบบมาเพื่อสร้าง AI Copilot และแอปพลิเคชันที่เป็น Agent-native โดยมีดาวใน GitHub มากกว่า 28.9k และถูกนำไปใช้โดยนักพัฒนามากกว่า 100,000 คน คุณค่าหลักของกรอบงานนี้คือการรวม AI Agent เข้ากับส่วนติดต่อผู้ใช้ (UI) อย่างลึกซึ้ง ทำให้ Agent สามารถควบคุม UI แบบเรียลไทม์ ส่งข้อมูลบริบท และเรนเดอร์ส่วนประกอบ UI แบบไดนามิกผ่าน Generative UI

การค้นพบหลัก

1. การออกแบบสถาปัตยกรรมและฟังก์ชันหลัก

CopilotKit ใช้การออกแบบสถาปัตยกรรมสามชั้น ประกอบด้วยชั้นส่วนประกอบด้านหน้า, ชั้นการทำงานของ CopilotRuntime และชั้นการเชื่อมต่อ Agent

ชั้นส่วนประกอบด้านหน้าให้สเปกตรัมที่สมบูรณ์ตั้งแต่ UI ที่ไม่มีหัว (Headless) ไปจนถึงส่วนประกอบที่ปรับแต่งได้ล่วงหน้า นักพัฒนาสามารถเลือกได้ตามความต้องการ CopilotRuntime ทำหน้าที่เป็นเอนจินการจัดการด้านหลัง รับผิดชอบในการจัดการคำขอจากไคลเอนต์ด้านหน้า จัดการการเรียก LLM และการโต้ตอบของ Agent ชั้นการเชื่อมต่อ Agent เชื่อมต่อกรอบงาน Agent ใด ๆ ผ่าน AG-UI Protocol รวมถึง LangGraph, CrewAI, LlamaIndex เป็นต้น

คุณสมบัติหลักของ CopilotKit รวมถึง Generative UI ซึ่งอนุญาตให้ Agent เรนเดอร์ส่วนประกอบ UI แบบไดนามิกในระหว่างการทำงาน; Shared State ซึ่งทำให้การซิงค์สถานะแบบสองทางระหว่างด้านหน้าและ Agent เป็นไปได้; และ Human-in-the-Loop ซึ่งสนับสนุนให้ Agent ขอข้อมูลหรือการอนุมัติจากมนุษย์ในระหว่างการดำเนินการ คุณสมบัติเหล่านี้ทำให้การสร้างแอปพลิเคชัน AI ที่มีการโต้ตอบจริงเป็นไปได้ ไม่ใช่เพียงแค่ระบบถาม-ตอบที่ง่าย ๆ

ภาพแสดงการทำงาน:

2. AG-UI Protocol: รากฐานของระบบนิเวศ

AG-UI (Agent-User Interaction Protocol) เป็นมาตรฐานโปรโตคอลที่เปิด, เบา และขับเคลื่อนด้วยเหตุการณ์ที่ทีม CopilotKit เปิดตัว โดยมีเป้าหมายเพื่อทำให้การสื่อสารระหว่าง AI Agent กับผู้ใช้ในแอปพลิเคชันเป็นมาตรฐาน โปรโตคอลนี้ได้รับการนำไปใช้โดยผู้ผลิตและกรอบงานชั้นนำ เช่น Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI เป็นต้น ซึ่งก่อให้เกิดระบบนิเวศที่เติบโตขึ้นเรื่อย ๆ

AG-UI Protocol แก้ปัญหาสำคัญอย่างหนึ่ง: รูปแบบการสื่อสารระหว่างด้านหน้าและด้านหลังแบบดั้งเดิม (คำขอ-การตอบกลับ) ไม่สามารถตอบสนองความต้องการที่ซับซ้อนของแอปพลิเคชัน Agent ได้ Agent ต้องการการส่งข้อมูลสถานะแบบเรียลไทม์ การจัดการการหยุดชะงักและกระบวนการอนุมัติ การซิงค์ UI กับสถานะของ Agent ซึ่งทั้งหมดนี้ต้องการกลไกการสื่อสารที่ยืดหยุ่นมากขึ้น AG-UI ใช้การสตรีมเหตุการณ์ (Event Streaming) เพื่อทำให้ฟังก์ชันเหล่านี้เป็นไปได้ รองรับการสตรีมข้อความแบบเรียลไทม์, การเรียกเครื่องมือ, การซิงค์สถานะ และเหตุการณ์ที่กำหนดเอง

ปัจจุบันพื้นที่โปรโตคอล Agent มีโครงสร้างที่มีเสาหลักสามประการ: AG-UI มุ่งเน้นไปที่ชั้นการโต้ตอบระหว่าง Agent กับผู้ใช้, MCP (Model Context Protocol) รับผิดชอบการเชื่อมต่อระหว่าง Agent กับเครื่องมือและข้อมูล, ขณะที่ A2A (Agent-to-Agent) จัดการการสื่อสารประสานงานระหว่าง Agent ควรสังเกตว่า AG-UI ได้ทำการรวมการจับมือกับโปรโตคอล A2A และสนับสนุนมาตรฐาน A2UI ของ Google สำหรับการเรนเดอร์ Generative UI อย่างเต็มที่

3. การรวมเข้ากับกรอบงานชั้นนำการรวม CopilotKit กับ LangGraph เป็นหนึ่งในกรณีการใช้งานที่พัฒนามาอย่างดี ผ่านการตั้งค่าที่ง่าย นักพัฒนาสามารถเชื่อมต่อพร็อกซี่ LangGraph กับส่วนหน้าของ CopilotKit เพื่อให้มีการแชร์สถานะและตอบสนองแบบเรียลไทม์ กระบวนการรวมมักจะรวมถึงการใช้ useCoAgent hook เพื่อเชื่อมต่อพร็อกซี่ การใช้ฟังก์ชัน copilotkitemitstate เพื่อส่งการอัปเดตสถานะจากด้านพร็อกซี่ และการใช้ useCopilotAction เพื่อกำหนดจุดหยุดการทำงานร่วมกันระหว่างมนุษย์และเครื่องจักร

สำหรับนักพัฒนาของ CrewAI CopilotKit ยังมีโซลูชันการรวมที่ใช้งานได้ทันที ผ่านโปรโตคอล AG-UI นักพัฒนาสามารถเปิดเผยพร็อกซี่ CrewAI ใด ๆ เป็นแอปพลิเคชันส่วนหน้าที่รองรับการโต้ตอบแบบเรียลไทม์ นอกจาก LangGraph และ CrewAI แล้ว โปรโตคอล AG-UI ยังรองรับ Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex และกรอบงานอื่น ๆ อีกมากมาย สร้างความสามารถในการทำงานร่วมกันระหว่างกรอบงานที่แท้จริง

4. การวิเคราะห์เปรียบเทียบกับกรอบงานที่คล้ายกัน

เมื่อเปรียบเทียบกับ Vercel AI SDK การวางตำแหน่งของ CopilotKit มีความแตกต่างอย่างมีนัยสำคัญ Vercel AI SDK มุ่งเน้นไปที่การทำให้การส่งข้อความแบบสตรีมในหน้าต่างแชทง่ายขึ้น โดยมี useChat hook และส่วนประกอบ UI ที่ยอดเยี่ยม ในขณะที่ CopilotKit เน้นการรวมพร็อกซี่เชิงลึก UI ที่สร้างขึ้น และความสามารถในการทำงานร่วมกันระหว่างมนุษย์และเครื่องจักร

ความสัมพันธ์กับ LangChain นั้นมีลักษณะเป็นการเสริมซึ่งกันและกันมากกว่าการแข่งขัน LangChain มุ่งเน้นไปที่การสร้าง "สมอง" ของพร็อกซี่ (ตรรกะและเวิร์กโฟลว์) ในขณะที่ CopilotKit ให้ "ใบหน้า เสียง และมือ" ของสมองนั้น นั่นคือส่วนติดต่อที่โต้ตอบกับแอปพลิเคชัน นักพัฒนามักจะใช้ LangChain/LangGraph เพื่อกำหนดตรรกะของพร็อกซี่ จากนั้นใช้ CopilotKit เพื่อสร้างชั้นการโต้ตอบของผู้ใช้

5. กรณีการใช้งานที่เป็นแบบอย่าง

กรณีการใช้งานที่เป็นแบบอย่างของ CopilotKit ครอบคลุมหลายด้าน SaaS Copilot เป็นกรณีการใช้งานที่พบบ่อยที่สุด ผู้ช่วยอัจฉริยะสามารถแนะนำผู้ใช้ในการทำงานที่ซับซ้อน โดยให้ความช่วยเหลือที่มีการรับรู้บริบท Co-creation Copilot เน้นการทำงานร่วมกันระหว่างมนุษย์และเครื่องจักร AI และผู้ใช้ร่วมกันสร้างเนื้อหา เพิ่มประสิทธิภาพการผลิตอย่างมีนัยสำคัญ การกรอกแบบฟอร์มแบบสนทนา เปลี่ยนแบบฟอร์มที่ยุ่งยากให้เป็นการโต้ตอบแบบสนทนาธรรมชาติ ผู้ใช้สามารถกรอกข้อมูลที่ซับซ้อนได้ผ่านการแชท การใช้งานพร็อกซี่ในการวิจัย เช่น แอปพลิเคชันผ้าใบการวิจัยที่แสดงในทางการ แสดงให้เห็นว่าการรวมพร็อกซี่ LangGraph กับส่วนหน้าลึก ๆ สามารถสร้างกระบวนการทั้งหมดในการสร้างเค้าโครงการวิจัย การเขียนบท และการอนุมัติจากมนุษย์ได้อย่างไร

เริ่มต้นอย่างรวดเร็ว: ตัวอย่างโค้ด

ตัวอย่างการรวมพื้นฐาน

ต่อไปนี้คือตัวอย่างที่สามารถทำงานได้ขั้นต่ำสุดที่ใช้ CopilotKit กับ LangGraph:

ส่วนหน้า (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 (

ผู้ช่วยการวิจัย

); }เส้นทาง API ขณะทำงาน:

// 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 }); };

ตัวอย่างสถานะการแชร์

// ใช้ useCoAgent เพื่อทำให้สถานะของฟรอนต์เอนด์และแบ็กเอนด์ซิงโครไนซ์ 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="กรอกหัวข้อการวิจัย" />

); }

ตัวอย่างการทำงานร่วมกันระหว่างมนุษย์และเครื่อง (Human-in-the-Loop)

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

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "ต้องการการยืนยันจากผู้ใช้ก่อนที่จะเผยแพร่เอกสาร", parameters: [ { name: "title", type: "string", description: "หัวข้อเอกสาร" }, { name: "content", type: "string", description: "เนื้อหาเอกสาร" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });

if (confirmed) { await api.publish({ title, content }); return "เอกสารถูกเผยแพร่เรียบร้อยแล้ว"; } return "การเผยแพร่ถูกยกเลิก"; }, });

return ...; }`

กรณีการใช้งานที่เป็นแบบอย่าง

กรณีที่ 1: ผู้ช่วยอัจฉริยะ SaaS

สถานการณ์: เครื่องมือการจัดการโปรเจ็กต์ระดับองค์กรที่รวมผู้ช่วย AI เพื่อช่วยผู้ใช้ในการสร้างงาน แบ่งสรรทรัพยากร และสร้างรายงานอย่างรวดเร็ว

จุดสำคัญในการดำเนินการ:

• ใช้ฟังก์ชันสถานะการแชร์ของ CopilotKit เพื่อให้ AI เข้าใจมุมมองโปรเจ็กต์ปัจจุบันแบบเรียลไทม์
• สร้างการ์ดงาน แผนภูมิ Gantt และส่วนประกอบอื่น ๆ แบบไดนามิกผ่าน UI ที่สร้างขึ้น
• จุดเชื่อมต่อการทำงานร่วมกันระหว่างมนุษย์และเครื่องเพื่อให้แน่ใจว่าการดำเนินการที่สำคัญ (เช่น การลบโปรเจ็กต์) ต้องการการยืนยันจากผู้ใช้ผู้ใช้สามารถทำการดำเนินการที่ซับซ้อนได้โดยใช้ภาษาธรรมชาติ เช่น "ช่วยฉันแบ่งงานที่หมดอายุในสัปดาห์หน้าสำหรับทีมฟรอนต์เอนด์และสร้างรายงานความก้าวหน้า"。
  
  ### กรณีศึกษา 2: ผู้ช่วยวิจัย AI
  
  สถานการณ์: เครื่องมือช่วยในการวิจัยทางวิชาการ ช่วยนักวิจัยในการรวบรวมข้อมูล จัดระเบียบโครงสร้างเอกสาร และเขียนร่วมกัน。
  
  จุดสำคัญในการดำเนินการ:
  
  - ตัวแทน LangGraph รับผิดชอบการค้นหาข้อมูลและการอนุมานเชิงตรรกะ
  - CopilotKit แสดงโครงร่างการวิจัยและรายการเอกสารในส่วนหน้า
  - การซิงโครไนซ์สถานะเพื่อให้แน่ใจว่าความก้าวหน้าของการวิจัยถูกบันทึกและแสดงผลแบบเรียลไทม์
  - จุดอนุมัติจะแจ้งเตือนผู้ใช้ให้ยืนยันเมื่ออ้างอิงข้อมูลภายนอก
  
  ### กรณีศึกษา 3: การกรอกแบบฟอร์มอัจฉริยะ
  
  สถานการณ์: เปลี่ยนแบบฟอร์มการสมัครประกันภัยที่ซับซ้อนให้เป็นการโต้ตอบแบบสนทนา。
  
  จุดสำคัญในการดำเนินการ:
  
  - ตัวแทนจะตัดสินใจคำถามถัดไปตามคำตอบของผู้ใช้
  - ใช้การเรนเดอร์ตามเงื่อนไขเพื่อแสดง UI คอมโพเนนต์ที่แตกต่างกันตามบริบท
  - บันทึกแบบฟอร์มที่กรอกไม่เสร็จโดยอัตโนมัติ รองรับการกรอกต่อจากจุดที่หยุด
  - สรุปข้อมูลทั้งหมดเพื่อให้ผู้ใช้ยืนยันก่อนส่ง
  
  ## ข้อคิดทางเทคนิค
  
  การดำเนินการทางเทคนิคของ CopilotKit อิงจาก Web Stack สมัยใหม่ ส่วนหน้าจะใช้ React (ยังรองรับ Angular) เป็นเฟรมเวิร์ก UI หลัก โดยมี hook เช่น useAgent และ useCoAgent สำหรับการจัดการสถานะและการโต้ตอบของตัวแทน ส่วนหลังทำงานด้วยคลาส CopilotRuntime เป็นตัวประสานกลาง จัดการการตรวจสอบคำขอ การเรียก LLM และการส่งข้อมูลแบบสตรีม การสื่อสารใช้ Server-Sent Events (SSE) เพื่อให้บริการส่งข้อมูลแบบเรียลไทม์จากเซิร์ฟเวอร์ไปยังไคลเอนต์ ในขณะที่จัดการคำขอของไคลเอนต์ผ่าน HTTP POST
  
  เวอร์ชัน v1.50 ได้นำการอัปเกรดสถาปัตยกรรมที่สำคัญมาใช้ โดยนำเสนอสถาปัตยกรรมจุดสิ้นสุดเดียวที่ชัดเจนยิ่งขึ้น การสังเกตการณ์ที่ดีขึ้น (การตรวจสอบในตัว) และการรวมเข้ากับ CopilotKit Next อย่างลึกซึ้ง ซึ่งช่วยให้ประสบการณ์การพัฒนาง่ายขึ้นอีก
  
  ## วิสัยทัศน์ในอนาคตตำแหน่งเชิงกลยุทธ์ของ CopilotKit คือการเป็นชั้นพื้นฐานสำหรับการพัฒนาแอปพลิเคชันตัวแทน เมื่อโปรโตคอล AG-UI ได้รับการนำไปใช้โดยผู้ผลิตมากขึ้น (Microsoft, Google, AWS ฯลฯ ได้รับการสนับสนุนแล้ว) ระบบนิเวศของแอปพลิเคชันตัวแทนที่อิงตามมาตรฐานเปิดกำลังเกิดขึ้น CopilotKit ช่วยลดอุปสรรคในการสร้าง AI Copilot ระดับการผลิตอย่างมีนัยสำคัญ โดยการให้ส่วนประกอบที่สร้างไว้ล่วงหน้า รูปแบบ UI ที่สร้างขึ้น และการรวมกรอบงานอย่างลึกซึ้ง ทำให้นักพัฒนาสามารถมุ่งเน้นไปที่ตรรกะทางธุรกิจแทนที่จะเป็นรายละเอียดการสื่อสารพื้นฐาน