CopilotKit

Docs ·
Examples ·
Intelligence ·
OpenBot ·
Discord

CopilotKit은 AI 에이전트를 실제 사용자 앞에 배치하기 위한 오픈소스 스택입니다. 이미 구축한 에이전트를 어떤 프레임워크에서든 가져와 React, Angular, Vue, React Native, Slack, Microsoft Teams에서 채팅, 생성형 UI, 공유 상태, human-in-the-loop을 제공하세요.

프로덕션으로 전환할 때 CopilotKit Intelligence를 추가하면 에이전트가 계속 개선됩니다. 사용자가 떠난 지점에서 이어지는 대화, 세션 간 메모리, 그리고 실제 사용을 검토하고 게시하는 Skills로 전환하는 Continual Learning을 제공합니다.

우리는 또한 Google, Microsoft, AWS, LangChain, Mastra, PydanticAI 등이 채택한 개방형 Agent–User Interaction 프로토콜인 AG-UI를 만든 팀이기도 합니다.

새로운 소식

새로운 소식
무엇인가

🪁 CopilotKit Soar
귀사가 소유하고 자체 서버에서 실행되는 AI 동료. OpenBot 기반. 현재 얼리 액세스 →

🔁 Continual Learning
에이전트가 AG-UI를 통해 캡처된 풀스택 트레이젝토리(에이전트가 한 일과 사용자가 한 일)로부터 학습합니다.

🤖 OpenBot
각자 자신만의 컴퓨터를 갖는 오픈소스 AI 동료. MIT 라이선스.

🧩 AG-UI 1.0 + A2UI 1.0
CopilotKit은 이제 선언적 생성형 UI를 위한 AG-UI 1.0 및 A2UI 1.0 스펙을 지원합니다.

💬 Channels
Channels JSX를 한 번 작성하세요. Slack에서는 네이티브 Block Kit으로, Microsoft Teams에서는 Adaptive Cards로 렌더링됩니다.

전체 변경 로그는 What's New에서 확인하세요.

빠른 시작
코딩 에이전트에게 맡기세요. 이 프롬프트를 Claude Code, Cursor, Codex 또는 프로젝트에서 실행 중인 모든 코딩 에이전트에 붙여넣으세요. 앱을 검사하고 통합 과정을 안내합니다.

CopilotKit 시작을 도와주세요. 프로젝트 루트에서 다음
명령을 실행하고 안내를 따르세요:

npx --yes copilotkit@latest onboard start

새 프로젝트 시작. 자체 디렉터리에 새 앱을 스캐폴딩합니다. 이미 있는 앱은 건드리지 않습니다.

npx copilotkit@latest create
코딩 에이전트에 CopilotKit 스킬을 부여하세요. 설정 후 기능 구축과 디버깅을 돕습니다(자세히 알아보기).

npx copilotkit@latest skills install

직접 연결하는 것을 선호하시나요? 다음은 세 개의 파일로 구성된 Next.js 앱입니다.

npm install @copilotkit/react-core @copilotkit/runtime
# .env.local
OPENAI_API_KEY=your_openai_api_key
// app/api/copilotkit/[[...slug]]/route.ts
import {
CopilotRuntime ,
createCopilotRuntimeHandler ,
BuiltInAgent ,
} from "@copilotkit/runtime/v2" ;

const runtime = new CopilotRuntime ( {
agents : { default : new BuiltInAgent ( { model : "openai:gpt-5.4-mini" } ) } ,
} ) ;

const handler = createCopilotRuntimeHandler ( {
runtime ,
basePath : "/api/copilotkit" ,
} ) ;
export { handler as GET , handler as POST , handler as PATCH , handler as DELETE } ;
// app/page.tsx
"use client" ;
import { CopilotKitProvider , CopilotSidebar } from "@copilotkit/react-core/v2" ;
import "@copilotkit/react-core/v2/styles.css" ;

export default function Page ( ) {
return (
< CopilotKitProvider runtimeUrl = "/api/copilotkit" >
< main >
< h1 > Your App </ h1 >
< CopilotSidebar />
</ main >
</ CopilotKitProvider >
) ;
}
이미 LangGraph, CrewAI, Mastra 또는 다른 프레임워크를 실행 중이신가요? 해당 프레임워크의 빠른 시작을 사용하여 Built-in Agent를 여러분의 것으로 교체하세요.

getting-started-with-one-command.mp4

작동 방식

에이전트가 추론과 실행을 담당합니다. CopilotKit은 그 작업을 제품 경험으로 전환합니다. 이벤트는 AG-UI를 통해 스트리밍되므로 에이전트는 작업이 진행되는 동안 자신의 작업을 보여주고, 사용자가 보고 있는 것을 읽고, UI를 렌더링하는 도구를 호출하고, 다음 단계를 승인받기 위해 사람을 기다릴 수 있습니다. 에이전트 로직은 모든 표면에서 동일하게 유지됩니다.

무엇을 만들 수 있나요

Whole.Generative.UI.v5.mp4

기능
하는 일

채팅 컴포넌트
작동하는 채팅으로 시작하고, 필요한 부분을 슬롯으로 교체하거나, 완전한 Headless UI로 전환하세요.

생성형 UI
에이전트가 자체 컴포넌트부터 A2UI 스펙, 샌드박스된 MCP Apps에 이르기까지 실제 UI를 렌더링합니다.

공유 상태
에이전트와 UI 모두가 실시간으로 읽고 쓰는 단일 상태 레이어.

Human-in-the-loop
에이전트가 행동하기 전에 입력, 확인 또는 편집을 위해 일시 중지합니다.

프론트엔드 도구
에이전트가 앱 내에서 작업을 수행하고, 여러분의 코드가 실제 작업을 처리합니다.

AG-UI Streams
생성형 UI를 그대로 유지하면서 새로고침, 기기, 세션을 넘어 지속되는 대화.

음성 및 WebMCP
에이전트와 대화하고, 앱의 액션을 브라우저 에이전트에 노출하세요.

Inspector
빌드하는 동안 스레드, 에이전트, 학습을 보여주는 localhost 오버레이.

useAgent로 완전한 제어
모든 컴포넌트는 직접 사용할 수 있는 훅 위에 구축됩니다. useAgent는 AG-UI 바로 위에 위치하며 에이전트 연결에 대한 프로그래밍 방식의 제어를 제공합니다.

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

function CityPicker ( ) {
const { agent } = useAgent ( { agentId : "my_agent" } ) ;

return (
< div >
< h1 > { agent . state . city } </ h1 >
< button onClick = { ( ) => agent . setState ( { city : "NYC" } ) } > Set city </ button >
</ div >
) ;
}
프로그래밍 방식 제어 문서에서 더 알아보기.

생성형 UI, 세 가지 방법

demo-generative-ui.mp4

유형
에이전트가…
기반

Controlled
등록한 컴포넌트 중에서 선택
AG-UI 도구 호출 및 상태

Declarative
앱이 렌더링하는 구조화된 스펙으로 UI를 설명
A2UI

Open-ended
샌드박스에서 실행되는 완전한 인터페이스를 제공
MCP Apps

더 깊이 파고들고 싶으신가요? Generative UI 교육용 저장소에서 세 가지 모두를 살펴보세요.

여러분의 스택과 함께 작동
하나의 에이전트 백엔드. 모든 프론트엔드.

표면
상태
시작하기

⚛️ React / Next.js
✅ GA
빠른 시작

🅰️ Angular
✅ 지원됨
빠른 시작

💚 Vue
✅ 지원됨
빠른 시작

📱 React Native
✅ 지원됨
빠른 시작

💬 Slack / Microsoft Teams
✅ 클라우드 호스팅 Intelligence에서 GA
Slack · Teams

💬 Discord / WhatsApp
✅ Channels SDK 어댑터
Channels

🔜 Google Chat / iMessage / SMS
🟡 로드맵에 있음
Channels

🪁 CopilotKit Soar, OpenBot 기반
✨ 얼리 액세스
얼리 액세스 받기

에이전트 프레임워크. LangGraph · Deep Agents · CrewAI · Mastra · Google ADK · PydanticAI · Microsoft Agent Framework · AWS Strands · Claude Agent SDK · LlamaIndex · Agno · AG2 · A2A · 또는 CopilotKit의 Built-in Agent.

CopilotKit Intelligence

대부분의 에이전트는 출시 품질에서 정체됩니다. CopilotKit Intelligence는 여러분의 에이전트가 계속 개선되도록 하는 프로덕션 레이어입니다. 이미 실행 중인 CopilotKit 앱 및 에이전트 프레임워크와 함께 작동하며, 클라우드 호스팅 또는 자체 인프라에서 셀프 호스팅할 수 있습니다.

Continual Learning: 앱의 실제 사용이 근거 기반 인사이트가 되고, 이어서 검토하고 게시하는 Skills가 됩니다. 모든 학습된 동작은 출처로 추적됩니다.
AG-UI Streams: 메시지, 생성형 UI, 라이브 실행이 원래대로 복원되어 대화가 사용자가 떠난 지점에서 이어집니다.
User Memories: 대화 전반에 걸쳐 유지되는 지속적인 사실과 선호도로, 의미론적으로 회상됩니다.
Product Analytics: 사용자가 무엇을 요청하는지, 에이전트가 무엇을 하는지, 사람들이 어디서 가치를 얻는지 확인하세요.
Channels: 이미 구축한 에이전트를 위한 Slack 및 Microsoft Teams 인프라.
Self-hosted: Kubernetes 클러스터, VPC 또는 에어갭 환경 내부의 동일한 플랫폼.

Developer 플랜은 무료입니다. 👉 5분 만에 Intelligence 연결하기 → · 오픈소스와 Intelligence 비교

CopilotKit 기반으로 구축된 AI 동료

우리는 이 스택으로 실제 제품을 만들고 오픈소스로 공개합니다.

OpenBot은 직원을 위한 오픈소스 에이전트 워크스페이스입니다. 모든 AI 동료는 브라우저, 파일, 도구를 갖춘 자신만의 컴퓨터를 가지며, 모든 행동은 실행 전에 결정되고 실행 후에 기록됩니다. 모든 AG-UI 에이전트와 모든 모델을 가져오세요.

CopilotKit Soar는 이 핵심을 비즈니스에 바로 쓸 수 있는 제품으로 전환합니다. 각 직원에게 회사 도구에서 작업하고, 함께 일하는 사람들로부터 새로운 작업을 배우며, 자체 서버에서 실행되는 AI 동료를 제공합니다. 우리 엔지니어가 함께 설정한 후 키를 넘겨드립니다.

Soar는 현재 얼리 액세스 중입니다. 👉 얼리 액세스 받기 →

OpenBot
각자 자신만의 컴퓨터를 갖는 AI 동료.

OpenDots
텍스트, 통화, Slack을 위한 상시 가동 동료.

OpenMuse
iOS, Android, 웹을 위한 개인 에이전트.

OpenTag
Slack 및 Teams를 위한 온콜 트리아지 봇.

AG-UI: Agent–User Interaction 프로토콜
AG-UI는 에이전트를 사용하는 사람들과 연결하는 개방형 이벤트 기반 프로토콜입니다. MCP는 에이전트를 도구에 연결하고, A2A는 에이전트를 서로 연결하며, AG-UI는 에이전트를 사용자에게 연결합니다. CopilotKit은 이 위에 구축되었으며 LangChain, CrewAI, Mastra, PydanticAI, Google ADK, AWS, Microsoft 등과의 퍼스트파티 통합을 제공합니다.

npx create-ag-ui-app my-agent-app
👉 GitHub에서 AG-UI 살펴보기 →

커뮤니티
Discord · Docs · X · LinkedIn · Blog

기여하기
CopilotKit에 기여해 주셔서 감사합니다! 💜 코드, 문서, 데모 앱, 또는 소문내기 등 모든 기여를 소중히 여깁니다.

코드: CONTRIBUTING.md부터 시작하세요.
문서: 문서 기여 가이드를 참고하세요.
어디서 시작할지 모르시겠나요? Discord에 참여하시면 도움을 드리겠습니다.

라이선스
이 저장소의 소스 코드는 MIT License에 따라 제공됩니다.