Skip to content
Floopy Docs

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

Terminal window
npm install 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:

app/api/chat/route.ts
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:

components/chat.tsx
"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",
  },
});
HeaderDescription
Floopy-CacheCache strategy: semantic or exact
floopy-property-*Attach custom metadata for filtering in the dashboard
floopy-fallbackFallback model if the primary provider fails
floopy-session-idGroup related requests into a session
floopy-user-idAssociate requests with an end user

See the Headers Reference for the full list.