Build with AI
Wattfare is built to be wired in by an AI coding agent. Copy the prompt below into Cursor, Claude Code, Lovable, Bolt, or v0 — it carries the whole integration, so the agent can ship it in one pass.
The integration prompt
One self-contained prompt. It's short enough to drop into any agent and complete enough to execute — and it links the full plain-text docs so agents that can browse will pull exact signatures when they need them.
Integrate Wattfare into this app.
Wattfare is an OAuth-like layer that lets my users connect their own LLM budget
(with a spending cap), so model calls are billed to them — not me.
Full docs: https://wattfare.com/llms-full.txt
Setup: run `npm i wattfare` (add `ai` for the inference helpers). Two keys —
a publishable key (browser, env PUBLIC_WATTFARE_KEY) and a secret key
(server only, env WATTFARE_SECRET_KEY).
Wire up these three pieces, matching my framework and my existing auth:
1) Session route — the browser asks my server for a short-lived token:
import { Wattfare } from "wattfare/server";
const wf = new Wattfare({ secretKey: process.env.WATTFARE_SECRET_KEY! });
export const POST = wf.sessionHandler(
async (req) => (await getUser(req))?.id ?? null, // null => 401
{ requestLimit: { monthlyUsd: 10 } }, // suggested cap
);
2) Connect button (React) — call connect() inside the click handler:
import { WattfareProvider, useWattfare } from "wattfare/react";
// wrap the app once:
// <WattfareProvider publishableKey={PUBLIC_WATTFARE_KEY} session="/api/wattfare-token">
const { connected, connect, remainingUsd, loading } = useWattfare();
// !connected -> show a "Connect AI budget" button (onClick={connect});
// connected -> show remainingUsd.
// No React? Use createWattfare({ publishableKey, session }) from "wattfare/client".
3) Inference (server) — billed to the connected user (any OpenRouter model id):
const ai = wf.user(userId);
if (!(await ai.status()).connected)
return Response.json({ error: "not_connected" }, { status: 402 });
const result = streamText({ model: ai.model("openai/gpt-4o-mini"), prompt });
// catch isBudgetExceeded(err) from "wattfare/server" -> return HTTP 402.
When you're done, list the env vars I need to set. Only ask me if you can't
find my auth or my existing AI call. Works with Cursor, Claude Code, Windsurf, GitHub Copilot, Cline, Lovable, Bolt, v0 — any agent that edits your code.
Just the UI
Using a UI-first tool like v0, Lovable, or Bolt and only need the front end? This one builds the connect button and budget UI against the React hook, and leaves your backend alone.
Build a polished "Connect AI budget" UI with Wattfare (React).
Wattfare is an OAuth-like popup where a user connects their own AI budget; after
they connect, I read their remaining balance from a hook.
Docs: https://wattfare.com/llms-full.txt
Use wattfare/react:
- Wrap the app once:
<WattfareProvider publishableKey={PUBLIC_WATTFARE_KEY} session="/api/wattfare-token">
- const { connected, connect, disconnect, remainingUsd, loading } = useWattfare();
Design a component that matches my existing UI:
- a loading skeleton while `loading`;
- not connected: a primary "Connect AI budget" button that calls connect()
DIRECTLY on click (deferring it gets the popup blocked);
- connected: a budget bar showing remainingUsd (or "Unlimited" when it's null),
plus a subtle "Disconnect" action;
- a friendly state when remainingUsd reaches 0 that prompts raising the cap.
Output the component and tell me where to mount the provider. Point your agent at the docs
Skip the copy-paste entirely: give your tooling the docs once and let it read what it needs. Every page is published as plain text following the llms.txt standard — clean, structured, no HTML noise.
Cursor, Windsurf & Copilot
Add the index as an indexed documentation source, then @-mention it as you build.
# Cursor / Windsurf — add the docs as an indexed source
# Settings → Indexing & Docs → Add doc, paste:
https://wattfare.com/llms.txt
# then @-mention it while you build:
@Docs Wattfare add a session-token route to this projectClaude Code & coding agents
Agents that can fetch URLs read the docs directly — point them at the full dump, or the index
so they pull only the pages they need. Every page also has a predictable .md twin.
# Claude Code / Codex / Cline & other agents —
# point them at the docs, then let them work:
Read https://wattfare.com/llms-full.txt, then integrate Wattfare into this project.
# or have the agent pull only the pages it needs from the index:
https://wattfare.com/llms.txtPer-page AI actions
Every docs page (this one included) has a Copy page button in the top-right. Open the caret beside it for more:
- Copy page — the page as clean Markdown, ready to paste into an agent.
- Copy as prompt — that Markdown wrapped in context, framed as a task.
- Open in ChatGPT / Claude — for when you do want to talk it through.