ai-blocks

AI-focused UI components for building AI frontend interfaces with .

What is WebLLM?

WebLLM is a browser AI integration protocol. It provides a unified API for accessing language models directly in the browser, enabling privacy-preserving AI features without server-side API calls.

What is ai-blocks?

This package provides 50+ ready-to-use AI components that work with WebLLM:

  • Chat interfaces - Simple chat, personas, voice chat, tool use
  • Text generation - Streaming, rewriting, expanding, autocomplete
  • Structured output - Sentiment analysis, entity extraction, JSON generation
  • Content tools - Summarization, translation, reading level adjustment
  • Forms - Smart validation, autofill, contact forms
  • E-commerce - Product search, reviews, size advisor
  • Education - Flashcards, quizzes, Socratic tutoring
  • Accessibility - Alt text, simplification, screen reader prep

All components can be installed via the shadcn CLI and work with the webllm npm package.

Installation

Option 1: shadcn CLI (recommended)

Install individual components via shadcn CLI:

bash
npx shadcn add @ai-blocks/simple-chatnpx shadcn add @ai-blocks/chat-with-tools
# Alternative: use full URL (also works)# npx shadcn@latest add https://webllm.org/r/simple-chat.json

Option 2: npm package

Install the package for direct imports:

bash
npm install ai-blocks webllm
tsx
import { SimpleChatDemo } from 'ai-blocks';// or individual importsimport { SimpleChatDemo } from 'ai-blocks/demos/SimpleChatDemo';

Note: Direct imports require a setup with path aliases configured (@/components/ui/*, @/lib/utils).

Browse Components

Browse all components at . Each component includes a live preview, full source code, and one-click install.

Requirements

  • React 18+
  • npm package
  • setup with path aliases (@/components/ui/*, @/lib/utils)
  • Tailwind CSS
  • for icons

Note: Currently only React with shadcn/ui is supported. Plain React and vanilla JS exports may be added in the future.

Links