Vercel AI SDK

npm i ai @ai-sdk/openai-compatible @ai-sdk/react zod

// lib/runinfra.ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";

const apiKey = process.env.RUNINFRA_GATEWAY_KEY;
if (!apiKey) {
  throw new Error("Set RUNINFRA_GATEWAY_KEY.");
}

export const runinfra = createOpenAICompatible({
  name: "runinfra",
  baseURL: "https://api.runinfra.ai/v1",
  apiKey,
});

export function getRunInfraModel(): string {
  const model = process.env.RUNINFRA_MODEL;
  if (!model) {
    throw new Error("Set RUNINFRA_MODEL from GET /v1/models.");
  }
  return model;
}

// app/api/chat/route.ts
import { convertToModelMessages, streamText } from "ai";
import { getRunInfraModel, runinfra } from "@/lib/runinfra";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: runinfra(getRunInfraModel()),
    messages: convertToModelMessages(messages),
  });
  return result.toUIMessageStreamResponse();
}

import { generateObject } from "ai";
import { getRunInfraModel, runinfra } from "@/lib/runinfra";
import { z } from "zod";

const { object } = await generateObject({
  model: runinfra(getRunInfraModel()),
  schema: z.object({
    merchant: z.string(),
    total_usd: z.number(),
    items: z.array(z.string()),
  }),
  prompt: "Extract receipt fields: $12.50 at Blue Bottle for coffee and a muffin",
});

import { streamText, tool } from "ai";
import { getRunInfraModel, runinfra } from "@/lib/runinfra";
import { z } from "zod";

const result = streamText({
  model: runinfra(getRunInfraModel()),
  prompt: "What is the weather in Austin?",
  tools: {
    getWeather: tool({
      description: "Get weather for a city",
      inputSchema: z.object({ city: z.string() }),
      execute: async ({ city }) => ({ city, temp: 21 }),
    }),
  },
});

"use client";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export function Chat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status } = useChat();

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const text = input.trim();
        if (!text) return;
        void sendMessage({ text });
        setInput("");
      }}
    >
      {messages.map((message) => (
        <div key={message.id}>
          {message.role}:{" "}
          {message.parts.map((part, index) =>
            part.type === "text" ? <span key={index}>{part.text}</span> : null,
          )}
        </div>
      ))}
      <input
        value={input}
        disabled={status !== "ready"}
        onChange={(event) => setInput(event.currentTarget.value)}
      />
    </form>
  );
}