DEV Community

Alex Spinov
Alex Spinov

Posted on

Vercel AI SDK Has a Free Framework — Build Streaming AI Chat Apps in 20 Lines of TypeScript

#ai #typescript #vercel #nextjs

Why Vercel AI SDK?

Streaming responses, tool calling, multi-model support — unified TypeScript API for OpenAI, Anthropic, Google, Mistral.

npm install ai @ai-sdk/openai
Enter fullscreen mode Exit fullscreen mode

API route:

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

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

Chat UI:

"use client"
import { useChat } from "ai/react"

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
  return (
    <form onSubmit={handleSubmit}>
      {messages.map(m => <div key={m.id}><b>{m.role}:</b> {m.content}</div>)}
      <input value={input} onChange={handleInputChange} />
    </form>
  )
}
Enter fullscreen mode Exit fullscreen mode

Multi-Model 

import { anthropic } from "@ai-sdk/anthropic"
streamText({ model: anthropic("claude-sonnet-4-20250514"), messages })
Enter fullscreen mode Exit fullscreen mode

Need to extract data from any website at scale? I build custom web scrapers — 77 production scrapers running on Apify Store. Email me at spinov001@gmail.com for a tailored solution.

Top comments (0)