> ## Documentation Index
> Fetch the complete documentation index at: https://docs.restacked.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel AI SDK

Use the OpenStack OpenAI-compatible gateway as a drop-in model backend for the Vercel's AI SDK.

<Tabs>
  <Tab title="Next.js API route">
    ```ts theme={null}
    import { streamText } from 'ai'
    import { createOpenAI } from '@ai-sdk/openai'

    export async function POST(request: Request) {
      const { messages } = await request.json()

      const user = "user_123" // Stable, pseudonymous user ID

      const monetizedAI = createOpenAI({
        apiKey: process.env.OPENSTACK_API_KEY, // Your OpenStack API key
        baseURL: 'https://api.openstack.ai/v1', // Change baseURL to OpenStack
        headers: {
          "X-Openstack-User": user // Identify the end user
        }
      })

      const result = await streamText({
        model: monetizedAI('gpt-5'),
        messages
      })

      return result.toAIStreamResponse()
    }
    ```
  </Tab>

  <Tab title="Client component">
    ```tsx theme={null}
    'use client'

    import { useChat } from 'ai/react'

    export default function PersonalAssistant() {
      const { messages, input, handleInputChange, handleSubmit } = useChat()

      return (
        <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
          <div className="flex-1 overflow-y-auto space-y-4">
            {messages.map((message) => (
              <div
                key={message.id}
                className={`p-4 rounded-lg ${
                  message.role === 'user' ? 'bg-blue-100 ml-auto' : 'bg-gray-100'
                }`}
              >
                <p>{message.content}</p>
              </div>
            ))}
          </div>

          <form onSubmit={handleSubmit} className="mt-4">
            <input
              value={input}
              onChange={handleInputChange}
              placeholder="Tell me about yourself or ask me anything..."
              className="w-full p-2 border rounded"
            />
          </form>
        </div>
      )
    }
    ```
  </Tab>
</Tabs>