skills.rest
23wj1a0541
23wj1a0541COMMUNITY
Explore all skills by this author →
GitHub

copilotkit-integrations

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

Updated May 9, 2026
Search Tags:#next.js#langgraph#copilotkit#crewai#agent integration#ag-ui#generative ui
One-click install
npx skills add https://github.com/23wj1a0541/L.E.N.S --skill copilotkit-integrations-23wj1a0541
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-integrations
Source: https://github.com/23wj1a0541/L.E.N.S/tree/main/.cursor/skills/copilotkit-integrations
Command: npx skills add https://github.com/23wj1a0541/L.E.N.S --skill copilotkit-integrations-23wj1a0541

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 knowing the correct AG-UI adapter, client class, server pattern, and port conventions 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 your agent's language and framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, A2A, MCP Apps). - 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 tells you to use add_crewai_flow_fastapi_endpoint on the server and HttpAgent in the route. ## Quick Start Ask the assistant 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 serve it via add_langgraph_fastapi_endpoint on FastAPI. In the Next.js route, use LangGraphHttpAgent from @copilotkit/runtime/langgraph pointing at the agent URL, typically port 8123.

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

LangGraph self-hosted uses LangGraphHttpAgent, 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 are supported TypeScript frameworks. Mastra agents run in-process via MastraAgent.getLocalAgents, while LangGraph JS uses CopilotKitStateAnnotation and convertActionsToDynamicStructuredTools from @copilotkit/sdk-js/langgraph.

How do I sync shared state between agent and frontend?▼

Agents emit STATE_SNAPSHOT events that update the frontend useAgent hook. Each framework handles this differently: PydanticAI tools return StateSnapshotEvent, Strands uses state_from_args in ToolBehavior, and Microsoft Agent Framework uses predict_state_config.

Can I orchestrate multiple agents from different frameworks?▼

Yes, the A2A Middleware pattern uses A2AMiddlewareAgent from @ag-ui/a2a-middleware to wrap an orchestrator agent and inject a send_message_to_a2a_agent tool. Register each specialized agent's URL in the agentUrls array.

Why is my frontend tool call executing on the backend?▼

Frontend actions from CopilotKit must be routed back to the client instead of the backend tool node. In LangGraph, check whether the tool call name matches copilotkit.actions and route to __end__ rather than tool_node.

Related Skills

Explore More Software Engineering Skills→
quanngynxquanngynx

copilotkit-integrations

Integrate external agent frameworks into CopilotKit applications via AG-UI.

Community
Advanced
NodeOps-appNodeOps-app
2

createos

Deploy workloads to production on CreateOS via GitHub, Docker, or file uploads.

Official
Advanced
inference-shinference-sh
688

tools-ui

Render React/Next.js UI components for AI agent tool lifecycle management.

Official
Basic
microsoftmicrosoft
34

agent-framework-agui-csharp

Build AG-UI protocol clients and servers with the Microsoft Agent Framework .NET SDK.

Official
Advanced