Introduction

Next

React components for building chat interfaces, tool calling, and streaming AI responses with AI SDK Agents. Copy-paste code for OpenAI, Claude, and Gemini applications.

Copy-paste React components for building production AI features. Get chat interfaces, tool calling patterns, and streaming responses. Skip the boilerplate and ship faster with TypeScript and Next.js.

Built on top of:

  • Vercel AI SDK - Streaming and tool calling with OpenAI, Claude, and Gemini
  • shadcn/ui - Customizable components with Tailwind CSS
  • React 19 & Next.js 15 - Server Components and App Router patterns

What You Get

Complete Blocks

Copy-paste applications and patterns:

  • Chat interfaces with GPT-4, Claude, or Gemini streaming
  • Tool calling examples using Firecrawl, Exa, and custom functions
  • Agent patterns for multi-step workflows
  • Marketing pages with hero sections and pricing tables
  • Data visualization components like tables and charts

UI Components

Pre-built React components:

  • Streaming chat with markdown and code highlighting
  • Message components with loading states
  • Tool execution UI showing real-time progress
  • File upload for images and documents
  • Error boundaries with retry logic

Getting Started

Three steps to add AI features to your Next.js app:

Set up shadcn/ui

Initialize shadcn/ui in your Next.js project:

pnpm dlx shadcn@latest init

Install AI dependencies

Add Vercel AI SDK and your preferred AI provider:

pnpm add ai @ai-sdk/openai
npx shadcn@latest add ai-elements

Works with @ai-sdk/openai, @ai-sdk/anthropic, or @ai-sdk/google depending on which provider you use.

View AI Elements docs →

Browse and copy components

Pick a block, copy the code, paste it into your app:

  • Chat interfaces - Streaming with GPT-4 or Claude
  • Tool calling - Search, scrape, and process data
  • Multi-step agents - Complex workflows with orchestration
  • Marketing pages - Landing page components

Browse all blocks →