Skip to main content

Vercel AI SDK Integration

The Vercel AI SDK provides a streaming-first interface for AI applications. You can use it with Vexrail by configuring a custom OpenAI provider that points to the Vexrail API.

Installation​

npm install ai @ai-sdk/openai

Setup​

import { createOpenAI } from "@ai-sdk/openai";

const vexrail = createOpenAI({
  baseURL: "https://api.vexrail.com/v1",
  apiKey: "unused",
  headers: {
    "x-publishable-key": process.env.VEXRAIL_PUBLISHABLE_KEY!,
    "x-secret-key": process.env.VEXRAIL_SECRET_KEY!,
    "x-conversation-id": "your-conversation-id",
  },
});

Generate Text​

import { generateText } from "ai";

const { text } = await generateText({
  model: vexrail("gpt-4o-mini"),
  prompt: "What tools can help me with project management?",
});

console.log(text);

Stream Text​

import { streamText } from "ai";

const result = streamText({
  model: vexrail("gpt-4o-mini"),
  prompt: "Recommend a good design tool for teams.",
});

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

Using with Next.js​

Vexrail works with the Vercel AI SDK's Next.js integration for building chat interfaces:

API Route (app/api/chat/route.ts)​

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

const vexrail = createOpenAI({
  baseURL: "https://api.vexrail.com/v1",
  apiKey: "unused",
  headers: {
    "x-publishable-key": process.env.VEXRAIL_PUBLISHABLE_KEY!,
    "x-secret-key": process.env.VEXRAIL_SECRET_KEY!,
  },
});

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

  const result = streamText({
    model: vexrail("gpt-4o-mini"),
    messages,
  });

  return result.toDataStreamResponse();
}

Client Component​

"use client";

import { useChat } from "@ai-sdk/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="submit">Send</button>
      </form>
    </div>
  );
}

Conversation ID in Server Routes​

To pass the conversation ID dynamically, you can send it from the client and set it in the headers:

export async function POST(req: Request) {
  const { messages, conversationId } = await req.json();

  const vexrail = createOpenAI({
    baseURL: "https://api.vexrail.com/v1",
    apiKey: "unused",
    headers: {
      "x-publishable-key": process.env.VEXRAIL_PUBLISHABLE_KEY!,
      "x-secret-key": process.env.VEXRAIL_SECRET_KEY!,
      "x-conversation-id": conversationId,
    },
  });

  const result = streamText({
    model: vexrail("gpt-4o-mini"),
    messages,
  });

  return result.toDataStreamResponse();
}

Next Steps​