Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

API Call Inspector AI Block for Vue

The HTTP call an assistant made, with a method badge, a copyable URL, status and time, tabs for the request, the response as a JSON tree and the headers, a timing bar split into five phases, and a Replay select for 200, 404 and 500.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people check exactly what an assistant sent to an API and what came back, with this call inspector for Vue with Ark UI. Callwright, an API tool inspector, opens on a line with a GET badge, the full URL with a real Copy Button, the status ("200 OK") and the total time. Tabs hold the Request as a list of parameters, the Response as a JSON Tree View and the Headers as a Table. Under them a stacked bar splits the total into DNS lookup, Connect, TLS, Wait and Download in foreground weights, with a legend of the milliseconds. A Select in the header replays the call as a 200, a 404 or a 500, and the URL, the body, the headers, the bar and the status all change together. For agent tool logs, API consoles and any place a call needs checking.

FAQ

What stays in the page, and how do I make it real?

Everything. The three calls (parameters, headers, body and five timings each) are typed in the file, and the total, the bar widths and the legend are computed from the timings. Nothing is called: the line under the panel says "Replay is typed". To wire it for real, fill a Call from your tool's trace and send the timings you measured; the rest follows.

How are the timing bar and the total made?

Each phase is a number of milliseconds. The total is their sum, and each segment's width is its share of the total, so a slow Wait on the 500 replay takes most of the bar. The bar is a drawing, hidden from screen readers; the legend list below it carries the same numbers as text.

Can I see long or deep responses?

The Response tab is a tree you open and close, and every tab body is a scroll region of the same height, so the panel never grows or shrinks when you change tabs. Strings and numbers are plain foreground text, and long values are cut by the tree's width.

Does it show secrets?

No. The Authorization parameter is masked with dots in the typed data and the replay never includes a real key. Keep it that way when you wire it up: show a header's name and a masked value, and let people copy the request ID instead.

How does it work from the keyboard?

The select, the tabs (arrow keys move between them) and the Copy button are ordinary controls. Each tab body can be focused to scroll it, and the status line announces each replay with its code and time.

Does it work in a right-to-left language?

The labels and layout follow the direction. The URL, the parameter values, the headers and the JSON stay left to right because they are code, and the timing bar keeps its order for the same reason.

All 100 ai blocks