shadcn.io is not affiliated with official shadcn/ui
Message Code Execution AI Block for React Aria
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.
Installation
Overview
Show code the assistant ran and what it printed, with this AI message code execution for React with React Aria. 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.