ai-ui-patterns

SKILL.md

AI UI Patterns

Table of Contents

When to Use

Instructions

Details

Source

Building AI-powered interfaces – from chatbots to intelligent assistants – requires careful integration of backend AI services with reactive UI components. In this chapter, we explore design patterns in React for such interfaces, focusing on two implementations: a plain React app (using Vite) and a Next.js app. We'll use OpenAI's API (via the Vercel AI SDK) as our AI engine, and TailwindCSS for styling. Key topics include prompt management, streaming responses, input debouncing, error handling, and how these patterns differ between Vite and Next.js. We also highlight reusable component patterns and Vercel's AI UI components (AI Elements) for building polished chat UIs.

When to Use

Use this when building conversational AI interfaces that stream responses from LLMs

This is helpful for integrating OpenAI, Anthropic, or other AI providers into React applications

Use this when you need patterns for prompt management, streaming, error handling, and AI-specific UI

Instructions