# Copilotkit

> Documentation for Copilotkit

## Pages

- [Copilotkit Documentation](copilotkit-documentation.md)
- [http://docs.copilotkit.ai llms-full.txt](httpdocscopilotkitai-llms-fulltxt.md): CrewAI CrewAI support is here! Checkout the [Crew](https://docs.copilotkit.ai/crewai-crews) and [Flow](https://docs.c...
- [Introduction](introduction.md): Build production-ready Copilots and Agents effortlessly.
- [[What is CopilotKit?](https://docs.copilotkit.ai/\#what-is-copilotkit)](what-is-copilotkithttpsdocscopilotkitaiwhat-is-copilotkit.md): At its core, CopilotKit is a set of tools that make it easy to **let your users work**
- [Introduction](introduction-2.md): Build Agent-Native Applications (ANAs) powered by CopilotKit and LangGraph.
- [[Copilot Infrastructure for LangGraph Agents](https://docs.copilotkit.ai/coagents\#copilot-infrastructure-for-langgraph-agents)](copilot-infrastructure-for-langgraph-agentshttpsdocscopilotkitaicoagentscopilot-.md): Full user-interaction infrastructure for your agents, to turn your agents into Copilot Agents (CoAgents).
- [API Reference](api-reference.md): API Reference for CopilotKit's components, classes and hooks.
- [Introduction](introduction-3.md): Build Agent-Native Applications (ANAs) powered by CopilotKit and CrewAI Flows.
- [[Copilot Infrastructure for CrewAI Flows](https://docs.copilotkit.ai/crewai-flows\#copilot-infrastructure-for-crewai-flows)](copilot-infrastructure-for-crewai-flowshttpsdocscopilotkitaicrewai-flowscopilot-.md): Full user-interaction infrastructure for your agents, to turn your agents into Copilot Agents (CoAgents).
- [Quickstart (LangGraph)](quickstart-langgraph.md): Turn your LangGraph into an agent-native application in 10 minutes.
- [For Python 3.11 or above](for-python-311-or-above.md): langgraph dev --host localhost --port 8000
- [For TypeScript with Node 18 or above](for-typescript-with-node-18-or-above.md): npx @langchain/langgraph-cli dev --host localhost --port 8000
- [Introduction](introduction-4.md): Build Agent-Native Applications (ANAs) powered by CopilotKit and CrewAI Flows.
- [[Copilot Infrastructure for CrewAI Crews](https://docs.copilotkit.ai/crewai-crews\#copilot-infrastructure-for-crewai-crews)](copilot-infrastructure-for-crewai-crewshttpsdocscopilotkitaicrewai-crewscopilot-.md): Full user-interaction infrastructure for your agents, to turn your agents into Copilot Agents (CoAgents).
- [Self Hosting (Copilot Runtime)](self-hosting-copilot-runtime.md): Learn how to self-host the Copilot Runtime.
- [useCopilotAction](usecopilotaction.md): The useCopilotAction hook allows your copilot to take action in the app.
- [State Machines](state-machines.md): Learn how to guide users through multi-step conversations using a state machine pattern.
- [useCoAgent](usecoagent.md): The useCoAgent hook allows you to share state bidirectionally between your application and the agent.
- [CopilotKit](copilotkit.md): The CopilotKit provider component, wrapping your application.
- [Frontend Actions](frontend-actions.md): Create frontend actions and use them within your agent.
- [including support for crewai](including-support-for-crewai.md): poetry add copilotkit[crewai]
- [Generative UI](generative-ui.md): Render your agent's behavior with custom UI components.
- [Quickstart](quickstart.md): Get started with CopilotKit in under 5 minutes.
- [Saving and restoring messages](saving-and-restoring-messages.md): Learn how to save and restore message history.
- [Copilot Suggestions](copilot-suggestions.md): Learn how to auto-generate suggestions in the chat window based on real time application state.
- [CopilotTask](copilottask.md): CopilotTask is used to execute one-off tasks, for example on button click.
- [Copilot Textarea](copilot-textarea.md): Learn how to use the Copilot Textarea for AI-powered autosuggestions.
- [Page Not Found](page-not-found.md): Oops! The page you're looking for doesn't exist.
- [CopilotRuntime](copilotruntime.md): Copilot Runtime is the back-end component of CopilotKit, enabling interaction with LLMs.
- [useLangGraphInterrupt](uselanggraphinterrupt.md): The useLangGraphInterrupt hook allows setting the generative UI to be displayed on LangGraph's Interrupt event.
- [CopilotTextarea](copilottextarea.md): An AI-powered textarea component for your application, which serves as a drop-in replacement for any textarea.
- [Quickstart](quickstart-2.md): Get started with CopilotKit in under 5 minutes.
- [Generative UI](generative-ui-2.md): Learn how to embed custom UI components in the chat window.
- [[Render custom components in the chat UI](https://docs.copilotkit.ai/guides/generative-ui\#render-custom-components-in-the-chat-ui)](render-custom-components-in-the-chat-uihttpsdocscopilotkitaiguidesgenerative-uir.md): When a user interacts with your Copilot, you may want to render a custom UI component. [`useCopilotAction`](https://d...
- [useCopilotChatSuggestions](usecopilotchatsuggestions.md): The useCopilotChatSuggestions hook generates suggestions in the chat window based on real-time app state.
- [Anonymous Telemetry](anonymous-telemetry.md): We use anonymous telemetry (metadata-only) to learn how to improve CopilotKit.
- [Shared State](shared-state.md): Create a two-way connection between your UI and agent state.
- [Frontend Actions](frontend-actions-2.md): Learn how to enable your Copilot to take actions in the frontend.
- [[Let the Copilot Take Action](https://docs.copilotkit.ai/guides/frontend-actions\#let-the-copilot-take-action)](let-the-copilot-take-actionhttpsdocscopilotkitaiguidesfrontend-actionslet-the-co.md): In addition to understanding state, you can empower the copilot to take actions. Use the [`useCopilotAction`](https:/...
- [Common Issues](common-issues.md): Common issues you may encounter when using Copilots.
- [Quickstart (LangGraph)](quickstart-langgraph-2.md): Turn your LangGraph into an agent-native application in 10 minutes.
- [For Python 3.11 or above](for-python-311-or-above-2.md): langgraph dev --host localhost --port 8000
- [For TypeScript with Node 18 or above](for-typescript-with-node-18-or-above-2.md): npx @langchain/langgraph-cli dev --host localhost --port 8000
- [LangGraph](langgraph.md): An agentic framework for building LLM applications that can be used with CopilotKit.
- [Backend Actions & Agents](backend-actions-agents.md): Learn how to enable backend actions & agents in your Copilot.
- [useCoAgentStateRender](usecoagentstaterender.md): The useCoAgentStateRender hook allows you to render the state of the agent in the chat.
- [What would you like to know?](what-would-you-like-to-know.md): 0 / 250
- [useCopilotReadable](usecopilotreadable.md): The useCopilotReadable hook allows you to provide knowledge to your copilot (e.g. application state).
- [CopilotPopup](copilotpopup.md): The CopilotPopup component, providing a popup interface for interacting with your copilot.
- [Common Issues](common-issues-2.md): Common issues you may encounter when using CoAgents.
- [Agentic Generative UI](agentic-generative-ui.md): Render the state of your agent with custom UI components.
- [...](untitled.md): from copilotkit import CopilotKitState # extends MessagesState
- [It inherits from the CopilotKitState properties from CopilotKit.](it-inherits-from-the-copilotkitstate-properties-from-copilotkit.md): class AgentState(CopilotKitState):
- [Agentic Copilots](agentic-copilots.md): Agentic copilots provide you with advanced control and orchestration over your agents.
- [Connecting Your Data](connecting-your-data.md): Learn how to connect your data to CopilotKit.
- [CopilotChat](copilotchat.md): The CopilotChat component, providing a chat interface for interacting with your copilot.
- [Page Not Found](page-not-found-2.md): Oops! The page you're looking for doesn't exist.
- [Quickstart](quickstart-3.md): Get started with CopilotKit in under 5 minutes.
- [LangGraph SDK](langgraph-sdk.md): The CopilotKit LangGraph SDK for Python allows you to build and run LangGraph workflows with CopilotKit.
- [Return the message from the node](return-the-message-from-the-node.md): return {
- [Remote Endpoints](remote-endpoints.md): CopilotKit Remote Endpoints allow you to connect actions and agents written in Python to your CopilotKit application.
- [or to include crewai](or-to-include-crewai.md): pip install copilotkit[crewai]
- [LangGraph SDK](langgraph-sdk-2.md): The CopilotKit LangGraph SDK for JavaScript allows you to build and run LangGraph workflows with CopilotKit.
- [Multi-Agent Flows](multi-agent-flows.md): Use multiple agents to orchestrate complex flows.
- [CopilotSidebar](copilotsidebar.md): The CopilotSidebar component, providing a sidebar interface for interacting with your copilot.
- [Quickstart CrewAI Flows](quickstart-crewai-flows.md): Turn your CrewAI Flows into an agent-native application in 10 minutes.
- [Start the server](start-the-server.md): poetry run demo
- [Streaming and Tool Calls](streaming-and-tool-calls.md): CoAgents support streaming your messages and tool calls to the frontend.
- [Chat with an Agent](chat-with-an-agent.md): Chat with an agent using CopilotKit's UI components.
- [CrewAIAgent](crewaiagent.md): CrewAIAgent lets you define your agent for use with CopilotKit.
- [Function signatures:](function-signatures.md): def merge_state(
- [Quickstart CrewAI Crews](quickstart-crewai-crews.md): Turn your CrewAI Crews into an agent-native application in 10 minutes.
- [LangGraphAgent](langgraphagent.md): LangGraphAgent lets you define your agent for use with CopilotKit.
- [Function signatures:](function-signatures-2.md): def merge_state(
- [Guardrails  Cloud Only](guardrails-cloud-only.md): Copilot Cloud provides content moderation capabilities through the`guardrails_c`configuration, helping ensure safe ...
- [LangSmith](langsmith.md): To trace your LLM runs with LangSmith, make sure to set up your environment variables:
- [Disabling state streaming](disabling-state-streaming.md): Granularly control what is streamed to the frontend.
- [if we override the config variable name with a new value](if-we-override-the-config-variable-name-with-a-new-value.md): config = copilotkit_customize_config(config, ...)
- [it will affect every subsequent LangChain LLM call in the same namespace, even when `config` is not explicitly provided](it-will-affect-every-subsequent-langchain-llm-call-in-the-same-namespace-even-wh.md): response = await model2.ainvoke(*state["messages"]) # implicitly uses the modified config!
- [Bring Your Own LLM](bring-your-own-llm.md): Learn how to use any LLM with CopilotKit.
- [Customize UI](customize-ui.md): Customize the look, feel, and functionality of CopilotKit's UI components.
- [Quickstart](quickstart-4.md): Get started with CopilotKit in under 5 minutes.
- [Frontend Data](frontend-data.md): Learn how to connect your data to CopilotKit.
- [Threads](threads.md): Learn how to load chat messages and threads within the CopilotKit framework.
- [Human in the Loop (HITL)](human-in-the-loop-hitl.md): Allow your agent and users to collaborate on complex tasks.
- [Quickstart](quickstart-5.md): Get started with CopilotKit in under 5 minutes.
- [Customize Instructions](customize-instructions.md): Learn how to customize the behavior of your AI assistant.
- [Loading Agent State](loading-agent-state.md): Learn how threadId is used to load previous agent states.
- [OpenAIAdapter](openaiadapter.md): Copilot Runtime adapter for OpenAI.
- [GroqAdapter](groqadapter.md): Copilot Runtime adapter for Groq.
- [OpenAIAssistantAdapter](openaiassistantadapter.md): Copilot Runtime adapter for OpenAI Assistant API.
- [LangChainAdapter](langchainadapter.md): Copilot Runtime adapter for LangChain.
- [Loading Agent State](loading-agent-state-2.md): Learn how threadId is used to load previous agent states.
- [Introduction](introduction-5.md): Build production-ready Copilots and Agents effortlessly.
- [[What is CopilotKit?](https://docs.copilotkit.ai/?ref=github_readme\#what-is-copilotkit)](what-is-copilotkithttpsdocscopilotkitairefgithub-readmewhat-is-copilotkit.md): At its core, CopilotKit is a set of tools that make it easy to **let your users work**
- [GoogleGenerativeAIAdapter](googlegenerativeaiadapter.md): Copilot Runtime adapter for Google Generative AI (e.g. Gemini).
- [Introduction](introduction-6.md): Build Agent-Native Applications (ANAs) powered by CopilotKit and CrewAI Flows.
- [[Copilot Infrastructure for CrewAI Crews](https://docs.copilotkit.ai/crewai-crews?ref=blog.crewai.com\#copilot-infrastructure-for-crewai-crews)](copilot-infrastructure-for-crewai-crewshttpsdocscopilotkitaicrewai-crewsrefblogc.md): Full user-interaction infrastructure for your agents, to turn your agents into Copilot Agents (CoAgents).
- [Agent state inputs and outputs](agent-state-inputs-and-outputs.md): Decide which state properties are received and returned to the frontend
- [Input schema for inputs you are willing to accept from the frontend](input-schema-for-inputs-you-are-willing-to-accept-from-the-frontend.md): class InputState(CopilotKitState):
- [Output schema for output you are willing to pass to the frontend](output-schema-for-output-you-are-willing-to-pass-to-the-frontend.md): class OutputState(CopilotKitState):
- [The full schema, including the inputs, outputs and internal state ("resources" in our case)](the-full-schema-including-the-inputs-outputs-and-internal-state-resources-in-our.md): class OverallState(InputState, OutputState):
- [finally, before compiling the graph, we define the 3 state components](finally-before-compiling-the-graph-we-define-the-3-state-components.md): builder = StateGraph(OverallState, input=InputState, output=OutputState)
- [add all the different nodes and edges and compile the graph](add-all-the-different-nodes-and-edges-and-compile-the-graph.md): builder.add_node("answer_node", answer_node)
- [Predictive state updates](predictive-state-updates.md): Stream in-progress agent state updates to the frontend.
- [including support for crewai](including-support-for-crewai-2.md): poetry add copilotkit[crewai]
- [...](untitled-2.md): async def chat_node(state: AgentState, config: RunnableConfig) -> Command[Literal["cpk_action_node", "tool_node", "__...
- [Migrate to 1.8.2](migrate-to-182.md): Migration guide for CopilotKit 1.8.2
- [Generative UI](generative-ui-3.md): Learn how to embed custom UI components in the chat window.
- [[Render custom components in the chat UI](https://docs.copilotkit.ai/guides/generative-ui?ref=hackernoon.com\#render-custom-components-in-the-chat-ui)](render-custom-components-in-the-chat-uihttpsdocscopilotkitaiguidesgenerative-uir-2.md): When a user interacts with your Copilot, you may want to render a custom UI component. [`useCopilotAction`](https://d...
- [Agentic Generative UI](agentic-generative-ui-2.md): Render the state of your agent with custom UI components.
- [...](untitled-3.md): from copilotkit import CopilotKitState # extends MessagesState
- [It inherits from the CopilotKitState properties from CopilotKit.](it-inherits-from-the-copilotkitstate-properties-from-copilotkit-2.md): class AgentState(CopilotKitState):
- [TypeScript (Node.js)](typescript-nodejs.md): Implement native backend actions using TypeScript or Node.js in CopilotKit.
- [Tool-based Generative UI](tool-based-generative-ui.md): Render your agent's tool calls with custom UI components.
- [Remote Endpoint (LangGraph Platform)](remote-endpoint-langgraph-platform.md): Connect your CopilotKit application to an agent deployed on LangGraph Platform.
- [For Python 3.11 or above](for-python-311-or-above-3.md): langgraph dev --host localhost --port 8000
- [For TypeScript with Node 18 or above](for-typescript-with-node-18-or-above-3.md): npx @langchain/langgraph-cli dev --host localhost --port 8000
- [Remote Endpoint (Python)](remote-endpoint-python.md): Connect your CopilotKit application to a remote backend endpoint, allowing integration with Python-based services or ...
- [or including support for crewai](or-including-support-for-crewai.md): poetry add copilotkit[crewai] fastapi uvicorn
- [Define your backend action](define-your-backend-action.md): async def fetch_name_for_user_id(userId: str):
- [this is a dummy action for demonstration purposes](this-is-a-dummy-action-for-demonstration-purposes.md): action = CopilotAction(
- [Initialize the CopilotKit SDK](initialize-the-copilotkit-sdk.md): sdk = CopilotKitRemoteEndpoint(actions=[action])
- [Add the CopilotKit endpoint to your FastAPI app](add-the-copilotkit-endpoint-to-your-fastapi-app.md): add_fastapi_endpoint(app, sdk, "/copilotkit_remote")
- [Human in the Loop (HITL)](human-in-the-loop-hitl-2.md): Allow your agent and users to collaborate on complex tasks.
- [Authenticated Actions  Cloud Only](authenticated-actions-cloud-only.md): Copilot Cloud enables secure propagation of authentication state within AI conversations, allowing your copilot to in...
- [Terminology](terminology.md): Here are the key terms and concepts used throughout CoAgents:
- [Documentation Contributions](documentation-contributions.md): We understand that as we move quickly, sometimes our documentation website can be a bit outdated. Therefore, we highl...
- [useCopilotChat](usecopilotchat.md): `useCopilotChat`is a React hook that lets you directly interact with the
- [Node-based](node-based.md): Learn how to implement Human-in-the-Loop (HITL) using a node-based flow.
- [including support for crewai](including-support-for-crewai-3.md): poetry add copilotkit[crewai]
- [1. Define our agent's state and inherit from CopilotKitState, this brings in the CopilotKit actions](1-define-our-agents-state-and-inherit-from-copilotkitstate-this-brings-in-the-co.md): class AgentState(CopilotKitState):
- [2. Define the chat node, this will be where the agent will talk to user and](2-define-the-chat-node-this-will-be-where-the-agent-will-talk-to-user-and.md)
- [decide if it needs to call the writeEssay tool](decide-if-it-needs-to-call-the-writeessay-tool.md): async def chat_node(state: AgentState, config: RunnableConfig) -> Command[Literal["user_feedback_node", "__end__"]]:
- [3. Define an empty interrupt node to act as buffer as we use the interrupt_after property](3-define-an-empty-interrupt-node-to-act-as-buffer-as-we-use-the-interrupt-after-.md): def interrupt_node(state: AgentState, config: RunnableConfig):
- [4. Define the user_feedback_node, this node will be interrupted before execution](4-define-the-user-feedback-node-this-node-will-be-interrupted-before-execution.md)
- [where CopilotKit's renderAndWaitForResponse provide the user's response.](where-copilotkits-renderandwaitforresponse-provide-the-users-response.md): def user_feedback_node(state: AgentState, config: RunnableConfig) -> Command[Literal["chat_node"]]:
- [5. Configure the workflow](5-configure-the-workflow.md): workflow = StateGraph(AgentState)
- [6. Compile the workflow and set the interrupt_after property](6-compile-the-workflow-and-set-the-interrupt-after-property.md): graph = workflow.compile(MemorySaver(), interrupt_after=["interrupt_node"])
- [Fully Headless UI](fully-headless-ui.md): Fully customize your Copilot's UI from the ground up using headless UI
- [Writing agent state](writing-agent-state.md): Write to agent's state from your application.
- [All Chat Components](all-chat-components.md): [**** \\
- [LangChain.js](langchainjs.md): Integrate LangChain JS chains as backend actions in your CopilotKit application.
- [Reading agent state](reading-agent-state.md): Read the realtime agent state in your native application.
- [Interrupt](interrupt.md): Learn how to implement Human-in-the-Loop (HITL) using a interrupt-based flow.
- [including support for crewai](including-support-for-crewai-4.md): poetry add copilotkit[crewai]
- [...](untitled-4.md): from copilotkit import CopilotKitState # extends MessagesState
- [It inherits from the CopilotKitState properties from CopilotKit.](it-inherits-from-the-copilotkitstate-properties-from-copilotkit-3.md): class AgentState(CopilotKitState):
- [add the agent state definition from the previous step](add-the-agent-state-definition-from-the-previous-step.md): class AgentState(CopilotKitState):
- [...](untitled-5.md): agent_name, new_messages = copilotkit_interrupt(message="Before we start, what would you like to call me?")
- [...](untitled-6.md): When opting for custom chat UI while having multiple`interrupt`events in the agent, there could be conflicts betwee...
- [... your full state definition](your-full-state-definition.md): def chat_node(state: AgentState, config: RunnableConfig):
- [Writing agent state](writing-agent-state-2.md): Write to agent's state from your application.
- [Message flow](message-flow.md): Message management in CoAgents operates with CopilotKit as the "ground truth" for the full chat session.
- [Exiting the agent loop](exiting-the-agent-loop.md): After your agent has finished a workflow, you'll usually want to explicitly end that loop by calling the CopilotKit e...
- [including support for crewai](including-support-for-crewai-5.md): poetry add copilotkit[crewai]
- [...](untitled-7.md): async def send_email_node(state: EmailAgentState, config: RunnableConfig):
- [Message Persistence](message-persistence.md): To learn about how to load previous messages and agent states, check out the [Loading Message History](https://docs.c...
- [Manually emitting messages](manually-emitting-messages.md): While most agent interactions happen automatically through shared state updates as the agent runs, you can also **man...
- [including support for crewai](including-support-for-crewai-6.md): poetry add copilotkit[crewai]
- [...](untitled-8.md): async def chat_node(state: AgentState, config: RunnableConfig):