API request builder

Pro

Try an API from the page: method, URL with path values, query, headers and a JSON body checked before sending; the response with status, time, size, a JSON tree and headers; ⌘Enter, cancel, history and copy as cURL.

Installs components/ui/api-request-builder.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-popover, @radix-ui/react-slot, @radix-ui/react-tabs, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/api-request-builder

Path:id

Send the request to see the response here.

When to use #

Use it for

API reference and developer settings, beside API keys.
Internal tools that call your own endpoints.

Skip it when

Showing a fixed example; a code block is enough.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/api-request-builder

Adds its 18 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { ApiRequestBuilder } from "@/components/ui/api-request-builder"

The worked example comes with Pro

The 49-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

ApiRequestBuilder

component

PropTypeDefaultDescription

baseUrlstring""Prefixed to paths that do not start with http, e.g. "https://api.example.com".

initial(Partial<Pick<ApiRequestDraft, "body" | "url" | "method">> & { headers?: Record<string, string> | undefined; })—

endpointsreadonly ApiEndpoint[][]Saved requests, listed under Requests.

environmentsreadonly ApiEnvironment[][]Variable sets; {{name}} in the URL, headers and body is replaced from the chosen one.

onSave((endpoint: ApiEndpoint) => void)—Called when a request is saved to the collection.

onSend *(request: ApiOutgoing, signal: AbortSignal) => Promise<ApiResponse>—Sends the request; reject with an Error to show it. Abort the work when the signal fires.

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.