AI Chat Bootstrap

AI Chat Bootstrap provides React components, hooks, and design tokens to build AI chat UIs quickly. It layers cleanly on top of the Vercel AI SDK and AI SDK Elements, adding opinionated primitives for messages, commands, contextual tools, suggestions, and theming.

If you just want to see code first, jump to the Basic Chat example.

Install

pnpm add ai-chat-bootstrap react react-dom ai @ai-sdk/react @ai-sdk/openai zod
# or
npm install ai-chat-bootstrap react react-dom ai @ai-sdk/react @ai-sdk/openai zod

Required peers: react, react-dom, ai, @ai-sdk/react. Add one provider package (e.g. @ai-sdk/openai, @ai-sdk/azure, etc.). zod strongly recommended for tools/commands.

Upgrading from <=0.2.x? Add ai @ai-sdk/react explicitly—they’re now peers.

Styling Options

There are two mutually exclusive ways to consume styles. Pick one:

1. Zero‑config (fastest)

Drop in our tokens first (so CSS variables are defined), then optionally your own global utility layers, then our minimal utility slice (ai-chat.css).

/* globals.css */
@import "ai-chat-bootstrap/tokens.css"; /* tokens & minimal globals */
@import "tailwindcss";                  /* (optional) your existing base/util layers */
@import "tw-animate-css";               /* (optional) any other libs */
@import "ai-chat-bootstrap/ai-chat.css"; /* curated utility subset used by the library */

No scanning, safelisting, or Tailwind config changes required. The shipped slice:

• Has preflight disabled (won’t stomp your base styles)
• Includes only utilities referenced by the library
• Avoids CSS bloat in multi‑app environments

To theme, override CSS custom properties after importing tokens.css.

:root {
	--radius: 0.75rem;
	--primary: oklch(0.58 0.2 264);
	--primary-foreground: oklch(0.985 0 0);
}
 
.dark {
	--background: oklch(0.16 0 0);
	--foreground: oklch(0.97 0 0);
}

2. Tailwind‑native (advanced / maximum dedupe)

Let your Tailwind build emit utilities (enables cross‑library merging / purging). In this mode do NOT import ai-chat.css—instead add our preset and ensure both your app and the library source appear in content.

// tailwind.config.ts
import preset from "ai-chat-bootstrap/tailwind.preset";
 
export default {
	presets: [preset],
	content: [
		"./src/**/*.{js,ts,jsx,tsx}",
		// If in a monorepo, include the library source so Tailwind sees usage
		"../../packages/ai-chat-bootstrap/lib/**/*.{js,ts,jsx,tsx}",
	],
};

Start with Zero‑config. Only switch if you need utility deduplication at scale or centralized Tailwind tuning.

Quick Start

import React from "react";
import { ChatContainer, useAIChat } from "ai-chat-bootstrap";
 
export function App() {
  const chat = useAIChat({
    api: "/api/chat",
    systemPrompt: "You are a helpful AI assistant.",
  });
 
  return (
    <ChatContainer
      chat={chat}
      header={{ title: "AI Assistant", subtitle: "Connected to AI" }}
      ui={{ placeholder: "Ask me anything..." }}
    />
  );
}

For a full end‑to‑end example (including API route + streaming) see Basic Chat.

Features

• Chat container + composable message primitives
• Slash command system with parameter schemas (zod)
• Frontend tool registration (client‑side function invocation)
• Context sharing hooks (inject dynamic UI/app state into model context)
• Focus / selection tracking for contextual relevance
• AI suggestion queue + UI components
• Structured message parts: reasoning, tool calls, sources, code blocks
• Tailwind + shadcn/ui compatible base components

CSS & Theming

• tokens.css: design tokens + minimal global fixes
• ai-chat.css: optional precompiled library utility slice (only used classes, no preflight)
• Tailwind preset: maps tokens into Tailwind theme when compiling yourself
• Theme by overriding CSS variables (--background, --foreground, --primary, etc.)

Choosing an approach

Tree‑shaking

In Tailwind‑native mode unused utilities are removed by your Tailwind build. In Zero‑config mode we already ship a pre‑shaken subset containing only what components require.

Peer Dependencies

Provide react and react-dom (version 18+). The Vercel AI SDK + model provider packages are required only for live AI streaming/inference features—not for purely static UI rendering.

Repository & Issues

Source & issues live at: https://github.com/knifeyspoony/ai-chat-bootstrap 

Changelog

See the monorepo root CHANGELOG for release notes.

License

MIT © Contributors

Questions or missing details? Open an issue in the repo.