feat(showcase): port 8 chat-UI features to built-in-agent

Adds beautiful-chat, cli-start (manifest), prebuilt-sidebar, prebuilt-popup,
chat-slots, chat-customization-css, headless-simple, and headless-complete
demos to the built-in-agent integration. All cells route through the single
in-process /api/copilotkit endpoint and target the 'default' agent.

The headless-complete tool renderers are adapted to the built-in-agent's
existing 'weather' and 'haiku' server tools, with HighlightNote retained as
a frontend-only useComponent example. Beautiful-chat is a simplified
two-pane polished starter rather than the full 4084 reference clone, since
the built-in-agent runner is intentionally minimal.

Author: AlemTuzlak

showcase/integrations/built-in-agent/manifest.yaml

@@ -22,7 +22,15 @@ interaction_modalities:
   - embedded
   - chat
 features:
+  - beautiful-chat
+  - cli-start
   - agentic-chat
+  - prebuilt-sidebar
+  - prebuilt-popup
+  - chat-slots
+  - chat-customization-css
+  - headless-simple
+  - headless-complete
   - hitl-in-chat
   - tool-rendering
   - gen-ui-tool-based
@@ -31,11 +39,88 @@ features:
   - shared-state-streaming
   - subagents
 demos:
+  - id: cli-start
+    name: CLI Start Command
+    description: Copy-paste command to clone the canonical starter
+    tags:
+      - chat-ui
+    command: "npx copilotkit@latest init --framework built-in-agent"
+  - id: beautiful-chat
+    name: Beautiful Chat
+    description: Polished starter chat with two-pane layout and pre-wired suggestions
+    tags:
+      - chat-ui
+    route: /demos/beautiful-chat
+    highlight:
+      - src/app/demos/beautiful-chat/page.tsx
+      - src/lib/factory/tanstack-factory.ts
+      - src/app/api/copilotkit/route.ts
   - id: agentic-chat
     name: Agentic Chat
     description: Natural conversation with frontend tool execution
     tags: [chat-ui]
     route: /demos/agentic-chat
+  - id: prebuilt-sidebar
+    name: "Pre-Built: Sidebar"
+    description: Docked sidebar chat via <CopilotSidebar />
+    tags:
+      - chat-ui
+    route: /demos/prebuilt-sidebar
+    highlight:
+      - src/app/demos/prebuilt-sidebar/page.tsx
+      - src/lib/factory/tanstack-factory.ts
+      - src/app/api/copilotkit/route.ts
+  - id: prebuilt-popup
+    name: "Pre-Built: Popup"
+    description: Floating popup chat via <CopilotPopup />
+    tags:
+      - chat-ui
+    route: /demos/prebuilt-popup
+    highlight:
+      - src/app/demos/prebuilt-popup/page.tsx
+      - src/lib/factory/tanstack-factory.ts
+      - src/app/api/copilotkit/route.ts
+  - id: chat-slots
+    name: Chat Customization (Slots)
+    description: Customize CopilotChat via its slot system
+    tags:
+      - chat-ui
+    route: /demos/chat-slots
+    highlight:
+      - src/app/demos/chat-slots/page.tsx
+      - src/app/demos/chat-slots/custom-welcome-screen.tsx
+      - src/app/demos/chat-slots/custom-assistant-message.tsx
+      - src/app/demos/chat-slots/custom-disclaimer.tsx
+  - id: chat-customization-css
+    name: Chat Customization (CSS)
+    description: Default CopilotChat re-themed via CopilotKitCSSProperties
+    tags:
+      - chat-ui
+    route: /demos/chat-customization-css
+    highlight:
+      - src/app/demos/chat-customization-css/page.tsx
+      - src/app/demos/chat-customization-css/theme.css
+  - id: headless-simple
+    name: Headless Chat (Simple)
+    description: Minimal custom chat surface built on useAgent
+    tags:
+      - chat-ui
+    route: /demos/headless-simple
+    highlight:
+      - src/app/demos/headless-simple/page.tsx
+      - src/lib/factory/tanstack-factory.ts
+      - src/app/api/copilotkit/route.ts
+  - id: headless-complete
+    name: Headless Chat (Complete)
+    description: Full chat implementation built from scratch on useAgent
+    tags:
+      - chat-ui
+    route: /demos/headless-complete
+    highlight:
+      - src/app/demos/headless-complete/page.tsx
+      - src/app/demos/headless-complete/use-rendered-messages.tsx
+      - src/app/demos/headless-complete/tool-renderers.tsx
+      - src/app/demos/headless-complete/message-list.tsx
   - id: hitl-in-chat
     name: In-Chat Human in the Loop
     description: User approves agent actions before execution

showcase/integrations/built-in-agent/src/app/demos/beautiful-chat/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+/**
+ * Beautiful Chat (built-in-agent flavor) — a polished starter chat that
+ * showcases CopilotChat dropped into a clean two-pane layout, with a side
+ * canvas, theme variables, and pre-wired suggestions.
+ *
+ * The langgraph-python flagship version uses an extensive 4084 component tree
+ * (A2UI catalog, todo canvas, declarative generative UI). This integration
+ * keeps the same conceptual layout (chat on the right, content on the left)
+ * but stays minimal — the built-in-agent runner is intentionally bare, and
+ * this cell is the polished starter showcase.
+ */
+
+import React from "react";
+import {
+  CopilotKitProvider,
+  CopilotChat,
+  useConfigureSuggestions,
+} from "@copilotkit/react-core/v2";
+
+export default function BeautifulChatPage() {
+  return (
+    <CopilotKitProvider runtimeUrl="/api/copilotkit" useSingleEndpoint>
+      <div className="grid grid-cols-1 md:grid-cols-[1fr_420px] h-screen w-full bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-slate-950 dark:to-indigo-950">
+        <Canvas />
+        <aside className="border-l border-slate-200 dark:border-slate-800 bg-white/60 dark:bg-slate-900/60 backdrop-blur flex flex-col">
+          <Suggestions />
+          <CopilotChat
+            agentId="default"
+            className="flex-1"
+            input={{ disclaimer: () => null, className: "pb-6" }}
+          />
+        </aside>
+      </div>
+    </CopilotKitProvider>
+  );
+}
+
+function Canvas() {
+  return (
+    <main className="hidden md:flex flex-col p-12 overflow-y-auto">
+      <header className="mb-8">
+        <span className="inline-block rounded-full bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200 px-3 py-1 text-xs font-semibold uppercase tracking-wider">
+          Starter
+        </span>
+        <h1 className="mt-3 text-4xl font-bold text-slate-900 dark:text-slate-50">
+          Beautiful Chat
+        </h1>
+        <p className="mt-2 text-slate-600 dark:text-slate-400 max-w-prose">
+          A polished starter layout: the built-in CopilotChat dropped onto a
+          two-pane canvas, with suggestions pre-wired and the disclaimer slot
+          customized away. Everything is theme-aware and responsive.
+        </p>
+      </header>
+      <div className="grid grid-cols-2 gap-4 max-w-3xl">
+        <Card title="In-process runner">
+          The CopilotKit runtime runs inside the Next.js route handler — there
+          is no separate agent server.
+        </Card>
+        <Card title="TanStack AI">
+          Backend tools defined with <code>toolDefinition()</code> stream
+          through the agent factory.
+        </Card>
+        <Card title="Tailwind theme">
+          Colors come from the global CopilotKit CSS variables; flip the page
+          to dark mode and the chat follows.
+        </Card>
+        <Card title="Drop-in primitives">
+          <code>&lt;CopilotChat /&gt;</code> ships with messages, input,
+          suggestions, and disclaimer slots out of the box.
+        </Card>
+      </div>
+    </main>
+  );
+}
+
+function Card({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-5 shadow-sm">
+      <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+        {title}
+      </h3>
+      <p className="mt-1 text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
+        {children}
+      </p>
+    </div>
+  );
+}
+
+function Suggestions() {
+  useConfigureSuggestions({
+    suggestions: [
+      { title: "Say hi", message: "Say hi!" },
+      {
+        title: "Weather check",
+        message: "What's the weather in San Francisco?",
+      },
+      { title: "Compose a haiku", message: "Write a haiku about coffee." },
+    ],
+    available: "always",
+  });
+  return null;
+}

showcase/integrations/built-in-agent/src/app/demos/chat-customization-css/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+// Chat Customization (CSS) — all theming lives in theme.css, scoped to the
+// `.chat-css-demo-scope` wrapper. The page stays intentionally minimal;
+// only <CopilotChat /> is visibly re-themed.
+//
+// https://docs.copilotkit.ai/custom-look-and-feel/customize-built-in-ui-components
+
+import React from "react";
+import { CopilotKitProvider, CopilotChat } from "@copilotkit/react-core/v2";
+// @region[theme-css-import]
+import "./theme.css";
+// @endregion[theme-css-import]
+
+export default function ChatCustomizationCssDemo() {
+  return (
+    <CopilotKitProvider runtimeUrl="/api/copilotkit" useSingleEndpoint>
+      <div className="flex justify-center items-center h-screen w-full">
+        <div className="chat-css-demo-scope h-full w-full max-w-4xl">
+          <CopilotChat agentId="default" className="h-full rounded-2xl" />
+        </div>
+      </div>
+    </CopilotKitProvider>
+  );
+}

showcase/integrations/built-in-agent/src/app/demos/chat-customization-css/theme.css

@@ -0,0 +1,102 @@
+/* Scoped theme for the chat-customization-css demo.
+ * All selectors are prefixed with `.chat-css-demo-scope` so they do not
+ * leak out and affect the rest of the showcase app.
+ *
+ * Targets the CopilotKit built-in classes documented at
+ * https://docs.copilotkit.ai/custom-look-and-feel/customize-built-in-ui-components
+ */
+
+/* @region[css-variables] */
+/* CopilotKit CSS variable overrides (accent colors, etc.) */
+.chat-css-demo-scope {
+  --copilot-kit-primary-color: #ff006e;
+  --copilot-kit-contrast-color: #ffffff;
+  --copilot-kit-background-color: #fff8f0;
+  --copilot-kit-input-background-color: #fef3c7;
+  --copilot-kit-secondary-color: #fde047;
+  --copilot-kit-secondary-contrast-color: #2c1810;
+  --copilot-kit-separator-color: #ff006e;
+  --copilot-kit-muted-color: #c2185b;
+}
+/* @endregion[css-variables] */
+
+/* Messages container – swap the font for the entire chat */
+.chat-css-demo-scope .copilotKitMessages {
+  font-family: "Georgia", "Cambria", "Times New Roman", serif;
+  background-color: #fff8f0;
+  color: #2c1810;
+  padding: 1.5rem 0;
+}
+
+/* User message bubble – hot pink, bold white serif text, large */
+.chat-css-demo-scope .copilotKitMessage.copilotKitUserMessage {
+  background: linear-gradient(135deg, #ff006e 0%, #c2185b 100%);
+  color: #ffffff;
+  font-family: "Georgia", "Cambria", "Times New Roman", serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding: 14px 20px;
+  border-radius: 22px 22px 4px 22px;
+  box-shadow: 0 6px 16px rgba(255, 0, 110, 0.35);
+  border: 2px solid #ff6fa5;
+  letter-spacing: 0.01em;
+}
+
+/* Assistant message bubble – amber, monospace, boxy, dark text */
+.chat-css-demo-scope .copilotKitMessage.copilotKitAssistantMessage {
+  background: #fde047;
+  color: #1e1b4b;
+  font-family:
+    "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
+  font-size: 1rem;
+  padding: 16px 20px;
+  border-radius: 4px 22px 22px 22px;
+  border: 2px solid #1e1b4b;
+  box-shadow: 4px 4px 0 #1e1b4b;
+  max-width: 80%;
+  margin-right: auto;
+  margin-bottom: 1rem;
+}
+
+/* Make markdown inside assistant bubble inherit our theme */
+.chat-css-demo-scope
+  .copilotKitMessage.copilotKitAssistantMessage
+  .copilotKitMarkdown,
+.chat-css-demo-scope
+  .copilotKitMessage.copilotKitAssistantMessage
+  .copilotKitMarkdown
+  p,
+.chat-css-demo-scope .copilotKitMessage.copilotKitAssistantMessage p {
+  color: #1e1b4b;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Input area – themed border and font */
+.chat-css-demo-scope .copilotKitInput {
+  font-family: "Georgia", "Cambria", "Times New Roman", serif;
+  background-color: #fef3c7;
+  border: 3px dashed #ff006e;
+  border-radius: 18px;
+  padding: 16px 18px;
+  min-height: 80px;
+}
+
+.chat-css-demo-scope .copilotKitInput > textarea {
+  font-family: "Georgia", "Cambria", "Times New Roman", serif;
+  font-size: 1.1rem;
+  color: #2c1810;
+}
+
+.chat-css-demo-scope .copilotKitInput > textarea::placeholder {
+  color: #c2185b;
+  font-style: italic;
+}
+
+.chat-css-demo-scope .copilotKitInputContainer {
+  background: #fff8f0;
+}
+
+.chat-css-demo-scope .copilotKitChat {
+  background-color: #fff8f0;
+}

showcase/integrations/built-in-agent/src/app/demos/chat-slots/custom-assistant-message.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+import { CopilotChatAssistantMessage } from "@copilotkit/react-core/v2";
+import type { CopilotChatAssistantMessageProps } from "@copilotkit/react-core/v2";
+
+// Custom assistantMessage sub-slot of messageView — wraps the default assistant
+// message in a visibly tinted card with a corner "slot" badge, proving the slot
+// override is active during the in-chat message flow (not just the welcome screen).
+export function CustomAssistantMessage(
+  props: CopilotChatAssistantMessageProps,
+) {
+  return (
+    <div
+      data-testid="custom-assistant-message"
+      className="relative rounded-xl border border-indigo-200 bg-indigo-50/60 dark:bg-indigo-950/40 dark:border-indigo-800 p-3 my-3"
+    >
+      <span className="absolute -top-2 -left-2 inline-block rounded-full bg-indigo-600 text-white text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 shadow">
+        slot
+      </span>
+      <CopilotChatAssistantMessage {...props} />
+    </div>
+  );
+}

showcase/integrations/built-in-agent/src/app/demos/chat-slots/custom-disclaimer.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+
+// Custom disclaimer sub-slot of the input — visibly tagged so reviewers can
+// tell the slot is in use even once the welcome screen is dismissed.
+export function CustomDisclaimer(props: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      data-testid="custom-disclaimer"
+      className="text-xs text-center text-muted-foreground py-2"
+    >
+      <span className="inline-block rounded bg-indigo-100 text-indigo-700 px-2 py-0.5 mr-2 font-semibold">
+        slot
+      </span>
+      Custom disclaimer injected via <code>input.disclaimer</code>.
+    </div>
+  );
+}