Vercel AI SDK Example

import { HttpException, HttpStatus, post, prefix, operation, type VovkRequest } from 'vovk';
import {
  streamText,
  convertToModelMessages,
  createUIMessageStreamResponse,
  toUIMessageStream,
  isTextUIPart,
  safeValidateUIMessages,
  type UIMessage,
} from 'ai';
import { openai } from '@ai-sdk/openai';
 
const LIMIT = 5;
const MAX_MESSAGES = 20;
const MAX_LENGTH = 10_000;
 
@prefix('ai-sdk')
export default class AiSdkController {
  @operation({
    summary: 'Vercel AI SDK',
    description:
      'Uses [@ai-sdk/openai](https://www.npmjs.com/package/@ai-sdk/openai) and ai packages to chat with an AI model',
  })
  @post('chat')
  static async chat(req: VovkRequest<{ messages: UIMessage[] }>) {
    const validation = await safeValidateUIMessages({ messages: (await req.json()).messages });
 
    if (!validation.success) {
      throw new HttpException(HttpStatus.BAD_REQUEST, 'Invalid messages');
    }
 
    // the model gets the text of each message; reasoning, files, tool calls and provider data stay out
    const messages = validation.data.map(({ id, role, parts }) => {
      const text = parts
        .filter(isTextUIPart)
        .map((part) => part.text)
        .join('');
      return { id, role, parts: text ? [{ type: 'text' as const, text }] : [] };
    });
 
    if (messages.some(({ role }) => role !== 'user' && role !== 'assistant')) {
      throw new HttpException(HttpStatus.BAD_REQUEST, 'Only user and assistant messages are accepted');
    }
 
    if (messages.length > MAX_MESSAGES || messages.filter(({ role }) => role === 'user').length > LIMIT) {
      throw new HttpException(HttpStatus.BAD_REQUEST, `You can only send ${LIMIT} messages at a time`);
    }
 
    if (messages.some(({ parts }) => parts.some(({ text }) => text.length > MAX_LENGTH))) {
      throw new HttpException(HttpStatus.BAD_REQUEST, `A message can be ${MAX_LENGTH} characters at most`);
    }
 
    const result = streamText({
      model: openai('gpt-5-nano'),
      instructions: 'You are a helpful assistant.',
      messages: await convertToModelMessages(messages),
    });
 
    return createUIMessageStreamResponse({ stream: toUIMessageStream({ stream: result.stream }) });
  }
}

'use client';
import { AiSdkRPC } from '@/client/index.ts';
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { useState } from 'react';
 
export default function Page() {
  const [input, setInput] = useState('');
 
  const { messages, sendMessage, error } = useChat({
    transport: new DefaultChatTransport({
      api: AiSdkRPC.chat.getURL(), // '/api/ai-sdk/chat',
    }),
  });
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      sendMessage({ text: input });
      setInput('');
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === 'assistant' ? '🤖' : '👤'}{' '}
          {message.parts.map((part, partIndex) => (
            <span key={partIndex}>{part.type === 'text' ? part.text : ''}</span>
          ))}
        </div>
      ))}
      {error && <div>❌ {error.message}</div>}
      <div className="input-group">
        <input type="text" placeholder="Send a message..." value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">Send</button>
      </div>
    </form>
  );
}