Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Message Code Execution AI Block for Solid

An assistant answer with a Python snippet in a code window with line numbers, a copy button and a Run button that shows a spinner, then fills Output and Errors tabs with typed stdout and the run time.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show code the assistant ran and what it printed, with this AI message code execution for Solid with Ark UI. A compact header names the product and a hairline frame holds one turn: a request in a secondary Bubble, a sentence from the assistant and a code window for fibonacci.py, set in Syntax Text with line numbers in token weights that follow the theme. The window's toolbar carries a Python Badge, Copy and the block's one primary, a Shine Button "Run". Pressing Run shows a spinner on the button for 600 ms, then fills a result band whose height never changes: Tabs for Output and Errors, the typed stdout and "Ran in 0.42 s". Run again plays it again. It's built from Bubble, Syntax Text, Tabs, Badge, Copy Button, Shine Button and Guides. For notebook assistants, data tools and any answer that is code first.

FAQ

Does the code actually run?

No. The stdout and the timing are typed at the top of the file, and the status line says "Nothing ran: the output is typed." To make it real, send the code to a sandbox you trust from the Run handler and put its stdout, stderr and duration into the same two tabs; never run user code in the page itself.

Why doesn't the page move when the output appears?

The result band has the same height before and after a run: the tabs and a fixed-height output box are always there, saying "Press Run to see the output" until there is something to show. The Run button keeps its size while it shows the spinner.

What is in the Errors tab?

Here it says "No errors." after a run, because the sample succeeds. In a real version put the traceback there and switch to the tab when the run fails, with the status line saying so.

How does it work from the keyboard?

Run and Copy are buttons, the tabs use arrow keys, and the code region is named by its file so a keyboard can scroll a long line. The status line announces the run, the finish and the copy.

How does it look on a phone?

The toolbar wraps and Run stays on it, the code scrolls sideways inside its window, and the output box keeps its height with its own scroll.