URL: https://wattfare.com/docs/ai
# 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 fastest path**
>
> Hit **Copy prompt** on the prompt below and paste it into your agent. It already contains the full integration — keys, the session route, the connect button, and metered inference — so the agent can wire Wattfare into your stack without guessing. No chat required.

## 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](https://wattfare.com/docs/ai/llms-txt) so agents that can browse will pull exact signatures when they need them.

**Integrate Wattfare**

```text
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 the connect UI**

```text
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](https://wattfare.com/docs/ai/llms-txt) — clean, structured, no HTML noise.

### Cursor, Windsurf & Copilot

Add the index as an indexed documentation source, then `@`-mention it as you build.

```bash
# 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 project
```

### Claude 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.

```bash
# 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.txt
```

## Per-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.

> **Always current**
>
> The prompts and plain-text files are generated from these docs on every build, so they never drift from the real SDK. Change a signature here and it changes everywhere.

## Keep going

- [Docs for LLMs](https://wattfare.com/docs/ai/llms-txt) — The llms.txt files, per-page Markdown URLs, and autodiscovery — everything an agent needs.
- [Quickstart](https://wattfare.com/docs/quickstart) — Prefer to wire it by hand? Zero to a working connect button in five steps.
- [Server SDK](https://wattfare.com/docs/server-sdk) — The full reference for the methods the prompt leans on.
- [Error handling](https://wattfare.com/docs/errors) — Turn “not connected”, “budget exceeded”, and rate limits into graceful UI.