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

streamTextconvertToModelMessagescreateUIMessageStreamResponseuseChat

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 ExecutionConnect AI agents with external APIs and services. Demonstrates tool calling with weather data, error handling, and visual feedback.Oct 2025
Tool ApprovalDemonstrate tool execution with user confirmation. Includes approval workflows, confirmation UI, and state management for safe AI operations.Oct 2025
Sources & CitationsChat with source citations using Perplexity's Sonar model. Answers include clickable links for fact-checking.Oct 2025
ReasoningChat that shows AI's step-by-step reasoning. Includes decision trees, logical breakdowns, and explanatory tooltips.Oct 2025