PixilUI and CopilotKit
A stack for connecting agents to the apps people use: an open-source SDK on the AG-UI protocol, with human-in-the-loop approvals and generative UI, for React, Angular, Vue, iOS and Android, self-hosted or in its cloud.
In short
CopilotKit connects your agent backend to your app: shared state, human-in-the-loop approvals and generative UI across React, Angular, Vue and mobile, over the AG-UI protocol. If you need that wiring, start there. PixilUI is the UI for the moments those hooks expose (the approval card, the run timeline, the tool call row, the thinking state), designed with every state done, and it renders from CopilotKit's hooks as plain props.
Checked against CopilotKit's own docs on .
Side by side
| Question | CopilotKit | PixilUI |
|---|---|---|
| What it is | A connection layer between agents and apps: SDK, runtime and the AG-UI protocol | Designed components for agent moments, as a shadcn registry |
| Frontends | React, Angular, Vue, iOS and Android, plus Slack, Teams and WhatsApp | React 19 |
| Agent frameworks | OpenAI Agents SDK, Claude Agent SDK, LangChain, Google ADK, AWS Strands, Mastra and more | None needed: items take plain props |
| Human approval | HITL approvals rendered with your own component | Approval card with risk, a note on reject and a receipt |
| Install | npm install @copilotkit/react-core @copilotkit/react-ui | npx shadcn@latest add @pixilui/approval-card |
| License and price | MIT packages on npm; self-hosted and cloud offerings | Free items under MIT. Pro $199 once (the first 100 at $99 when Pro opens), Pro yearly $129, Team $599 once for 10 people |
What CopilotKit is good at
- Wiring an agent into an app: shared state, frontend actions and a clear human handoff, per its site.
- Many agent frameworks behind one protocol, AG-UI, rather than a bet on one framework.
- Generative UI: the agent returns a chart or a form rendered with your components.
- Frontends beyond React: Angular, Vue, iOS, Android, and channels like Slack and Teams.
What PixilUI adds
- The approval, run, tool call and thinking moments designed in full, with their waiting, error and finished states and the motion between them.
- Items that drop into any React 19 app with Tailwind v4, with or without CopilotKit.
- Pro pieces for the work around the agent: an agent inbox and an eval table.
- A markdown twin for every page and generated llms files for coding agents.
Install
CopilotKit
npm install @copilotkit/react-core @copilotkit/react-uiPixilUI, after adding the registry to components.json (installation)
npx shadcn@latest add @pixilui/approval-cardpnpm dlx shadcn@latest add @pixilui/approval-cardyarn dlx shadcn@latest add @pixilui/approval-cardbunx --bun shadcn@latest add @pixilui/approval-cardUsing both
CopilotKit decides when a person must answer and what the agent shares; PixilUI draws that moment. Pass the hook's data to an approval card, a run timeline or a tool call row as props, and call the hook's response from the item's callbacks.
Questions
Is PixilUI a CopilotKit alternative?
Not for connecting an agent to your app: PixilUI has no runtime, protocol or state sync. It is an alternative for the UI of the agent moments, and it fits inside a CopilotKit app.
Can I use PixilUI with CopilotKit's human-in-the-loop hooks?
Yes. CopilotKit's human-in-the-loop hooks render a component you choose and pass it a way to respond. Render a PixilUI approval card there and call that response from its approve and reject callbacks.
Does PixilUI need the AG-UI protocol?
No. PixilUI items do not talk to an agent. They show what your app passes them, whatever protocol or SDK delivers it.
More comparisons
Sources
Read on . If something here no longer matches CopilotKit's site, write to hello@pixilui.com and we will fix it.