Quickstart

            ```bash
            npx copilotkit@latest create -f agno
            ```
        </Step>
        <Step>
            ### Install dependencies

            ```npm
            npm install
            ```
        </Step>
        <Step>
            ### Configure your environment

            Create a `.env` file in your agent directory and add your OpenAI API key:

            ```plaintext title="agent/.env"
            OPENAI_API_KEY=your_openai_api_key
            ```

            <Callout type="info" title="What about other models?">
              The starter template is configured to use OpenAI's GPT-4o by default, but you can modify it to use any language model supported by Agno.
            </Callout>
        </Step>
        <Step>
            ### Start the development server

            <Tabs groupId="package-manager" items={['npm', 'pnpm', 'yarn', 'bun']}>
                <Tab value="npm">
                    ```bash
                    npm run dev
                    ```
                </Tab>
                <Tab value="pnpm">
                    ```bash
                    pnpm dev
                    ```
                </Tab>
                <Tab value="yarn">
                    ```bash
                    yarn dev
                    ```
                </Tab>
                <Tab value="bun">
                    ```bash
                    bun dev
                    ```
                </Tab>
            </Tabs>

            This will start both the UI and agent servers concurrently.
        </Step>
    </TailoredContentOption>
    <TailoredContentOption
        id="bring-your-own"
        title="Use an existing agent"
        description="I already have an Agno agent and want to add CopilotKit."
    >
        <Step>
            ### Initialize your agent project

            If you don't already have a Python project set up, create one using `uv`:

            ```bash
            uv init my-agent
            cd my-agent
            ```
        </Step>
        <Step>
            ### Install Agno with AG-UI

            Add Agno and uvicorn to your project:

            ```bash
            uv add agno fastapi uvicorn openai ag-ui-protocol
            ```
        </Step>
        <Step>
            ### Configure your environment

            Set your OpenAI API key as an environment variable:

            ```bash
            export OPENAI_API_KEY=your_openai_api_key
            ```

            <Callout type="info" title="What about other models?">
              This example uses OpenAI's GPT-4o, but you can modify it to use any language model supported by Agno.
            </Callout>
        </Step>
        <Step>
            ### Expose your agent via AG-UI

            Update your agent file to expose it as an AG-UI ASGI application:

            ```python title="main.py"
            from agno.agent import Agent
            from agno.models.openai import OpenAIChat
            from agno.os import AgentOS
            from agno.os.interfaces.agui import AGUI

            agent = Agent(
                model=OpenAIChat(id="gpt-5.4"),
                description="A helpful assistant that can answer questions and provide information.",
                instructions="Be helpful and friendly. Format your responses using markdown where appropriate.",
            )

            agent_os = AgentOS(agents=[agent], interfaces=[AGUI(agent=agent)])
            app = agent_os.get_app()

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

            <Callout type="info" title="What is AG-UI?">
              AG-UI is an open protocol for frontend-agent communication. AgentOS with the AGUI interface creates an ASGI app that CopilotKit can connect to.
            </Callout>
        </Step>
        <Step>
            ### Create your frontend

            CopilotKit works with any React-based frontend. We'll use Next.js for this example.

            ```bash
            npx create-next-app@latest my-copilot-app
            cd my-copilot-app
            ```
        </Step>
        <Step>
            ### Install CopilotKit packages

            ```npm
            npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime @ag-ui/agno
            ```
        </Step>
        <Step>
            ### Setup Copilot Runtime

            Create an API route to connect CopilotKit to your Agno agent:

            ```tsx title="app/api/copilotkit/route.ts"
            import {
              CopilotRuntime,
              ExperimentalEmptyAdapter,
              copilotRuntimeNextJSAppRouterEndpoint,
            } from "@copilotkit/runtime";
            import { AgnoAgent } from "@ag-ui/agno";
            import { NextRequest } from "next/server";

            const serviceAdapter = new ExperimentalEmptyAdapter();

            const runtime = new CopilotRuntime({
              agents: {
                my_agent: new AgnoAgent({ url: "http://localhost:8000/agui" }),
              }
            });

            export const POST = async (req: NextRequest) => {
              const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
                runtime,
                serviceAdapter,
                endpoint: "/api/copilotkit",
              });

              return handleRequest(req);
            };
           ```
        </Step>
        <Step>
            ### Configure CopilotKit Provider

            Wrap your application with the CopilotKit provider:

            ```tsx title="app/layout.tsx"
            import { CopilotKit } from "@copilotkit/react-core/v2"; // [!code highlight]
            import "@copilotkit/react-ui/v2/styles.css"; // [!code highlight]
            import './globals.css';

            // ...

            export default function RootLayout({ children }: {children: React.ReactNode}) {
              return (
                <html lang="en">
                  <body>
                    <CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent">
                      {children}
                    </CopilotKit>
                  </body>
                </html>
              );
            }
            ```
        </Step>
        <Step>
          ### Add the chat interface

          Add the CopilotSidebar component to your page:

          ```tsx title="app/page.tsx"
          import { CopilotSidebar } from "@copilotkit/react-core/v2"; // [!code highlight]

          export default function Page() {
            return (
              <main>
                <h1>Your App</h1>
                <CopilotSidebar />
              </main>
            );
          }
          ```
        </Step>
        <Step>
            ### Start your agent

            From your agent directory, start the agent server:

            ```bash
            cd ..
            uv run main.py
            ```

            Your agent will be available at `http://localhost:8000/agui`.
        </Step>
        <Step>
            ### Start your UI

            In a separate terminal, navigate to your frontend directory and start the development server:

            <Tabs groupId="package-manager" items={['npm', 'pnpm', 'yarn', 'bun']}>
                <Tab value="npm">
                    ```bash
                    cd my-copilot-app
                    npm run dev
                    ```
                </Tab>
                <Tab value="pnpm">
                    ```bash
                    cd my-copilot-app
                    pnpm dev
                    ```
                </Tab>
                <Tab value="yarn">
                    ```bash
                    cd my-copilot-app
                    yarn dev
                    ```
                </Tab>
                <Tab value="bun">
                    ```bash
                    cd my-copilot-app
                    bun dev
                    ```
                </Tab>
            </Tabs>
        </Step>
    </TailoredContentOption>
</TailoredContent>
<Step>
    ### 🎉 Start chatting!

    Your AI agent is now ready to use! Navigate to `localhost:3000` and try asking it some questions:

    ```
    Can you tell me a joke?
    ```

    ```
    Can you help me understand AI?
    ```

    ```
    What do you think about React?
    ```

    <Accordions className="mb-4">
        <Accordion title="Troubleshooting">
            - If you're having connection issues, try using `0.0.0.0` or `127.0.0.1` instead of `localhost`
            - Make sure your agent is running on port 8000
            - Check that your OpenAI API key is correctly set
            - Verify that the `@ag-ui/client` package is installed in your frontend
        </Accordion>
    </Accordions>

</Step>