Vercel AI SDK

Overview

Floopy is a zero-SDK gateway. The Vercel AI SDK’s OpenAI provider supports custom base URLs, so you can route all AI requests through Floopy without any extra dependencies. You get caching, rate limiting, fallbacks, and observability for free — perfect for Next.js apps with streaming.

Installation

npm install ai @ai-sdk/openai

pnpm add ai @ai-sdk/openai

yarn add ai @ai-sdk/openai

Configuration

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

const floopy = createOpenAI({
  baseURL: "https://api.floopy.ai/v1",
  apiKey: process.env.FLOOPY_API_KEY, // starts with fp_
});

Set FLOOPY_API_KEY in your environment. You can create one in the dashboard.

Route Handler (Streaming)

Create a Next.js API route that streams responses:

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

const floopy = createOpenAI({
  baseURL: "https://api.floopy.ai/v1",
  apiKey: process.env.FLOOPY_API_KEY,
});

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

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

  return result.toDataStreamResponse();
}

Client Component

Use the useChat hook to connect your UI:

"use client";

import { useChat } from "ai/react";

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/chat",
  });

  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>
  );
}

Non-Streaming Request

import { generateText } from "ai";

const { text } = await generateText({
  model: floopy("gpt-4o"),
  prompt: "Explain quantum computing in one sentence.",
});

console.log(text);

Custom Headers

Pass Floopy-specific headers in the headers option:

const result = streamText({
  model: floopy("gpt-4o"),
  messages,
  headers: {
    "Floopy-Cache": "semantic",
    "floopy-property-environment": "production",
    "floopy-fallback": "claude-sonnet-4-20250514",
  },
});

Header	Description
`Floopy-Cache`	Cache strategy: `semantic` or `exact`
`floopy-property-*`	Attach custom metadata for filtering in the dashboard
`floopy-fallback`	Fallback model if the primary provider fails
`floopy-session-id`	Group related requests into a session
`floopy-user-id`	Associate requests with an end user

See the Headers Reference for the full list.