Vercel AI SDK Integration

The Vercel AI SDK provides React hooks and utilities for building AI-powered applications with Next.js.

Installation

npm install ai @ai-sdk/openai

Basic Usage

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

const model = openai("openai/gpt-5.2", {
  baseURL: "https://api.langmart.ai/v1",
  apiKey: "your-langmart-api-key",
});

const { text } = await generateText({
  model,
  prompt: "Write a vegetarian lasagna recipe for 4 people.",
});

console.log(text);

Streaming Text

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

const model = openai("anthropic/claude-opus-4.5", {
  baseURL: "https://api.langmart.ai/v1",
  apiKey: "your-langmart-api-key",
});

const result = streamText({
  model,
  prompt: "Write a haiku about programming.",
});

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

Next.js API Route

// 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 model = openai("openai/gpt-5.2", {
    baseURL: process.env.LANGMART_API_URL,
    apiKey: process.env.LANGMART_API_KEY,
  });

  const result = streamText({ model, messages });
  return result.toDataStreamResponse();
}

React Hook Usage

"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} placeholder="Say something..." />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Tool Calling

import { openai } from "@ai-sdk/openai";
import { streamText, tool } from "ai";
import { z } from "zod";

const model = openai("openai/gpt-5.2", {
  baseURL: "https://api.langmart.ai/v1",
  apiKey: "your-langmart-api-key",
});

const result = streamText({
  model,
  prompt: "What is the weather in San Francisco?",
  tools: {
    getWeather: tool({
      description: "Get the current weather",
      parameters: z.object({
        location: z.string().describe("The city"),
      }),
      execute: async ({ location }) => `Sunny, 72°F in ${location}`,
    }),
  },
});

Environment Variables

# .env.local
LANGMART_API_URL=https://api.langmart.ai/v1
LANGMART_API_KEY=your-langmart-api-key

Learn More