Vue

    If you don't have one already:

    ```bash
    npm create vue@latest my-copilot-app
    cd my-copilot-app
    npm install
    ```
</Step>
<Step>
    ### Install CopilotKit

    <Tabs groupId="package-manager" items={['npm', 'pnpm', 'yarn']}>
        <Tab value="npm">
            ```bash
            npm install @copilotkit/vue
            ```
        </Tab>
        <Tab value="pnpm">
            ```bash
            pnpm add @copilotkit/vue
            ```
        </Tab>
        <Tab value="yarn">
            ```bash
            yarn add @copilotkit/vue
            ```
        </Tab>
    </Tabs>
</Step>
<Step>
    ### Import the styles

    Import the package stylesheet once in your app entry. It's self-contained, so the chat renders without any other CSS.

    ```ts title="src/main.ts"
    import { createApp } from "vue";
    import App from "./App.vue";
    import "@copilotkit/vue/styles.css"; // [!code highlight]

    createApp(App).mount("#app");
    ```
</Step>
<Step>
    ### Connect to your agent

    Create an `HttpAgent` pointing at your agent endpoint, hand it to `CopilotKitProvider`, and drop in `CopilotChat`. Register the agent under the id `default` so the chat picks it up automatically.

    ```vue title="src/App.vue"
    <script setup lang="ts">
    import { CopilotKitProvider, CopilotChat, HttpAgent } from "@copilotkit/vue/v2"; // [!code highlight]

    // Point this at your AG-UI-compatible agent endpoint
    const agent = new HttpAgent({ url: "http://localhost:8000/" }); // [!code highlight]
    </script>

    <template>
      <!-- [!code highlight:5] -->
      <CopilotKitProvider :self-managed-agents="{ default: agent }">
        <div style="height: 100vh">
          <CopilotChat />
        </div>
      </CopilotKitProvider>
    </template>
    ```

    <Callout type="info" title="Pick your chat layout">
      `CopilotChat` is a full-height chat. Swap it for `CopilotSidebar` (a collapsible side panel) or `CopilotPopup` (a floating widget) for a different layout. They take the same props.
    </Callout>
</Step>
<Step>
    ### Run the app

    ```bash
    npm run dev
    ```

    Open the dev server URL (Vite prints it, usually `http://localhost:5173`), send a message, and you'll see it stream back from your agent.

    <Accordions className="mb-4">
        <Accordion title="Troubleshooting">
            - **Chat renders unstyled**: Make sure you imported `@copilotkit/vue/styles.css` in your app entry.
            - **No response from the agent**: Confirm the `url` points at a reachable AG-UI endpoint and that the agent is running. Check the browser network tab for the request.
            - **CORS errors**: A browser-direct connection needs the agent endpoint to allow your app's origin. Enable CORS on the agent, or put it behind the [CopilotKit runtime](/backend/copilot-runtime).
        </Accordion>
    </Accordions>
</Step>