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

Code

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: (

Agentic chat

update our color tokens for dark mode and add a reusable theme toggle to the registry. run lint and a production build when you're done.

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.

Dark mode ready - this template follows BoardUI semantic tokens automatically. Set up theme switching.

Pro access

AI Chat is a Pro template.

Your BoardUI Pro license unlocks this template and all of its source files. Activate your license once, then install it directly into your project with the CLI.

Activate your license

Use the key from your Lemon Squeezy purchase email. You only need to do this once per machine.

npx boardui@latest login YOUR_LICENSE_KEY

Install the template

The CLI copies the source and resolves every BoardUI and npm dependency for you.

npx boardui@latest add template-ai-chat

This template is included in BoardUI Pro

Get BoardUI Pro now and install it right away.

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.