Pular para o conteúdo
Floopy Docs

Vercel AI SDK

Visao Geral

O Floopy e um gateway sem SDK. O provedor OpenAI do Vercel AI SDK suporta URLs base personalizadas, entao voce pode rotear todas as requisicoes de IA pelo Floopy sem dependencias extras. Voce ganha cache, rate limiting, fallbacks e observabilidade de graca — perfeito para apps Next.js com streaming.

Instalacao

Terminal window
npm install ai @ai-sdk/openai

Configuracao

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


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

Defina FLOOPY_API_KEY no seu ambiente. Voce pode criar uma no dashboard.

Route Handler (Streaming)

Crie uma rota de API Next.js que transmite respostas:

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

Componente Cliente

Use o hook useChat para conectar sua 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>
  );
}

Requisicao Sem Streaming

import { generateText } from "ai";


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


console.log(text);

Headers Personalizados

Passe headers especificos do Floopy na opcao headers:

const result = streamText({
  model: floopy("gpt-4o"),
  messages,
  headers: {
    "Floopy-Cache": "semantic",
    "floopy-property-environment": "production",
    "floopy-fallback": "claude-sonnet-4-20250514",
  },
});
HeaderDescricao
Floopy-CacheEstrategia de cache: semantic ou exact
floopy-property-*Anexe metadados personalizados para filtragem no dashboard
floopy-fallbackModelo de fallback se o provedor principal falhar
floopy-session-idAgrupe requisicoes relacionadas em uma sessao
floopy-user-idAssocie requisicoes a um usuario final

Consulte a Referencia de Headers para a lista completa.