AI Chat

A complete coding-agent chat screen, in the style of Cursor or Claude Code — an agent sidebar with quick actions and a repositories tree of recent chats, a chat thread with user/assistant turns and feedback actions, a pill composer with attach, model picker, mic and send, a status bar with branch, project, mode and context meter, and a fixed-width side panel switching between uncommitted changes with a live code view and a browser preview. The chat column flexes to fill wider breakpoints while the code panel keeps its fixed width.

Live preview

AI chat

New tab

boardui.com/templates/ai-chat

Both changes are in:

Sidebar PRO badge — swapped the blue gradient for the minimal treatment: grey bg-background-tertiary-default with text-text-secondary. Since ProBadge is only used in the docs sidebar (the gallery cards have their own tier styling), this was a safe global restyle.

One implementation note: the framework tabs needed a small client wrapper (app/installation/framework-tabs.tsx) because icon components can't be passed from a server page across the client boundary — the step content itself stays server-rendered so componentSource still works.

Verified: the page returns 200 on the dev server, the redirect works, and the full production build passes cleanly. Happy to push when you're ready.

57%

12 Uncomitted changes+156-23

boardui/app/components/button.tsx +74

New

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

Installation

AI Chat is a BoardUI Pro template, sold separately.

AI Chat is a Pro template.

Templates ship as a complete source package — every screen, component, and data file — sold separately with a BoardUI license — coming soon. Until then, you can explore the full live preview above.

What's included

The template ships as a complete source package: the agent sidebar (quick search, New agent / Automations / Customize actions, the repositories tree with recent-chat rows, time chips and the curved tree connector, and the plan card with Upgrade button), the chat container (breadcrumb header, message thread with feedback actions and inline link chips, the composer with model picker, mic and send, and the status bar with the context ring), the changes/code side panel, and every base component they depend on.