Loading pattern preview
Loading preview…
PatternsSDK API
Stream Text
Stream Text
Stream text responses from AI prompts in real-time. Includes character counting and live response rendering with useCompletion.
Loading pattern preview
Loading preview…
Problems solved
Technical challenges this implementation handles out of the box.
- Stream text tokens to the client in real time
- Render live completions with useCompletion
- Demonstrate AI SDK streaming text over an API route
Use cases
Products and workflows this pattern is designed to support.
- Streaming chat input demos
- Live writing assistants
- AI SDK streamText onboarding samples
- Character-counted prompt UIs
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in — then wire env vars and routes the same way.
- 1
Install from the preview toolbar
Copy the install command above and run it in your project — Pro patterns include a short-lived token.
- 2
Add environment variables to .env.local
OPENAI_API_KEY
- 3
Point client fetches at your API routes
Replace preview `/view/.../api/...` paths with `/api/...` in the installed files.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions for your product — Copy for AI in the toolbar helps seed that work.
- 5
Run your dev server and open the pattern route
Install dependencies if needed, then start the app and verify responses.
Environment variables
OPENAI_API_KEYGet key
Capabilities
AI SDK APIs
streamTextuseCompletionProviders
OpenAI
Files added
4 filesapp/page.tsxapp/layout.tsxcomponents/basic-stream-text-form.tsxapp/api/stream-text/route.ts
Dependencies
8 totalnpm packages
4AISDKlucide-reactNext.jsReact
Registry components
input-groupseparatoremptyalert
Critical files
stream-text/route.tsAPI route demonstrating the AI SDK streamText function with gateway pattern. Shows the streaming text pattern using toUIMessageStreamResponse() for real-time token delivery.
Requirements
- Complexity
- Beginner
