shadcn.io is not affiliated with official shadcn/ui
API Request Thread Chat Block for Radix UI
A team channel where teammates share API requests as cards with the method, URL, a fold for headers, a typed last run, a real Copy as cURL button and a Show response fold, and where pasting a method and URL makes a new card marked as not run.
Installation
Overview
Show a conversation about which request fails, with this API request thread chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for the payments team at Cairnwire, a payments API. Between short Message and Bubble rows sit three request cards: a method Badge, the URL, a Collapsible for the headers, a typed "Last run: 201 Created, 183 ms" with a glyph, a Copy Button that writes the request as a cURL command to the clipboard, and "Show response" for the typed JSON. The refund call fails with a 502 and starts open, which is what the thread is about. Paste "GET /v1/charges/ch_1042" into the composer and a new card appears marked "Not run: this demo sends no requests". The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for an API team's channel, a support thread about calls or any chat that shares requests.
FAQ
What stays in the page, and how do I make it real?
Everything. The three requests, their last runs and responses are typed in this file, and nothing is called: a card you create says "Not run" and has no response to show. Teammates answer from a short script. To wire it for real, send the request from post where the code says so, fill the card's status, time and response from the answer, and keep the cURL builder as it is.
What does Copy as cURL copy?
The card's typed request as a command: the method, the URL, one -H line per header and a -d line for the body, joined with line continuations so it pastes into a terminal. Keys are read from an environment variable ($CAIRNWIRE_KEY) rather than written out. If the browser refuses the clipboard, the line under the composer says so.
How is my line turned into a card?
One expression reads a method (GET, POST, PUT, PATCH or DELETE) and a URL. A path starting with a slash gets the sample host in front of it. Your message then shows a short line, "A request to try.", and the card; a teammate answers. Anything that does not match is a plain message.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, every message starts with a hidden name and time, and a run's result is a glyph with words ("Last run: 502 Bad Gateway, 2004 ms"), never a color. The folds are buttons that say Show or Hide, URLs and headers stay left to right, and Tab runs through each card's Copy as cURL and folds.