TypeScript Next.js AI SDK 5 Starter

Minimal starter for AI apps with Next.js 15, TypeScript, AI SDK 5, shadcn/ui, and AI Elements.

Features

• Clean chat interface with GPT-5
• AI Elements components (Conversation, Message, PromptInput)
• shadcn/ui design system
• Non-streaming responses
• TypeScript ready

Setup

1. Install dependencies:

   pnpm install

2. Create .env.local file:

   echo "OPENAI_API_KEY=your_openai_api_key_here" > .env.local

3. Start development:

   pnpm dev

Open http://localhost:3000 to chat with the AI assistant.

Resources

• Next.js 15 - React framework
• AI SDK 5 - AI integration toolkit
• AI Elements - Pre-built AI components
• shadcn/ui - Component library
• Tailwind CSS - Utility-first CSS
• TypeScript - Type-safe JavaScript

Architecture & Data Flow

+-------------------------+            +-----------------------------+            +---------------------------+
|       Browser UI        |            |       Next.js API Route     |            |         OpenAI API        |
| `ChatAssistant`         |            | `app/api/chat/route.ts`     |            |  model: openai('gpt-5')   |
|  - AI Elements UI       |            |  - validate input           |            |                           |
|  - PromptInput submit   |            |  - call AI SDK `generateText`|           |                           |
+-------------------------+            +-----------------------------+            +---------------------------+
            |                                         |                                        |
            | 1) User types message                   |                                        |
            |---------------------------------------->|                                        |
            |  POST /api/chat { message }             |                                        |
            |                                         | 2) generateText({ model, prompt })     |
            |                                         |--------------------------------------->|
            |                                         |                                        |
            |                                         |                3) { text }             |
            |                                         |<---------------------------------------|
            | 4) JSON { response: text }              |                                        |
            |<----------------------------------------|                                        |
            | 5) Render assistant message             |                                        |
            v                                         v                                        v

Env: `OPENAI_API_KEY` (server-side) → used by AI SDK OpenAI client
Errors: non-200 from API → UI shows fallback "Sorry, I encountered an error."