Back to articles
Vercel AI SDK Has a Free API — Streaming AI in React Made Simple

Vercel AI SDK Has a Free API — Streaming AI in React Made Simple

via Dev.to ReactAlex Spinov

The Vercel AI SDK is the easiest way to build AI-powered streaming interfaces in React, Next.js, Svelte, and Vue. One hook, multiple providers — OpenAI, Anthropic, Google, Ollama. Quick Start npm install ai @ai-sdk/openai Next.js Chat (App Router) // app/api/chat/route.ts import { openai } from ' @ai-sdk/openai ' ; import { streamText } from ' ai ' ; export async function POST ( req : Request ) { const { messages } = await req . json (); const result = streamText ({ model : openai ( ' gpt-4o-mini ' ), messages , }); return result . toDataStreamResponse (); } // app/page.tsx ' use client ' ; import { useChat } from ' ai/react ' ; export default function Chat () { const { messages , input , handleInputChange , handleSubmit } = useChat (); return ( < div > { messages . map ( m => ( < div key = { m . id } > < strong > { m . role }: < /strong> {m.content } < /div > ))} < form onSubmit = { handleSubmit } > < input value = { input } onChange = { handleInputChange } / > < button type = " submi

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
7 views

Related Articles