Macaron Artifacts CLI
Local WebUI for Claude Code, Codex, OpenCode, pi, Hermes and OpenClaw: agents reply with live, interactive React components
- 235 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- Runs agent-generated React inside the interface page
- Starts agents in chosen workspaces with their own permissions and keeps profile keys in a local file
- The --host, public origin and --pair modes expose the interface beyond loopback, protected only by a shared password or a one-time code
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add cli/macaron-artifactsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs agent-generated React inside the interface page
- Starts agents in chosen workspaces with their own permissions and keeps profile keys in a local file
- The --host, public origin and --pair modes expose the interface beyond loopback, protected only by a shared password or a one-time code
This is third-party code. Review the repository files before installing.
What it does
Macaron Artifacts starts with the macaron-artifacts command and opens a WebUI at http://127.0.0.1:43860. You create a conversation there and pick an agent and a workspace. Claude Code and pi run on bundled SDKs, Codex and OpenCode (v1 and v2) use an installed, authenticated CLI, Hermes goes through its headless JSON-RPC gateway, and OpenClaw through a Gateway v4 client. It needs Node.js 22.19 or newer. The core idea is called UI4A (UI for Agent): the agent writes ordinary React with imports, components and state. A ui4a/tsx block in a reply renders as the code streams in and stays interactive. A file at .artifacts/canvases/<name>.ui4a.tsx opens beside the conversation as a Canvas and persists across turns. Components get the $ui4a/ui library, KaTeX for formulas, Recharts for charts, Headless UI and any npm package through esm.sh. A button in such a component can start the agent's next turn, and a form can save data to .artifacts. Profiles keep several setups per agent: model, reasoning effort, service endpoint and keys. Approval requests show up in the conversation, and a background turn keeps running when you switch to another conversation. For a remote machine there is a password, a public origin behind an HTTPS proxy and a --pair mode that connects the hosted interface at artifacts.macaron.im.
Who it is for. People who work with Claude Code, Codex or OpenCode and want interactive charts, forms and panels from the agent instead of walls of text.
Good fit when
- The agent builds a summary of data and you want a Recharts chart with toggles instead of a text table
- You need a form or a calculator that the agent assembles in the conversation and you use on the spot, with no separate project
- You want one interface for several agents: Claude Code, Codex, OpenCode and pi in a single conversation list
- The agent runs on a remote server and the interface opens through an SSH tunnel or a password
- Formulas in a reply should render through KaTeX as the text streams
Not a fit when
- A terminal is enough: the interface adds a browser and a local server, and Codex and OpenCode need their own authenticated CLI
- You cannot trust the generated code: React runs inside the interface's own page
- You need to carry over old session history: native history migration and attachments are not implemented yet
- You want the v0 plugin launchers inside the agent: the old interface and plugins sit in the archived v0 branch
Example request
Start Macaron Artifacts, open a Claude Code conversation in this project's folder and ask it to build an interactive chart from sales.csvLimitations
- Generated React runs inside the interface page, so use it only with trusted code.
- Without a password the local server is open to anyone on the loopback address. A non-loopback bind or a public origin requires a password.
- Native session-history migration and attachments are not supported yet.
- For OpenClaw, metadata enrichment requires the Macaron metadata-gate plugin and does not work without it.
How to disable. Stop the macaron-artifacts process. npm uninstall -g macaron-artifacts removes a global install. Conversations are stored in ~/.macaron-artifacts/sessions, while workspace files stay in the project folders you chose and are not deleted with a conversation.
FAQ
What is UI4A in Macaron Artifacts?
It is how the agent produces an interface: it writes ordinary React code and the runtime renders it as the code streams in. A ui4a/tsx block sits between paragraphs, and a .ui4a.tsx file in .artifacts/canvases opens in a separate panel.
Which agents does Macaron Artifacts work with?
Claude Code, Codex, OpenCode (v1 and v2), pi, Hermes and OpenClaw. Claude Code and pi use bundled SDKs, while Codex and OpenCode need an installed, authenticated CLI.
How do I open the interface on a remote server?
Set a password with MACARON_PASSWORD or --password, forward the port with ssh -N -L 43860:127.0.0.1:43860 user@host and open http://127.0.0.1:43860. Agents, files and keys stay on the remote machine.
Where are profile keys and tokens stored?
In a private local file under the app data directory. They are never returned to the browser.
Is a password required to run it?
No, the local server on 127.0.0.1 runs without one. A password is required when the server listens on another address or has a public origin.
Discussion
No questions or reviews yet.
Related
CLI toolsA CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block
An open design canvas where Claude Code, Codex, ChatGPT and Cursor draw layouts through MCP together with people
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
MCP server of a React component library for agent interfaces: the agent finds a component and adds it to your project
MCP bridge between an agent (Cursor, Claude Code, Codex) and Figma for reading designs and editing them on the canvas
Layrr opens your web app with an overlay: click an element, describe the change, and the agent gets the exact source location
README in short
The repository page presents the project as the community edition of Mind Lab's UI4A and compares it with raw HTML and schema protocols such as A2UI. It continues with install steps, password and remote access setup, a feature list and a table of environment variables. Links lead to the architecture paper, the genui.macaron.im playground and related packages.