AI Chat Widget

React TypeScript AI Vercel AI SDK

AI Chat Widget

Overview

A drop-in AI chat widget for any React application. No CSS imports needed — styles are auto-injected. Built on the Vercel AI SDK v6 with full TypeScript support.

Features

  • Zero-config styles — CSS is embedded and auto-injected. No manual imports.
  • Themeable — Override 10 CSS custom properties to match any brand.
  • Markdown rendering — AI responses render rich Markdown with proper typography.
  • Streaming — Real-time streaming responses with loading indicators.
  • Persistence — Messages survive page reloads via localStorage.
  • Any provider — Works with OpenAI, Groq, Together, or any compatible API.
  • TypeScript-first — Full type safety with exported config types.

Tech Stack

  • Framework: React 19
  • Language: TypeScript
  • AI: Vercel AI SDK v6
  • Provider: OpenAI-compatible (Groq, Together, etc.)
  • Markdown: react-markdown
  • Icons: lucide-react
  • Build: tsup
  • Tests: Vitest + Testing Library (19 tests)