A presentation-only panel for inspecting a single HTTP request/response your app already has, showing method, URL, status, duration, timing phases, headers, query, body, errors and an auth summary with credential redaction built in.
"use client";
import {
ApiRequestInspector,
type ApiRequest,
type ApiResponse,
} from "@/components/ui/api-request-inspector";
export default function ApiRequestInspectorDemo() {
const request: ApiRequest = {
method: "POST",
url: "https://api.acme.dev/v1/deployments",
environment: "production",
requestId: "req_9fa2c1e7b0",
timestamp: Date.now(),
headers: {
"Content-Type": "application/json",
Authorization: "Bearer sk_live_51Hc9f2K8sJd0aQm3",
},
body: { project: "web", ref: "main" },
};
const response: ApiResponse = {
status: 200,
statusText: "OK",
durationMs: 284,
headers: { "Content-Type": "application/json" },
body: { id: "dep_8b21f0", status: "queued" },
phases: [
{ label: "DNS", durationMs: 12 },
{ label: "TLS", durationMs: 38 },
{ label: "TTFB", durationMs: 168 },
{ label: "Download", durationMs: 66 },
],
};
return (
<div className="flex w-full items-center justify-center bg-[var(--color-bg)] p-6">
<div className="w-full max-w-xl">
<ApiRequestInspector
request={request}
response={response}
state="success"
auth={{
scheme: "Bearer",
principal: "ci-deploy-bot",
scopes: ["deployments:write"],
}}
redact={["x-internal-id"]}
/>
</div>
</div>
);
}
Part of Motiq — browse the full library on 21st.dev.