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>
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.4inpackage.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:
- Ask for a brief explanation of ShadCN
- Render a simple generated line chart
- 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.