Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Slash Command Prompt AI Block for Solid

A prompt box where typing a slash opens five commands, the pick becomes a chip, and Enter runs it into an output log, with the last five lines recalled by Arrow Up.

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 run a small command from the same box they type in, with this slash-command prompt for Solid with Ark UI. Typing / at the start of the field opens a Listbox of five commands, Summarize, Translate, Explain, Rewrite and Clear, each with a one-line description and its short form in a Kbd. Arrow Down moves into the list, Enter takes the top match, and the pick becomes a chip at the start of the field with the rest of the line as its argument. Enter runs the command and prints the result in a log under the field. A History row shows the last five lines, and Arrow Up in an empty field recalls them. The band between the field and the log shows what would be sent: the command, the text and an estimated token count. The Shine Button runs the line, the only colored control. It's built from Textarea, Listbox, Kbd, Button, Shine Button and Guides, with a CSS entrance only. For notes apps, editors and any assistant with commands.

FAQ

Is anything really computed, and what stays local?

Yes, two of the commands are real. Summarize keeps the first three sentences of your text as points, and Rewrite drops filler words such as "really" and "just" and shows how many characters that saved. Translate answers four typed phrases and Explain four typed terms; anything else gets a line that lists what the demo knows, never an invented answer. Nothing leaves the page and no model runs. To make it real, call your API in the run handler with the command and the text, and print its reply into the log.

How do I add or change a command?

Edit COMMANDS at the top of the file: a name, a short form, a hint, and whether the command needs text. Add a branch for it in linesOf, which returns the lines the log prints. The list, the filter, the chip and the history all follow the array.

Which keys does the field take?

/ at the start opens the list and each letter narrows it by name or short form. Arrow Down moves into the list, Enter takes the top match without leaving the field, Escape closes the list and clears the slash. With a chip in place, Enter runs and Shift+Enter breaks the line; Backspace on an empty argument removes the chip. In an empty field Arrow Up recalls the last five lines one by one, and each History button recalls its line with the mouse or the keyboard.

How is the output log read by a screen reader?

It is a log region you can focus, so the keys scroll it; each run is a list item with the line you typed and the lines it printed. A single polite status line below says what happened ("Ran /summarize. Nothing was sent: this demo has no model.") and carries the problem when a line can't run, such as a command with no text.

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

Yes. The argument and the printed lines follow the direction of the text; the command words, the short forms and the History lines are always left to right, since they are typed in Latin letters.

How does it look on a phone?

The command list opens above the field instead of below it, so the keyboard does not cover it, and the key hints are read aloud but not shown. The log and the history keep their size, so the panel does not move when you run a command.

All 100 ai blocks