# Introducing the CopilotKit integration with Agno

> Agno agents can now be exposed as AG-UI compatible apps via the official CopilotKit integration. Serve an Agno Agent or Team with AGUIApp and connect any AG-UI frontend, like Dojo, to chat with it from the browser.

- Published: 2025-06-18
- Author: Ashpreet Bedi
- Category: Engineering
- Canonical: https://agno-com-nine.vercel.app/articles/introducing-the-copilotkit-integration-with-agno
- Markdown: https://agno-com-nine.vercel.app/articles/introducing-the-copilotkit-integration-with-agno.md

We’re excited to announce the official CopilotKit integration with Agno via AG-UI — the open protocol for Agent-User Interactions. With this integration, you can now expose your Agno agents as AG-UI compatible apps.

AG-UI, or [Agent-User Interaction Protocol](https://github.com/ag-ui-protocol/ag-ui), is a protocol standardizing how AI agents connect to front-end applications. With this new Agno integration, you will be able to easily connect any AG-UI frontend to your Agno Agents and Teams.

## Example usage

### 1. Start by installing the backend dependencies

```bash
pip install agno ag-ui-protocol
```

### 2. Run the backend

Now let’s run a `AGUIApp` exposing an Agno Agent. This will be our backend.

```python
from agno.agent.agent import Agent
from agno.app.agui.app import AGUIApp
from agno.models.openai import OpenAIChat

chat_agent = Agent(
    name="Assistant",
    model=OpenAIChat(id="gpt-4o"),
    instructions="You are a helpful AI assistant.",
    add_datetime_to_instructions=True,
    markdown=True,
)

agui_app = AGUIApp(
    agent=chat_agent,
    name="Basic AG-UI Agent",
    app_id="basic_agui_agent",
    description="A basic agent that demonstrates AG-UI protocol integration.",
)

app = agui_app.get_app()

if __name__ == "__main__":
    agui_app.serve(app="basic:app", port=8000, reload=True)
```

code:

### 3. Run the frontend

Now we want to interact with our backend using an AG-UI compatible frontend.

You can use [Dojo](https://github.com/ag-ui-protocol/ag-ui/tree/main/typescript-sdk/apps/dojo), an advanced and customizable option to use as frontend for AG-UI agents:

1. Clone the project: `git clone <https://github.com/ag-ui-protocol/ag-ui.git`>
2. Follow the instructions [here](https://github.com/ag-ui-protocol/ag-ui/tree/main/typescript-sdk/apps/dojo) to learn how to install the needed dependencies and run the project.
3. Remember to install the dependencies in `/ag-ui/typescript-sdk` with `pnpm install`, and to build the Agno package in `/integrations/agno` with `pnpm run build`.
4. You can now run your Dojo! It will show our Agno agent as one of the available options.

### 4. Chat with your Agno Agents!

Done! If you are running Dojo as your front-end, you can now go to http://localhost:3000 in your browser and chat with your Agno Agent.

**You can read more about the integration in** [**our docs**](https://docs.agno.com/applications/ag-ui/introduction)**, and see some more examples** [**here**](https://docs.agno.com/examples/applications/ag-ui/agent_with_tools)**.**