shadcn.io is not affiliated with official shadcn/ui
Developer Console Chat Block for React
A console as a conversation: type GET /health, GET /users/2, GET /streams, help or clear and the service answers with a method word, path, status with a glyph, milliseconds, an ISO time and a colored JSON body, with ArrowUp and ArrowDown recalling earlier commands.
Installation
Overview
Talk to a service from a prompt, with this developer console chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for the console of Tailbrook, a logging service. The log holds three earlier pairs, each the command you typed in mono and under it a reply card with a Badge for the method, the path, a status word with a glyph, the time in milliseconds, an ISO time and the JSON body colored from the theme's tokens. At the prompt, type "GET /health", "GET /users/2" or "GET /streams" for a typed answer, "help" for the list, "clear" to empty the log, or anything else for "Unknown command, type help"; ArrowUp and ArrowDown walk back and forward through the commands you ran, and the line you were typing comes back at the end. The prompt's Shine Button, the only colored control, runs the line, and a Typing Indicator Text shows while the service answers. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for an admin console, a bot you command or a status page you can query.
FAQ
What stays in the page, and how do I make it real?
Everything. The answers are typed in this file: three endpoints with their bodies and timings, a 404 for any other GET path and a refusal for POST, PUT, PATCH and DELETE, since the console is read only. No request is made and the milliseconds are typed. To wire it for real, send the command to your service where run says so, build the reply card from its response and append it to the same list.
How does ArrowUp work?
The commands you ran, the three seeded ones included, are a list. ArrowUp steps back through it and ArrowDown forward; the first ArrowUp keeps whatever you were typing, and walking past the newest command brings it back. Typing anything puts you back at the end of the list. Keys are ignored while an input method is composing text, and the hint under the prompt says what they do.
Which commands are there?
GET /health, GET /users/2 and GET /streams have typed answers. Any other GET path answers 404 Not Found. help lists the commands, clear empties the log and says so. POST, PUT, PATCH and DELETE get "This console is read-only", and anything else "Unknown command, type help". Add an endpoint by adding one reply object to the ENDPOINTS list.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, each command starts with a hidden "You ran:", and a status is a glyph and a word (200 OK, 404 Not Found), never a color alone. Everything shown as code stays left to right, also in right-to-left pages. Focus stays at the prompt after you run a command.