Message Components

Pattern

Basic Chat Interface

Chat interface with streaming responses and message history. Includes typing indicators and message status tracking.

BeginnerOct 2025View the full pattern on desktop
Basic Chat Interface preview

Problems solved

  • Stream chat responses with message history in the UI
  • Switch between a user-selected model and Perplexity Sonar for web search
  • Enable source and reasoning parts in the UI message stream

Use cases

  • Basic AI chat products
  • Model-picker chat experiences
  • Search-backed assistant demos
  • AI Elements conversation shells

AI SDK APIs

streamTextconvertToModelMessages

Tags

aichatai-sdkopenai

Requirements

Node.js
24+
Memory
512MB
Other
  • OpenAI API key

Environment variables

External services

openai

Ready to use?

View the full interactive pattern with live preview and copy the source code.

View the pattern on desktop

Related patterns

Tool Execution preview

Tool Execution

Connect AI agents with external APIs and services. Demonstrates tool calling with weather data, error handling, and visual feedback.

aitools+4
View pattern →
Queue preview

Queue

Queue management assistant using AI agents. Generate structured queues with messages, todos, and attachments through conversation.

aiqueue-management+6
View pattern →
Image Generation Demo preview

Image Generation Demo

Generate images using DALL-E 3 with prompt optimization and style presets. Includes real-time preview, downloads, and batch processing.

aiimage-generation+3
View pattern →
Tool Approval preview

Tool Approval

Demonstrate tool execution with user confirmation. Includes approval workflows, confirmation UI, and state management for safe AI operations.

aitool-approval+6
View pattern →