CopilotKit ​

CopilotKit is an open-source React framework for building AI copilots that live inside your web application. What sets it apart is MCP Apps — when a tool call returns data, CopilotKit renders interactive React components (buttons, forms, confirmations) directly in the chat interface. Users don't just read tool results — they interact with them.

CK
CopilotKit
TRANSPORT
Streamable HTTP ✓
PLATFORM
React · Angular · Framework
MCP VIA
MCP Apps (Jan 2026)

MCP Tools That Render Interactive UI ​

In most clients, MCP tool results appear as text. CopilotKit changes that — MCP Apps turn tool responses into React components. A database query tool might render a sortable table. A deployment tool might show a confirmation dialog with a "Deploy" button. A monitoring tool might render a live chart.

This makes CopilotKit the framework for building production-grade AI features where end users need to confirm, select, or review before the agent acts. It's the difference between a chatbot and a copilot.

CoAgents take this further with human-in-the-loop agent workflows. Built on LangGraph, CoAgents share state between the agent and your React app, stream intermediate thinking to the UI, and let users steer agent behavior in real-time.

Key features:

  • MCP Apps — MCP tools render as interactive React components (forms, buttons, tables)
  • CoAgents — human-in-the-loop agent infrastructure with LangGraph
  • Shared state — agent and app share state for seamless coordination
  • Intermediate streaming — watch the agent think and reason in real-time
  • CopilotPortal — plug-and-play in-app chat component
  • CopilotTextarea — AI-powered text editing anywhere in your app
  • React hooks — useMakeCopilotReadable, useMakeCopilotActionable
  • Generative UI — AI dynamically generates UI components based on context

Integration ​

1. Create a Token ​

Go to Vinkius Cloud → your server → Connection Tokens → Create. Copy the URL.

2. Add to Your App ​

In your CopilotKit configuration, register the Vinkius MCP server:

typescript
<CopilotKit
  mcpServers={[{
    url: "https://edge.vinkius.com/{TOKEN}/mcp"
  }]}
>
  <CopilotPortal />
</CopilotKit>

3. Build MCP Apps ​

MCP tools from Vinkius Cloud appear in the copilot chat. Use the MCP Apps API to define how each tool result renders as a React component.

FAQ ​

How do MCP Apps display tool results? MCP Apps map tool responses to React components. You define a renderer for each tool — a table, form, chart, or custom component. The copilot renders it inline in the chat.

What are CoAgents? CoAgents are human-in-the-loop agent workflows built on LangGraph. The agent and your React app share state, so users can see intermediate results and guide the agent's decisions.

Does CopilotKit work with Angular? Yes. CopilotKit supports both React and Angular. MCP Apps and CoAgents work in both frameworks.

Is CopilotKit free? Open-source. CopilotKit Cloud offers managed infrastructure for production copilots.