The launcher floats over a customer's page, and its border only earns its
place against a dark one -- so reviewing this branch needs a dark host page,
and the lab had no way to produce one.
Copied from `examples/v2/react/demo` rather than invented: the host owns a
theme state, and `CopilotChat` gets `className="dark"`, which is what makes
the package swap its own variable set. My first attempt stripped every
background instead, which is why the chat bubble, the send button, the
toolbar's on/off states and the error banner all vanished into one flat
grey -- the chat paints its own surfaces and has to be told, not undressed.
The colours are the demo's, by another route: it writes the oklch literals
that CopilotKit's variables use, and those are Tailwind's neutral steps --
`neutral-950` is `oklch(0.145 0 0)`, `neutral-50` is `oklch(0.985 0 0)`,
`neutral-800` is `oklch(0.269 0 0)`. Measured identical on the running lab.
`@custom-variant dark (&:is(.dark *))` is needed because Tailwind v4 points
`dark:` at `prefers-color-scheme` by default, so the toggle would have been
ignored in favour of the OS. Same declaration the package uses for its own
sheet.
The toggle sits top left, where the react demo puts it. Top right is where
the launcher floats.
Add a new example app at examples/v2/react-router demonstrating CopilotKit
with React Router v7 (SSR/framework mode) and TanStack AI as the default agent.
- React Router v7 SSR with Hono server via react-router-hono-server
- CopilotKit runtime mounted as a Hono route on the same server
- TanStackAIAgent: thin AbstractAgent wrapper that accepts a chat() factory
callback, giving users full type safety over TanStack AI's adapter/model config
- Proper AG-UI event normalization bridging TanStack AI's event format to
what CopilotKit's @ag-ui/client pipeline expects
- Full-page CopilotChat UI with Tailwind CSS v4
Lukas Moschitz