skills.rest
CopilotKit
CopilotKitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

copilotkit-integrations

Connects external agent frameworks to CopilotKit applications via the AG-UI protocol.

7|3|Updated May 8, 2026
Search Tags:#next.js#langgraph#copilotkit#crewai#agent integration#ag-ui#generative ui
One-click install
npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill copilotkit-integrations-copilotkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-integrations
Source: https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit/tree/main/.cursor/skills/copilotkit-integrations
Command: npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill copilotkit-integrations-copilotkit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Wiring a backend agent framework like LangGraph, CrewAI, or PydanticAI into a CopilotKit frontend requires matching the correct AG-UI adapter, client class, server pattern, and port configuration for each framework, which is error-prone without a reference. ## Core Features & Use Cases - Framework Decision Tree: Routes you to the correct integration guide based on language (Python, TypeScript, .NET) and framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, A2A). - Per-Framework Reference Guides: Detailed integration docs covering agent definition, FastAPI server setup, Next.js route configuration, and shared state management for each supported framework. - Common AG-UI Patterns: Ready-to-use frontend snippets for CopilotKitProvider, useAgent shared state, useFrontendTool, useRenderToolCall generative UI, and useHumanInTheLoop approval flows. - Use Case: You have a CrewAI Flow agent and need it to stream responses and shared state into a Next.js CopilotKit app. The skill directs you to wrap completion calls with copilotkit_stream, mount the flow with add_crewai_flow_fastapi_endpoint, and connect via HttpAgent on port 8000. ## Quick Start Ask the agent to wire your LangGraph Python agent into a CopilotKit Next.js app using the AG-UI protocol.

Frequently Asked Questions about copilotkit-integrations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect a LangGraph agent to CopilotKit?▼

Wrap your compiled graph with LangGraphAGUIAgent and mount it via add_langgraph_fastapi_endpoint on a FastAPI server. In the Next.js route, create a LangGraphHttpAgent pointing at the agent URL (default port 8123) and register it in CopilotRuntime.

Which AG-UI client class should I use for my agent framework?▼

LangGraph self-hosted uses LangGraphHttpAgent, LangGraph Platform uses LangGraphAgent, CrewAI Crews use CrewAIAgent, Mastra uses MastraAgent.getLocalAgents, and LlamaIndex uses LlamaIndexAgent. Most other frameworks including ADK, PydanticAI, Agno, and Strands use the generic HttpAgent from @ag-ui/client.

Does CopilotKit support TypeScript agent frameworks?▼

Yes, Mastra and LangGraph JS run in TypeScript. Mastra agents run in-process via MastraAgent.getLocalAgents with no separate server, while LangGraph JS uses CopilotKitStateAnnotation and convertActionsToDynamicStructuredTools in a Node.js process.

How do I share state between a Python agent and the CopilotKit frontend?▼

Agents emit STATE_SNAPSHOT events over AG-UI to sync state. The pattern varies per framework: PydanticAI tools return StateSnapshotEvent, LangGraph extends CopilotKitState, ADK uses ToolContext.state, and Strands uses state_from_args in ToolBehavior config.

Can I orchestrate multiple agents from different frameworks in one CopilotKit app?▼

Yes, use A2AMiddlewareAgent from @ag-ui/a2a-middleware to wrap an orchestrator agent and register specialized agent URLs. The middleware injects a send_message_to_a2a_agent tool so the orchestrator can delegate to agents built with different frameworks.

Why is my frontend tool call being executed on the backend instead of the client?▼

Frontend actions arrive in the agent's state (for example state.copilotkit.actions in LangGraph or CrewAI) and must be routed back to the client rather than to the backend ToolNode. Check the tool call name against registered frontend actions and route matches to the end node.

Related Skills

Explore More Software Engineering Skills→
23wj1a054123wj1a0541

copilotkit-setup

Configures CopilotKit runtime, provider, and chat UI for React and Next.js projects.

Community
Intermediate
microsoftmicrosoft
34

agent-framework-agui-py

Implement the AG-UI protocol in Python with hybrid tool execution and shared state.

Official
Advanced
aayushsoamaayushsoam
1

native-mcp

Connect Clawbot Agent to MCP servers for direct tool access.

Community
Advanced
gptdeividgptdeivid

copilotkit-integrations

Integrates external AI agent frameworks into CopilotKit applications via AG-UI protocol.

Community
Advanced