Ben Taylor
53af72b8e9
## Summary - Migrates the LlamaIndex example onto the Intelligence/Threads path from the PR 5151 golden pattern. - Pins the example to CopilotKit `1.59.1`, switches to the v2 chat/runtime wiring, and adds the shared mobile floating Threads drawer experience. - Adds optional Intelligence env wiring with an in-memory fallback when no license token is configured. - Adds a contract test covering the LlamaIndex migration surface so future example migrations can stay red/green. ## Verification - `pnpm exec vitest run scripts/__tests__/integration-intelligence-migration.test.ts` - `pnpm exec oxfmt --check examples/integrations/llamaindex/src/app/page.tsx examples/integrations/llamaindex/src/app/layout.tsx examples/integrations/llamaindex/src/app/api/copilotkit/[[...slug]]/route.ts examples/integrations/llamaindex/src/components/threads-drawer examples/integrations/llamaindex/src/components/ui examples/integrations/llamaindex/src/lib/utils.ts scripts/__tests__/integration-intelligence-migration.test.ts` - `git diff --check` - `npm run build` from `examples/integrations/llamaindex` - Pre-commit `test-and-check-packages` passed on commit. ## Manual smoke - Started local Intelligence stack and LlamaIndex example with licensed env. - Confirmed Threads drawer loads via `/api/copilotkit/threads` and persisted threads render/select correctly. - Verified a backend-tool conversation: “Get the weather in San Francisco.” created/named a persisted thread, rendered the weather card, and hydrated correctly after refresh/reselect. ## Notes - Observed the same non-fatal initial `THREAD_NOT_FOUND` lookup pattern before thread creation that appears in other migrated examples. - The LlamaIndex frontend-tool path (`add_proverb`) exposes an adapter-specific streamed tool-argument issue where two JSON argument payloads arrive concatenated. I did not address that in this migration; the backend-tool path and Threads persistence smoke cleanly.
CopilotKit
Build agent-native applications with generative UI, shared state, and human-in-the-loop workflows.
What is CopilotKit
CopilotKit is a best-in-class SDK for building full-stack agentic applications, Generative UI, and chat applications.
We are the company behind the AG-UI Protocol - adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more!
https://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3
Features:
- Chat UI – A React-based chat interface that supports message streaming, tool calls, and agent responses.
- Backend Tool Rendering – Enables agents to call backend tools that return UI components rendered directly in the client.
- Generative UI – Allows agents to generate and update UI components dynamically at runtime based on user intent and agent state.
- Shared State – A synchronized state layer that both agents and UI components can read from and write to in real time.
- Human-in-the-Loop – Lets agents pause execution to request user input, confirmation, or edits before continuing.
https://github.com/user-attachments/assets/55bf6714-62a7-4d5d-9232-07747cc0763b
Quick Start
New projects:
npx copilotkit@latest create -f <framework>
Existing projects:
npx copilotkit@latest init
https://github.com/user-attachments/assets/7372b27b-8def-40fb-a11d-1f6585f556ad
What this gives you:
- CopilotKit installed – Core packages are fully set up in your app
- Provider configured – Context, state, and hooks ready to use
- Agent <> UI connected – Agents can stream actions and render UI immediately
- Deployment-ready – Your app is ready to deploy
Complete getting started guide →
How it works:
CopilotKit connects your UI, agents, and tools into a single interaction loop.
This enables:
- Agents that ask users for input
- Tools that render UI
- Stateful workflows across steps and sessions
⭐️ useAgent Hook
The useAgent hook is a proper superset of useCoAgent and sits directly on AG-UI, giving more control over the agent connection.
// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });
// Render and update your agent's state
return <div>
<h1>{agent.state.city}</h1>
<button onClick={() => agent.setState({ city: "NYC" })}>
Set City
</button>
</div>
Check out the useAgent docs to learn more.
https://github.com/user-attachments/assets/67928406-8abc-49a1-a851-98018b52174f
Generative UI
Generative UI is a core CopilotKit pattern that allows agents to dynamically render UI as part of their workflow.
https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6
Compare the Three Types
Explore:
Generative UI educational repo →
🖥️ AG-UI: The Agent–User Interaction Protocol
Connect agent workflow to user-facing apps, with deep partnerships and 1st-party integrations across the agentic stack—including LangGraph, CrewAI, and more.
npx create-ag-ui-app my-agent-app
🤝 Community
Have questions or need help?
Join our Discord →Read the Docs →
Try Copilot Cloud →
Stay up to date with our latest releases!
Follow us on LinkedIn →Follow us on X →
🙋🏽♂️ Contributing
Thanks for your interest in contributing to CopilotKit! 💜
We value all contributions, whether it's through code, documentation, creating demo apps, or just spreading the word.
Here are a few useful resources to help you get started:
-
For code contributions, CONTRIBUTING.md.
-
For documentation-related contributions, check out the documentation contributions guide.
-
Want to contribute but not sure how? Join our Discord and we'll help you out!
Install as a Claude Code plugin
The CopilotKit monorepo doubles as a Claude Code plugin — all 9 skills (3 package meta-skills + 6 lifecycle journey skills) are available once installed.
Add the repo as a Claude Code marketplace:
claude plugin marketplace add https://github.com/CopilotKit/CopilotKit
claude plugin install copilotkit
Skills are discovered from skills/<slug>/SKILL.md at the repo root. The three package meta-skills (runtime, react-core, a2ui-renderer) are generated mirrors of the source-of-truth files at packages/<pkg>/skills/<pkg>/ — do not edit the mirror directly. To update content, edit the source under packages/*/skills/ and run:
pnpm sync:plugin-skills
A lefthook pre-commit check (pnpm check:plugin-skills) rejects commits that drift the mirror. The plugin version is pinned to packages/runtime/package.json and is also kept in sync by the same script.
Skill inventory
| Slug | Type | Source |
|---|---|---|
runtime |
core | packages/runtime/skills/runtime/ |
react-core |
framework | packages/react-core/skills/react-core/ |
a2ui-renderer |
framework | packages/a2ui-renderer/skills/a2ui-renderer/ |
0-to-working-chat |
lifecycle | skills/0-to-working-chat/ |
spa-without-runtime |
lifecycle | skills/spa-without-runtime/ |
go-to-production |
lifecycle | skills/go-to-production/ |
scale-to-multi-agent |
lifecycle | skills/scale-to-multi-agent/ |
v1-to-v2-migration |
lifecycle | skills/v1-to-v2-migration/ |
debug-and-troubleshoot |
lifecycle | skills/debug-and-troubleshoot/ |
📄 License
This repository's source code is available under the MIT License.