Connect Intelligence in 5 minutes

Sign in from your project root. Then select the project that will store your threads.

```bash title="Terminal"
npx copilotkit@latest login
npx copilotkit@latest project select
```

`project select` writes a project API key to `.env` as `CPK_INTELLIGENCE_API_KEY`. Keep this key on the server.

Construct the Intelligence client. Then pass it and your existing user lookup to `CopilotRuntime`.

```ts title="Your CopilotKit runtime"
import {
  CopilotKitIntelligence,
  CopilotRuntime,
} from "@copilotkit/runtime/v2";

// Create the Intelligence client with your project API key. Keep this key on the server.
const intelligence = new CopilotKitIntelligence({
  apiKey: process.env.CPK_INTELLIGENCE_API_KEY!,
});

const runtime = new CopilotRuntime({
  agents,
  // Pass the Intelligence client to the runtime
  intelligence,
  // Identify the user from a verified session or token
  identifyUser: async (request) => {
    const user = await authenticateApplicationUser(request);
    if (!user) throw new Error("Unauthorized");
    return { id: user.id, name: user.name };
  },
});
```

<Callout type="info" title="Use your existing authentication">
  `authenticateApplicationUser` represents your server-side authentication function. It must return the user from a verified session or token. The Runtime requires `identifyUser` to associate web threads with that user.
</Callout>

If no trusted user identity exists, add authentication before you continue. A fixed identity is suitable only for a local, single-user demo.

<Callout type="warn" title="Protect every Runtime route before production">
  `identifyUser` names the caller, but it is not an authentication gate. Use the handler's `onRequest` hook to reject unauthenticated requests. You must also enforce thread ownership for `threads/events`, `threads/state`, and `agent/stop`. Follow the [thread authorization guide](/auth#thread-authorization) for the complete pattern.
</Callout>

Use the multi-route handler. Mount the complete runtime subtree. Export `GET`, `POST`, `PATCH`, and `DELETE`.

```ts title="app/api/copilotkit/[[...slug]]/route.ts"
import { createCopilotRuntimeHandler } from "@copilotkit/runtime/v2";

const handler = createCopilotRuntimeHandler({
  runtime,
  basePath: "/api/copilotkit",
});

export const GET = handler;
export const POST = handler;
export const PATCH = handler;
export const DELETE = handler;
```

This example uses a Next.js catch-all route, but the fetch-based handler works with any server that uses standard Web `Request` and `Response` objects.
For another server, use the [runtime adapter guide](/runtime-server-adapter#multi-route-vs-single-route).

Point your frontend provider at the runtime base path.

<FrontendOnly frontend="react">
  Add the runtimeUrl prop to your `CopilotKitProvider`. The provider uses the multi-route transport to send messages, events, and state to the runtime.

  ```tsx title="Your CopilotKit provider"
  import { CopilotKitProvider } from "@copilotkit/react-core/v2";

  export function App() {
    return (
      <CopilotKitProvider runtimeUrl="/api/copilotkit">
        <YourApp />
      </CopilotKitProvider>
    );
  }
  ```
</FrontendOnly>

<FrontendOnly frontend="angular">
  Point `provideCopilotKit` at the runtime base path.

  ```ts title="src/app/app.config.ts"
  import { ApplicationConfig } from "@angular/core";
  import { provideCopilotKit } from "@copilotkit/angular";

  export const appConfig: ApplicationConfig = {
    providers: [
      provideCopilotKit({
        runtimeUrl: "http://localhost:8200/api/copilotkit",
      }),
    ],
  };
  ```
</FrontendOnly>

<FrontendOnly frontend="vue">
  Point `CopilotKitProvider` at the runtime base path and wrap your existing app.

  ```vue title="src/App.vue"
  <script setup lang="ts">
  import { CopilotKitProvider } from "@copilotkit/vue/v2";
  import YourApp from "./YourApp.vue";
  </script>

  <template>
    <CopilotKitProvider runtime-url="http://localhost:8200/api/copilotkit">
      <YourApp />
    </CopilotKitProvider>
  </template>
  ```
</FrontendOnly>

<FrontendOnly frontend="react-native">
  Point `CopilotKitProvider` at a runtime URL that the simulator or device can reach.

  ```tsx title="App.tsx"
  import { CopilotKitProvider } from "@copilotkit/react-native/headless";
  import { Platform } from "react-native";
  import { AppContent } from "./src/AppContent";

  const runtimeUrl =
    Platform.OS === "android"
      ? "http://10.0.2.2:8200/api/copilotkit"
      : "http://localhost:8200/api/copilotkit";

  export default function App() {
    return (
      <CopilotKitProvider runtimeUrl={runtimeUrl}>
        <AppContent />
      </CopilotKitProvider>
    );
  }
  ```

  On a physical device, replace the host with your development machine's LAN IP address.
</FrontendOnly>

<FrontendOnly frontend="react">
  Start your app and open it on localhost. Click the Inspector button (Kite icon) in the corner of the app.

  1. Open **Home**. Make sure that **Intelligence connected** appears beside **What's going on**.
  2. Return to your app and send one message to create a thread.
  3. Open **Threads** in Inspector. Your new thread must appear in the list.
  4. Open the thread. Make sure that **Messages** contains the message that you sent.

  If Home does not show **Intelligence connected**, or Threads is locked, the setup is incomplete. Follow the action shown in Inspector or review the [Inspector setup states](/inspector#project-context-and-usage).
</FrontendOnly>

<FrontendOnly frontend="vue">
  Start your app and open it on localhost. Click the Inspector button (Kite icon) in the corner of the app.

  1. Open **Home**. Make sure that **Intelligence connected** appears beside **What's going on**.
  2. Return to your app and send one message to create a thread.
  3. Open **Threads** in Inspector. Your new thread must appear in the list.
  4. Open the thread. Make sure that **Messages** contains the message that you sent.

  If Home does not show **Intelligence connected**, or Threads is locked, the setup is incomplete. Follow the action shown in Inspector or review the [Inspector setup states](/inspector#project-context-and-usage).
</FrontendOnly>

<FrontendOnly frontend="angular">
  Start your app and open it on localhost. Click the Inspector button (Kite icon) in the corner of the app.

  1. Open **Home**. Make sure that **Intelligence connected** appears beside **What's going on**.
  2. Return to your app and send one message to create a thread.
  3. Open **Threads** in Inspector. Your new thread must appear in the list.
  4. Open the thread. Make sure that **Messages** contains the message that you sent.

  If Home does not show **Intelligence connected**, or Threads is locked, the setup is incomplete. Follow the action shown in Inspector or review the [Inspector setup states](/inspector#project-context-and-usage).
</FrontendOnly>

<FrontendOnly frontend="react-native">
  React Native does not include the browser Inspector. Start your app and send one message to create a thread. Then open the selected project in [CopilotKit Intelligence](https://dashboard.operations.copilotkit.ai/), open the new thread, and confirm that its message history contains your message.
</FrontendOnly>