Files
Benjamin Taylor b53edc0a6e docs: drop the hono dependency and the deprecated endpoint alias
The earlier commits in this PR taught `createCopilotEndpoint` paired with
`handle` from `hono/vercel`, and added `hono` to 20 install commands with a
callout explaining why readers must install it. Both were wrong, and the second
was a consequence of the first.

`createCopilotEndpoint` is a **deprecated alias**. This repo's own handler table
says so — `docs/backend/runtime-endpoints.mdx`:

    | Deprecated                          | Use instead                |
    | `createCopilotEndpoint`             | `createCopilotHonoHandler` |
    | `createCopilotEndpointSingleRoute`  | ... with mode: "single-route" |

`createCopilotRuntimeHandler` serves the same multi-route mode (it is the
default), returns a plain fetch handler, is not deprecated, and needs **no hono
at all**. So the route collapses to:

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

    export const GET = handler;
    export const POST = handler;

`hono` was therefore an artifact of the shape, not a requirement of the library.
The install lines and the callout are reverted; nothing tells readers to install
it any more.

## Verified with hono deleted, not merely absent from package.json

`examples/shadcn` converted to this shape, `hono` removed from its
`package.json`, and `node_modules/hono` deleted outright so a hoisted copy could
not mask the result:

    GET  /api/copilotkit/info              -> 200
    POST /api/copilotkit/agent/default/run -> 200, chat turn rendered
    tsc --noEmit / eslint / next build     -> clean
    next build route                       -> ƒ /api/copilotkit/[[...slug]]

The doctest sidecar drops `hono` too, so the CI gate now typechecks the
canonical snippet against `@copilotkit/runtime` alone — proof by construction
that the snippet needs nothing else.

    pnpm tsx scripts/doc-tests/run.ts   -> 2 passed, 0 failed
    showcase/shell-docs: typecheck      -> exit 0
    showcase/shell-docs: build          -> exit 0
    structural audit: 31/31 mdx files, fence + JSX identical to HEAD

## Also corrected

`docs/backend/custom-agent.mdx` repeated the same incorrect transport claim the
earlier commit fixed in four other places ("Both `<CopilotKit>` and
`<CopilotKitProvider>` negotiate the transport when the prop is omitted").
Corrected to match released behaviour.

## Left alone deliberately

`snippets/shared/backend/custom-agent.mdx` and `docs/backend/custom-agent.mdx`
still call `createCopilotEndpoint` in three fences each, as
`export default copilotEndpoint` — the Hono-app deployment pattern rather than a
Next.js route handler. That predates this PR, the documented replacement is
`createCopilotHonoHandler`, and I have not run that shape. Recorded as follow-up
rather than guessed at. (The two files have also drifted from each other, which
is a separate problem.)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-21 08:32:30 -05:00
..

CopilotKit x ShadCN

https://github.com/user-attachments/assets/f0059b04-ad68-4563-ad7a-e574c64e42d0

A compact Next.js example showing how to build a custom CopilotKit chat UI with ShadCN-style primitives. It uses useAgent with a CopilotKit Built-in Agent at /api/copilotkit, renders assistant messages with local chat components, and includes two frontend interactions:

  • A generated line chart rendered through useFrontendTool
  • A human-in-the-loop taco rain picker rendered through useHumanInTheLoop

The app intentionally keeps the chat prompt fixed to make the demo repeatable.

Prerequisites

  • Node.js 20 or newer
  • pnpm, via Corepack or your local install. The example declares pnpm@10.33.4 in package.json.
  • An OpenAI API key

Environment Variables

Create a local environment file:

cp .env.example .env.local

Then set:

OPENAI_API_KEY=sk-...
COPILOTKIT_MODEL=openai/gpt-5.4

OPENAI_API_KEY is required for the Built-in Agent. COPILOTKIT_MODEL is optional and defaults to openai/gpt-5.4 in app/api/copilotkit/route.ts.

Setup

From this example directory:

cd examples/shadcn
corepack enable
pnpm install
pnpm dev

Open the local URL printed by Next.js, usually http://localhost:3000.

Try It

Press the send button to run each queued example:

  1. Ask for a brief explanation of ShadCN
  2. Render a simple generated line chart
  3. Open the taco rain picker, choose an emoji, and make it rain

Use the reset button in the chat header to replay the sequence.

Available Checks

pnpm typecheck
pnpm lint
pnpm build

pnpm check-types is also available as an alias for pnpm typecheck.