Back to Prompts
generation

AI Chat Interface with AI SDK

Build a streaming chat interface using Vercel AI SDK with OpenAI

Prompt Template

I want to build a streaming chat interface using AI SDK with OpenAI.

Supporting guidance: https://ai-sdk.dev/docs/getting-started/nextjs-app-router

Step 1: Build a chat page for me to test the streaming functionality
Step 2: Deploy migration files and update types

Functionality:
1. React markdown for formatting messages
2. Create and delete chats

Design:
1. Use vh 100% layout with a fixed sidebar to load messages
2. Ensure the scrollArea is too vh as well
3. Override the parent layout to achieve a full screen design

What I've done so far:
1: Added correct OPENAI_API_KEY to env.local

Tags

ai-sdkchatopenaistreaming

Skill Level

intermediate