POSThttps://api.openai.com/v1/chat/completions
2001.25s5:38:27 AM
Headers
{
"Content-Type": "application/json",
"Authorization": "Bearer sk-..."
}Body
{
"model": "gpt-4o",
"messages": [
{
"role": "system",
"content": "You are a helpful assistant."
},
{
"role": "user",
"content": "Explain quantum computing in simple terms."
}
],
"temperature": 0.7,
"max_tokens": 500
}Headers
{
"Content-Type": "application/json",
"x-request-id": "req_abc123"
}Body
{
"id": "chatcmpl-abc123",
"object": "chat.completion",
"model": "gpt-4o-2024-08-06",
"choices": [
{
"index": 0,
"message": {
"role": "assistant",
"content": "Quantum computing uses quantum bits (qubits) that can exist in multiple states simultaneously..."
},
"finish_reason": "stop"
}
],
"usage": {
"prompt_tokens": 28,
"completion_tokens": 156,
"total_tokens": 184
}
}Overview
A compound component for inspecting AI API requests and responses. Features collapsible request/response sections, JSON formatting with copy-to-clipboard, HTTP method and URL display, status code badges with color coding, and duration/timestamp display.
Installation
bunx shadcn@latest add @elements/request-inspectorUsage
import {
RequestInspector,
RequestInspectorHeader,
RequestInspectorRequest,
RequestInspectorResponse,
} from "@/components/elements/ai-elements/devtools/request-inspector";
export function RequestInspectorExample() {
return (
<RequestInspector
request={{
method: "POST",
url: "https://api.openai.com/v1/chat/completions",
headers: { "Content-Type": "application/json" },
body: { model: "gpt-4", messages: [] },
}}
response={{
status: 200,
body: { choices: [{ message: { content: "Hello!" } }] },
}}
duration={1250}
timestamp={new Date()}
>
<RequestInspectorHeader />
<RequestInspectorRequest />
<RequestInspectorResponse />
</RequestInspector>
);
}Props
RequestInspector
| Prop | Type | Default | Description |
|---|---|---|---|
request | RequestData | - | Request data including method, url, headers, body |
response | ResponseData | - | Response data including status, headers, body |
timestamp | Date | - | When the request was made |
duration | number | - | Request duration in milliseconds |
RequestData
interface RequestData {
url?: string;
method?: string;
headers?: Record<string, string>;
body?: unknown;
}ResponseData
interface ResponseData {
status?: number;
headers?: Record<string, string>;
body?: unknown;
}Features
- Collapsible request/response sections with smooth animations
- HTTP method badge and URL display
- Status code badges with color coding (green: 2xx, yellow: 3xx, red: 4xx/5xx)
- JSON syntax highlighting with copy-to-clipboard
- Duration display in ms or seconds
- Timestamp display