How to Use Vercel AI SDK for Full-Stack AI Apps

3. Install Project

Create a new Next.js app:

npx create-next-app@latest my-ai-app
cd my-ai-app

Install AI SDK:

npm install ai

Install provider package (example OpenAI):

npm install @ai-sdk/openai

The SDK package name is ai, while provider adapters are separate.

4. Setup Environment Variables

Create:

.env.local

Add:

OPENAI_API_KEY=your_key_here

Or for multiple providers:

ANTHROPIC_API_KEY=
GOOGLE_GENERATIVE_AI_API_KEY=

5. Create First AI API Route

Using Next.js App Router:

app/api/chat/route.ts

import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function POST(req: Request) {
  const { messages } = await req.json()
  const result = streamText({
    model: openai("gpt-4o-mini"),
    messages
  })
  return result.toDataStreamResponse()
}

6. Build Frontend Chat UI

Create:

app/page.tsx

"use client"

import { useChat } from "ai/react"
export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
  return (
    <main>
      {messages.map(m => (
        <div key={m.id}>
          <b>{m.role}:</b> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask something..."
        />
      </form>
    </main>
  )
}

This is one of the biggest productivity advantages of the SDK.

7. Add System Prompting

Improve app quality:

const result = streamText({
  model: openai("gpt-4o-mini"),
  system: "You are a helpful travel assistant.",
  messages
})

8. Structured Outputs (Very Powerful)

Instead of plain text, return JSON.

import { generateObject } from "ai"
import { z } from "zod"

const result = await generateObject({
  model: openai("gpt-4o-mini"),
  schema: z.object({
    title: z.string(),
    summary: z.string(),
    tags: z.array(z.string())
  }),
  prompt: "Summarize this article..."
})

9. Tool Calling (Function Calling)

Example weather tool:

tools: {
  weather: {
    description: "Get weather by city",
    parameters: z.object({
      city: z.string()
    }),
    execute: async ({ city }) => {
      return await getWeather(city)
    }
  }
}

Now the model can call backend functions.

Inject into Prompt

Get REIT monero’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Then:

system: `
Use this context:
${chunks}
`

11. Add Authentication

Protect premium features:

npm install @clerk/nextjs

12. Save Conversations

Create table:

messages
- id
- user_id
- role
- content
- created_at

15. Multi-Provider Switching

Huge AI SDK advantage:

model: openai(...)
model: anthropic(...)
model: google(...)

Same API shape, different providers.

This avoids rewriting backend code.

16. Deploy to Vercel

vercel

Then set env vars in dashboard.

18. Best Folder Structure

app/
  api/chat/route.ts
  page.tsx
lib/
  ai.ts
  db.ts
components/
  Chat.tsx
  Sidebar.tsx

Keep AI logic in lib/ai.ts

21. Best Real Workflow for 2026

If starting now:

MVP Stack

• Next.js
• Vercel AI SDK
• OpenAI GPT-4o-mini
• Supabase
• Clerk
• Vercel deploy

Launch in days.

22. Example Real Startup Ideas

• AI Resume Builder
• AI CRM Assistant
• AI Customer Support Bot
• AI Research Assistant
• AI Tutor
• AI Code Reviewer
• AI Proposal Writer

23. My Recommended Learning Order

1. generateText()
2. streamText()
3. useChat()
4. structured outputs
5. tools
6. RAG
7. auth
8. billing
9. deployment
10. observability