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/openaiBasic 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