Is there any way to integrate crewai open-source with Copilotkit UI ?

[west bane]

Is there any way to integrate crewai open-source with Copilotkit UI

[pale heron]

yes there is in the docs didnt you check it !

[west bane]

Checked it, but didn't find open-source SDK integration code examples in the documentation. Could you please help me by sharing the link? @pale heron

[quaint surge]

Hello, please check these docs:

https://docs.copilotkit.ai/crewai-crews
and the quick start here: https://docs.copilotkit.ai/crewai-crews/quickstart

If you're looking for something else, could you please clarify?

[west bane]

I want the open-source SDK of CrewAI to be integrated solely with Python BE using runtime URL and other features. I also need to test whether context management is being handled when using the open-source CrewAI.
I previously integrated my CopilotKit backend using NestJS, but now I want to integrate Crewai without the enterprise version. I plan to develop custom agents within that code and use them inside the runtime URL. However, I am struggling to find proper code examples for integrating Python with the runtime using the open-source Crewai.

[quaint surge]

@west bane You can fully integrate open-source CrewAI with a Python backend and expose it via a runtime URL using CopilotKit’s SDK—no enterprise or NestJS needed.
Use the CopilotKit Python SDK: wrap your custom CrewAI crew/flow with CrewAIAgent, then expose it via FastAPI using add_fastapi_endpoint (example code).

Example minimal server:

from fastapi import FastAPI
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit.sdk import CopilotKitRemoteEndpoint
from copilotkit.crewai import CrewAIAgent
from research.crew import ResearchCrew

crew = ResearchCrew().crew()
agent = CrewAIAgent(name="research_crew", description="Open-source crew", crew=crew)
sdk = CopilotKitRemoteEndpoint(agents=[agent])
app = FastAPI()
add_fastapi_endpoint(app, sdk, "/api/copilotkit")

There are multiple examples in this link: https://demo-viewer-five.vercel.app/ where Python backends using CrewAI are integrated with CopilotKit’s frontend via a runtime URL. These show real-time communication, agent actions, and context/state syncing.

Context is managed automatically by CopilotKit per thread.

[west bane]

I'm using the sample code and successfully getting a 200 in the header, but it's not providing answers in the chat.

[sly plinth]

Can you try this demo? Click on the code to see implementation.

[west bane]

OKay, sure

[west bane]

@sly plinth What is this reloaddir doing in this repo? Can't we directly use our CrewAI Flow Agent with FastAPI and utilize that endpoint inside the FE, which is deployed elsewhere, and import it as a package?

[south mason]

I am also facing same issue with no response in chat. I am not using flows but the crew, any help?

[sly plinth]

Yes, absolutely! reload_dirs is just a development convenience for auto-restarting the server when code changes - not needed for production.

You can definitely deploy your CrewAI Flow Agent with FastAPI as a standalone service and connect your frontend (deployed elsewhere) to it using the remote endpoint pattern - this is actually the recommended production architecture. Context and state are automatically managed per thread by CopilotKit.

[sly plinth]

The most common fix is adding chat_llm="gpt-4o"/specific model to your Crew configuration and wrapping completion calls with copilotkit_stream. These two changes resolve 90% of "no response" issues with crews.
Check these working crew implementations for reference: https://demo-viewer-five.vercel.app/feature/human_in_the_loop - code is also available there.
if this isn't helping - please share the relevant code?

[west bane]

How to access properties in my FastAPI server, using Crew AI flows

[sly plinth]

Properties flow from your frontend CopilotKit component to your FastAPI server through a context parameter, allowing you to create dynamic, user-specific agent behavior.

In Frontend: Pass properties via CopilotKit

<CopilotKit properties={{ userId: "123", role: "admin" }}>
{/* Your app */}
</CopilotKit>

And Access Properties in FastAPI

from copilotkit import CopilotKitRemoteEndpoint
from copilotkit.crewai import CrewAIAgent

def get_agents(context):
props = context.get("properties", {})
return [CrewAIAgent(
name=f"agent_{props.get('userId', 'default')}",
flow=MyFlow()
)]

sdk = CopilotKitRemoteEndpoint(agents=get_agents)

[smoky nebula]

thank you both for this whole thread🔥 🙏

correct me if im wrong but we dont need the copilot api cloud key in this pattern as well right?

[west bane]

Yes

[stiff moss]

I'm sorry--even reading this I'm stumped. Read all the docs. Usually dont have issues like this. Probably because I cant find ANY relevant examples.
I can never get my route.ts working.

Like, that demo, thats a single file page.tsx, how the heck would I run that as you provided?

As in, how does one run this with both CrewAI running locally, and without a Copilot API cloud key.

I've never once worked with software this hard to use, and I'm not a beginner! It'd be easier to write an Embedded OS' without AI, than this. Can anyone point me to a single working example? The Github examples, they don't work, at least not once I change them to use Google.
I have a huge headache from trying to read so much source code I can't even remember what I was reading anymore. AG-UI makes no sense.

[quaint surge]

@stiff moss Sorry to hear you're experiencing issues with copilotkit. Could you walk me through the specific issue you're encountering and describe your setup?

[west bane]

@sly plinth How can I display the result on my CopilotKit chat? I can see the final result in my terminal, but it is not showing in my chat, and I'm getting an error message.

Crew Flow Code Snippet:

[quaint surge]

Can you share the error message as well?

@west bane The problem is probably returning "route_end" instead of "route_follow_up" after tool execution. This can cause the tool to execute (hence terminal output) but the chat flow stops before displaying the response. Can you try changing your execution return from route_end to route_follow_up??

[west bane]

OKay sure, let me do and get back to you with the results

[west bane]

After changing it , it is re-running the flow again and again but not giving any response on chat, but showing error as you can see in my chat

@sly plinth

[quaint surge]

Can you add detailed logging to see what's failing?

[west bane]

I'm trying but didn't able to see any error log.

[quaint surge]

can you try this:

try:

    result = await tool_handlers[tool_call_name](tool_call_args, story_executor)

    print(f"✅ Tool {tool_call_name} executed successfully")

except Exception as e:

    print(f"❌ Tool {tool_call_name} failed: {str(e)}")

    # Return route_end on error to stop the loop

    return "route_end"  

[west bane]

No need to append this result in state? like this is my code block

try:
# Create story executor with context
context = {
"properties": {"datasource": tool_call_args["datasource"]},
"authToken": None # You might want to pass this through somehow
}
story_executor = InsightCopilotStoryExecutor(self.state, context)

                result = await tool_handlers[tool_call_name](tool_call_args, story_executor)
                print("resultresultresultresult",result)
                # Append result to messages
                self.state.messages.append({
                    "role": "tool",
                    "content": result,
                    "tool_call_id": tool_call_id
                })

                return "route_follow_up"
                
            except Exception as e:
                error_message = f"Error executing query: {str(e)}"
                self.state.error_context = {"error": str(e), "tool": tool_call_name}
                
                self.state.messages.append({
                    "role": "tool",
                    "content": error_message,
                    "tool_call_id": tool_call_id
                })

                return "route_follow_up"

[west bane]

@sly plinth

[quaint surge]

No, in case of error, you need to stop the flow,   return "route_end" 

[west bane]

Okay trying this piece of code

try:
# Create story executor with context
context = {
"properties": {"datasource": tool_call_args["datasource"]},
"authToken": None # You might want to pass this through somehow
}
story_executor = InsightCopilotStoryExecutor(self.state, context)

                result = await tool_handlers[tool_call_name](tool_call_args, story_executor)
                print(f"✅ Tool {tool_call_name} executed successfully")
                # # Append result to messages
                # self.state.messages.append({
                #     "role": "tool",
                #     "content": result,
                #     "tool_call_id": tool_call_id
                # })

                 return "route_follow_up"
                
            except Exception as e:
                error_message = f"Error executing query: {str(e)}"

                return "route_end"

Still not working.

[west bane]

Why is my agent running every single time, even on the same question? I've applied persistence as well
@sly plinth

[west bane]

Why am I getting this type of result in my chat? Try to change the instructions, but nothing happens. Don't need this black box

[quaint surge]

Can you please share the code for the generateElasticsearchQuery tool definition? The black box is likely a visual component that CopilotKit's frontend is automatically rendering based on the tool's output. Lets try to confirm if something can be changed or if it needs to be reported to the team.

[west bane]

Tools configuration

GENERATE_ELASTICSEARCH_QUERY_TOOL = {
"type": "function",
"function": {
"name": "generateElasticsearchQuery",
"description": "Generate and execute Elasticsearch queries based on user requirements using the complete Insight Copilot pipeline",
"parameters": {
"type": "object",
"properties": {
"prompt": {
"type": "string",
"description": "User query or prompt for data retrieval"
},
"datasource": {
"type": "string",
"description": "Target datasource (SNOW, ELK, M365, Connect Insights, Automation Scorecard)"
}
},
"required": ["prompt"]
}
}
}

tools = [GENERATE_ELASTICSEARCH_QUERY_TOOL]
@sly plinth

I've attempted to change the instructions on my frontend, but this black box always renders every time my tool generates a response. Also, please let me know why my agent is triggered from the beginning whenever a user submits a query.

[quaint surge]

Your tool definition appears correct. The issue seems related to how CopilotKit renders the tool result. When the tool result contains a JSON object, the frontend may automatically wrap it in a "code block" format. You can try implementing the solution outlined in this doc
Regarding the agent triggering issue with each query, I believe this occurs because there's a mismatch between the thread ID created from the frontend and the internal UUID generated by CrewAI. The persistence system uses the UUID while the frontend loads using the thread_id. Since these don't match, no existing state is found, causing the agent to start fresh every time.
I am passing your query to the team, they will check and reply. If you find that the existing solutions don't address your needs, please consider creating a GitHub issue with the reproduction steps and setup information

[west bane]

OKay Thanks @sly plinth will keep you posted

[west bane]

Yes, using the document link you provided, this black box disappears. However, my instructions, which tell it to format in a specific way, aren't being applied. For persistence, we need to work on it.

[west bane]

@sly plinth Is there a way for me to use my useCopilotAction on the frontend, but have the results generated from the Crew AI flow? I don’t want to make external calls through APIs or any other methods; I would like my custom component to be rendered based on the result generated using Crew AI flow actions.

[quaint surge]

Yes, you can use useCoAgent, it maintains a persistent connection to your Crew AI flow and automatically updates when the flow produces results. The state object in useCoAgent is reactive, so your custom components re-render automatically when results arrive. You can access Crew AI results directly from state.result or any custom properties your flow sets

[west bane]

It was re-rendering multiple times and causing my setState error