Vercel AI SDK: Najrýchlejšia cesta k AI aplikáciám

Vercel AI SDK je unifikované rozhranie pre prácu s rôznymi LLM providermi. Streamovanie, React hooks a edge-ready.

Prečo AI SDK?

Bez AI SDK

// Manuálne streamovanie je komplexné
const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ messages })
})

const reader = response.body?.getReader()
const decoder = new TextDecoder()

while (true) {
  const { done, value } = await reader.read()
  if (done) break
  const text = decoder.decode(value)
  // Parse SSE format...
}

S AI SDK

import { useChat } from 'ai/react'

function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <form onSubmit={handleSubmit}>
      {messages.map(m => <div key={m.id}>{m.content}</div>)}
      <input value={input} onChange={handleInputChange} />
    </form>
  )
}

Core Concepts

generateText

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'Vysvetli TypeScript generics'
})

streamText

import { streamText } from 'ai'

const result = await streamText({
  model: openai('gpt-4o'),
  messages: [
    { role: 'user', content: 'Napíš esej o AI' }
  ]
})

for await (const chunk of result.textStream) {
  process.stdout.write(chunk)
}

generateObject

Štruktúrovaný output s type safety:

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

const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    name: z.string(),
    age: z.number(),
    interests: z.array(z.string())
  }),
  prompt: 'Vygeneruj profil vývojára'
})

// object je plne typovaný
console.log(object.name)

React Hooks

useChat

'use client'

import { useChat } from 'ai/react'

export function ChatComponent() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
    error
  } = useChat({
    api: '/api/chat',
    onFinish: (message) => {
      console.log('Finished:', message)
    }
  })

  return (
    <div>
      {messages.map(m => (
        <div key={m.id} className={m.role}>
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Napíš správu..."
          disabled={isLoading}
        />
        <button type="submit">Odoslať</button>
      </form>

      {error && <div className="error">{error.message}</div>}
    </div>
  )
}

useCompletion

Pre single-turn completions:

const { completion, input, handleInputChange, handleSubmit } = useCompletion({
  api: '/api/complete'
})

API Route (Next.js)

// 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 = await streamText({
    model: openai('gpt-4o'),
    messages,
    system: 'Si helpful asistent pre vývojárov.'
  })

  return result.toDataStreamResponse()
}

Multi-Provider Support

import { openai } from '@ai-sdk/openai'
import { anthropic } from '@ai-sdk/anthropic'
import { google } from '@ai-sdk/google'

// Rovnaké API pre všetkých
const providers = {
  openai: openai('gpt-4o'),
  claude: anthropic('claude-3-5-sonnet-20241022'),
  gemini: google('gemini-pro')
}

const { text } = await generateText({
  model: providers[selectedProvider],
  prompt: userPrompt
})

Tool Calling

import { tool } from 'ai'
import { z } from 'zod'

const result = await generateText({
  model: openai('gpt-4o'),
  tools: {
    weather: tool({
      description: 'Získa počasie',
      parameters: z.object({
        city: z.string()
      }),
      execute: async ({ city }) => {
        return await fetchWeather(city)
      }
    })
  },
  prompt: 'Aké je počasie v Bratislave?'
})

Záver

Vercel AI SDK výrazne zjednodušuje budovanie AI aplikácií. Unified API, streaming out-of-the-box a React integration - všetko čo potrebujete.