Request Builder

A small API playground: pick a method, type a URL whose :path params and query light up and turn into fields, toggle headers, check the JSON body as you type, then send for a status pill, timing, size and a pretty response.

akaapi client·http request·rest

Install

Run this in any project set up for the shadcn CLI. It copies the Request Builder source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/request-builder.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { RequestBuilder } from "@/components/request-builder";

export default function Page() {
  return <RequestBuilder />;
}

Built with

A free React component in the Dev Tools collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: button, checkbox, kbd, select, tabs
npm: lucide-react, motion

Props

Read from the Request Builder source. Everything is optional unless it says required.

Prop	Type	Default
defaultMethod	HttpMethod	"GET"
defaultUrl	string	"https://api.example.com/v1/users/:id"
defaultParams	Record<string, string>	{}
defaultHeaders	Omit<RequestHeader, "id">[]	[{ key: "Accept", value: "application/json", enabled: true }]
defaultBody	string	""
onSend	(request: BuiltRequest) => Promise<ResponseData>	—
className	string	—

More in Dev Tools

128

Branch Graph

A git log drawn as a graph: each branch gets its own coloured lane, merges sweep in on smooth curves, refs and tags sit on their commits, and hovering a row slides a detail card along with you.

129

Code Block

A code viewer with file tabs, hand-rolled syntax colour, click-to-highlight lines, a diff view that works out the +/− itself, wrap and copy, and long files that fold behind a fade.

130

Cron Builder

Edit a cron expression field by field or with friendly controls, read it back as a plain sentence, see the next five runs in your timezone update as you type, and get told exactly why a schedule is invalid or can never run.

131

Deploy Pipeline

Install, build, test and deploy as stages that light up and connect as they pass, live timers, a log peek that follows the running stage, a failed stage you can retry in place, and the preview URL as a chip when it’s ready.

Prop

Type

Default

defaultMethod

HttpMethod

"GET"

defaultUrl

string

"https://api.example.com/v1/users/:id"

defaultParams

Record<string, string>

{}

defaultHeaders

Omit<RequestHeader, "id">[]

[{ key: "Accept", value: "application/json", enabled: true }]

defaultBody

string

onSend

(request: BuiltRequest) => Promise<ResponseData>

—

className

string

—