ai-ui-patterns
Build responsive AI chats with reusable React components.
What it does
Guides the implementation of React AI interfaces with streaming conversations, secure backend calls, and reusable UI components.
When to use it
Use when building conversational AI interfaces with streamed responses or needing patterns for prompts, streaming, and error handling.
How to use it
It changes how the agent builds React AI interfaces by prescribing conversation hooks, server-side credentials, streaming, and decoupled components.
What you provide
- An existing project
Uses
What you need · 3
The interfaces are implemented in React, using either a Vite project or a Next.js application.
The demonstrated implementation uses the ai package for React hooks and server utilities, with installation included in setup.
Access · 2
This skill
OpenAI dashboard
Retrieves your OpenAI API key
ai
Installs the Vercel AI SDK