SERVER COMPONENTS │ NO API ROUTE │ NO LOADING STATE
Components that pay.
Every x402 guide shows you how to charge. This one shows you how to spend. Weft takes the place of the backend call, so the purchase happens while the page renders and the component arrives with its data already in it.
New to the protocol? Start with what x402 is.
One file finds it, pays for it, and draws it.
Write the card by hand or generate it from the response — hover a line to see what it drew, click either side to keep it.
// app/domain/[name]/page.tsx — one Server Component, no API routeimport { WeftClient } from "@weft-labs/sdk"; const weft = new WeftClient({ apiKey: process.env.WEFT_API_KEY! }); export default async function DomainCard({ params }) { // ask for a capability, not a vendor — then take the cheapest const hit = (await weft.search({ query: "domain registration data" })) .results.flatMap((x) => x.endpoints) .sort((a, b) => +a.price.indexedUsd - +b.price.indexedUsd)[0]; const d = JSON.parse(atob(r.bodyBase64)); return ( <Card> <Row> </Row> </Card> );}□ PURCHASED FROM X402 ATLAS FOR $0.005.
Two lines change, a different feature ships.
The page does not know what it is buying. Same key, same wallet, same ceiling flag, same ledger — and again the card renders full.
- weft.search({ query: "domain registration data" })
+ weft.search({ query: "geocode a street address" })
- url: `${hit.url}?domain=${params.name}`,
+ url: `${hit.url}?address=${params.q}`,What the second feature costs.
WITHOUT WEFT
- 01open an account with the provider, add a card
- 02mint an API key, then find somewhere safe to keep it
- 03write the API route that holds it, and the client fetch that calls it
- 04add a loading state, because the data arrives after the paint
- 05repeat, per provider, per feature
WITH WEFT
- 01one await, in the component that needs the data
- 02maxCostUsd on the call — the ceiling is the rate limiter
- 03swap the query to change provider; nothing else moves
A second feature costs a second query.
Add it to your app.
One key, one ceiling, every provider in the index.
Prefer a shell? Find, pay and pipe an x402 endpoint from your terminal.