Channels Overview

import { BuiltInAgent, convertInputToTanStackAI } from "@copilotkit/runtime/v2";
import { chat } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";

export const agent = new BuiltInAgent({
  type: "tanstack",
  factory: (ctx) => {
    const { messages, systemPrompts, tools } = convertInputToTanStackAI(ctx.input);
    return chat({
      adapter: openaiText("gpt-5.5"),
      messages,
      systemPrompts: ["You are a helpful support assistant.", ...systemPrompts],
      tools,
      abortController: ctx.abortController,
    });
  },
});

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@copilotkit/channels"
  }
}

import { createChannel } from "@copilotkit/channels";
import { CopilotRuntime, CopilotKitIntelligence } from "@copilotkit/runtime/v2";
import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node";
import { Message, Section, Actions, Button } from "@copilotkit/channels/ui";
import { agent } from "./agent";

// A managed channel: Intelligence hosts the transport, so no adapter.
const channel = createChannel({
  name: "support-bot",
  agent,
});

channel.onMessage(async ({ thread, message }) => {
  // let the agent answer
  await thread.runAgent({ prompt: message.text });

  // then post a card, and handle the click right here
  await thread.post(
    <Message>
      <Section>{"Did that answer your question?"}</Section>
      <Actions>
        <Button 
          onClick={async ({ thread }) => {
            await thread.post("Glad I could help!");
          }}
        >
          Yes, thanks
        </Button>
      </Actions>
    </Message>,
  );
});

// The runtime owns the channel's lifecycle. A CopilotKit Intelligence key runs
// any channel (free tier available); `ready()` activates it.
const apiUrl = process.env.COPILOTKIT_INTELLIGENCE_URL!;
const runtime = new CopilotRuntime({
  agents: {},
  intelligence: new CopilotKitIntelligence({
    apiUrl,
    wsUrl: apiUrl.replace(/^http/, "ws"),
    apiKey: process.env.COPILOTKIT_API_KEY!,
  }),
  identifyUser: () => ({ id: "demo-user", name: "Demo User" }),
  channels: [channel],
});

const listener = createCopilotNodeListener({ runtime });
await listener.channels?.ready();
// Mount the listener on an HTTP server to keep the process running (see the Quickstart).