Agent commands are Claude Code custom commands that teach the AI agent how to integrate Spaire into your project. The agent reads your codebase, detects your framework, and writes production-ready integration code — interactively, with your approval at every step.Documentation Index
Fetch the complete documentation index at: https://docs.spairehq.com/llms.txt
Use this file to discover all available pages before exploring further.
How It Works
Claude Code doesn’t know about Spaire out of the box. The agent commands are Markdown files you add to your project’s.claude/commands/ directory. Once added, Claude Code loads them as custom slash commands and knows exactly how to set up Spaire checkout, usage billing, webhooks, and more — tailored to your stack.
Available Commands
/setup-checkout
Adds checkout buttons, embed scripts, success pages, and optionally customer portal and webhook handlers.
/setup-usage-billing
Sets up metered billing with SDK ingestion, meters, credits, and webhook handlers.
Getting Started
Add the command files to your project
Create a
.claude/commands/ directory in your project root and download the Spaire command files:Why command files? Claude Code custom commands are project-scoped. By adding the
.claude/commands/ files to your project, the agent gets detailed instructions on how to integrate Spaire — including which SDKs to use, what dashboard steps to guide you through, safety guardrails for production codebases, and framework-specific code templates. Without these files, Claude Code has no knowledge of Spaire.Supported Frameworks
The agent detects your framework automatically and tailors the generated code accordingly:| Framework | Checkout | Usage Billing |
|---|---|---|
| Next.js (App Router) | ✓ | ✓ |
| Next.js (Pages Router) | ✓ | ✓ |
| Express | ✓ | ✓ |
| FastAPI | ✓ | ✓ |
| Ruby on Rails | ✓ | ✓ |
| Node Serverless (Vercel/Lambda) | ✓ | ✓ |
| React (Vite, CRA) | ✓ | — |
| Vue / Nuxt | ✓ | — |
| Svelte / SvelteKit | ✓ | — |
| Vanilla HTML/JS | ✓ | — |
Safety Guardrails
Agent commands are designed for production codebases that handle revenue. Every command enforces these guardrails:- Pre-write confirmation — Before writing any code, the agent shows a full change summary and waits for your explicit approval
- Git safety — Checks for uncommitted changes and warns you to commit or stash first
- No secret handling — Never hardcodes API keys or modifies
.envvalues; only references variable names and tells you where to get the values - Surgical edits — When modifying existing files, patches only the necessary sections and preserves your formatting and code style
- No silent account mutations — Never creates products, meters, or prices in your Spaire account; walks you through dashboard steps manually
- Idempotent webhooks — All generated webhook handlers include signature verification and idempotency checks
- Revert instructions — After every implementation, provides exact file paths, imports, and packages to remove
Setup Checkout
The/setup-checkout command adds Spaire checkout to your project. The agent asks which approach you want:
| Approach | Description | Best for |
|---|---|---|
| Overlay | Embed script + data-spaire-checkout links. No backend needed. | Landing pages, simple apps |
| Programmatic | SpaireEmbedCheckout.create() for dynamic control. | Apps needing custom trigger logic |
| Server-side | Checkout sessions via @spaire/sdk or @spaire/nextjs. | Apps with backends, dynamic pricing |
What the agent does
- Scans your project files to detect your framework
- Asks if you have products in Spaire (walks you through creation if not)
- Asks which checkout approach you want
- Finds your pricing pages, product pages, and CTA sections
- Shows a full change summary and waits for confirmation
- Adds the embed script to your layout
- Writes checkout buttons into your components
- Creates a success page
- Optionally wires up customer portal and webhook handler
- Provides revert instructions
Setup Usage Billing
The/setup-usage-billing command sets up metered billing. The agent asks what you want to track:
- LLM tokens — prompt, completion, and total tokens via
LLMStrategy - API calls — request counting with custom metadata
- Storage — bytes uploaded/downloaded via
S3Strategy - Compute time — execution duration via
DeltaTimeStrategy - Custom metrics — any event you define
What the agent does
- Scans your project files to detect your framework
- Asks what you want to meter and your pricing model
- Checks prerequisites (SDK installed, access token set)
- Tells you exactly what meter to create in the dashboard
- Shows a full change summary and waits for confirmation
- Writes ingestion code using the right SDK strategy
- Walks you through metered pricing setup
- Optionally sets up credits with balance-checking utilities
- Generates webhook handlers with signature verification
- Provides revert instructions
Production Awareness
If the agent detects production indicators —NODE_ENV=production, deploy branch configurations, or CI/CD pipeline files — it warns you before making any changes.
Relationship to Other Integration Methods
| Method | Best for |
|---|---|
| Agent Commands | Getting started fast — the agent writes the code for you |
| SDKs | Manual integration with full control |
| Framework Adapters | Framework-specific helpers (Next.js, Express, etc.) |
| MCP | AI agents querying your Spaire data at runtime |
| Webhooks | Reacting to billing events server-side |

