Running project without next.js

[sly spruce]

Hey, find it hard to understand if that's possible to implement copilotkit + agno + ag-ui over react typescript & python fastapi with no need of next.js server or graphql that will take care of the graphql calls.

[wary willow]

This solution has been AI generated

Yes, you can run CopilotKit without Next.js. CopilotKit is framework‑agnostic, and React TypeScript + Python FastAPI is supported. You can handle GraphQL via CopilotKit’s GraphQL client on the frontend and expose a GraphQL endpoint from your FastAPI backend.

Is Next.js required?

• No. CopilotKit explicitly supports React, AGUI (Agent UI), and multiple backends (including FastAPI). You don’t need a Next.js server.

Supported stack: React TS + FastAPI

• Frontend: React + TypeScript using CopilotKit’s React components.
• Backend: FastAPI to host your agent (e.g., agno) and serve a CopilotKit GraphQL endpoint.
• UI/Agent: AGUI and agno are supported in this framework‑agnostic setup.

Handling GraphQL without Next.js

• Use the dedicated GraphQL client package on the frontend to communicate with your FastAPI GraphQL endpoint.
• The client is framework‑agnostic and works in plain React apps.

Minimal setup outline

1) Install (frontend)

npm install @copilotkit/react @copilotkit/runtime-client-gql

2) Configure the React app (point to FastAPI GraphQL)

// Pseudo-setup: create a CopilotKit client that targets your FastAPI GraphQL URL
// Example URL: https://your-api.example.com/copilotkit/graphql
// Use this client in your React app’s provider/components.

3) FastAPI backend

pip install fastapi uvicorn

# Pseudo-setup: expose a POST endpoint that serves CopilotKit’s GraphQL API
# Route example: /copilotkit/graphql
# Implement the GraphQL handler that connects to your agno/agent logic.

Notes

• CopilotKit provides examples without Next.js (e.g., Node-based backends) and explicitly mentions FastAPI compatibility, confirming this architecture is supported.

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

Thank you for your feedback! Our team will provide additional assistance. 🔄

[wary willow]

Hi @sly spruce , It is possible to use the stack you mentioned without NextJs. You could use ReactJs also. But you need to consume the Graphql. It is a way the FE communicates with the BE.

[sly spruce]

@normal blaze Hey, thanks for your reply. If i got you correctly, I must create another service alongside my current stack (React + python fastapi) that will be middleman between copilotkit react component in the FE to Agno agents on the BE. am i correct?

[wary willow]

Yes, that service should be Copilotkit runtime.
https://docs.copilotkit.ai/langgraph/quickstart?path=code-along&lg-deployment-type=Self+hosted+(FastAPI)&agent=coagents-starter&copilot-hosting=self-hosted&endpoint-type=Node.js+Express#setup-a-copilot-runtime-endpoint

Pls refer to this docs. I know this is for langgraph, but this is a general step for all frameworks.

[sly spruce]

Thanks!
Can you elaborate why this service is required? and if there is any plan to support direct connection in the near future?
As far as i understand ag-ui doesn't require graphql.

currently i work with vercel adaptor for agno FW and it's working direct with no middleman

[normal blaze]

https://docs.copilotkit.ai/agno/quickstart?agent=bring-your-own

Were you following this setup for your Agno agent? Or am i missing out something?

[sly spruce]

yes i saw this tutorial, i migrate agno from 1.8 to 2.2 now before impolementing this setup but before starting i want to understand if that's needed at all or am i missing something

i'm trying to avoid creating another service if not must

[wary willow]

It is a must to have this CopilotKit runtime layer as this handles some key functionalities. I see your problem that since you are using React TS, you need to handle a separate Node Js server just for this runtime.
But you need to have it. You can switch to NextJs. This eliminates the handling of 2 entities.

[sly spruce]

i got it, i'm trying to set it using another service still with no success

@normal blaze I followed the instructions and used the template in order to point to my server instead of the provided server, i tried with http and no https and it worked

  CopilotRuntime,
  ExperimentalEmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";

import { AgnoAgent } from "@ag-ui/agno"
import { NextRequest } from "next/server";
 
// 1. You can use any service adapter here for multi-agent support. We use
//    the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
 
// 2. Create the CopilotRuntime instance and utilize the Agno AG-UI
//    integration to setup the connection.
const runtime = new CopilotRuntime({
  agents: {
    // Our FastAPI endpoint URL
    "agno_agent": new AgnoAgent({url: "https://127.0.0.1:8000/agui"}),
  }   
});
 
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime, 
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });
 
  return handleRequest(req);
};

Also how can i debug the next service?

and what the service adapter standing for? right now that's empty adapter? 🤔

[normal blaze]

Let me check the other ones. In the meantime, you can find more about service adapter vs empty adapter in this [discussion](#1431038545803350156 message)

[normal blaze]

Hey! Check out this doc, it should help!

[sly spruce]

great thanks! @normal blaze Any docs about autherization header? seems like that's doesn't work out of the box

[sly spruce]

I've trouble with passing my authentication bearer from the ui to the Backend through the next service
Trying manually to pass the bearer but the BE receive nothing.