██████████  ██████  ██
██░░██░░██  ██░░██  ██
██░░██░░██  ██████  ██

  THE UI FOR YOUR AI

An extendable visual workspace where your AI agents build their own UI. See moi.computer for what it is and how it works.

moi gives your agent of choice a UI it can reshape on the fly and grow into your personal software. Under the hood, the agent writes and embeds live components wired to real data: APIs, local files and commands, MCP servers.

Works with the harness you already use:

Claude Code     Codex     OpenClaw     Hermes

Features

• Bring your own agent. Connect the agent you already use.

• Workspace. The folder where your agent (e.g. Claude Code) runs and keeps its data. It gets a special skill that teaches it how to communicate with moi.

• Theme. The agent can modify the appearance of the workspace for you: fonts, color scheme and more.

• Scratchpad. A shared canvas where you ideate together with the agent: ask it to draw diagrams, add feedback or comments, visualize knowledge and plans.

• Overview. A dynamic home made of small widgets wired to the data from your workspace. They can be rearranged, modified, and completely customized.

• Views. An app embedded in the workspace that lives in its own tab. Build complex interfaces: CRMs, task trackers, second brain storage, customer support views, etc.

Quick start

Make sure Bun 1.3 or newer is installed. moi uses it to run the web server and bundle the dynamic UI.

Install the moi-computer package from npm and start the web UI:

bun i -g moi-computer
moi start        # http://localhost:13337

Then connect your agent: Claude Code and Codex, OpenClaw, or Hermes.

Learn how to:

• Run moi as a service
• Update moi

How it works

moi runs locally as a CLI and web UI connected to your agent. The workspace skill teaches the agent how to call the CLI, which updates the UI using your files, commands, APIs, and MCP servers.

The core is moi command that both agent and you can use to modify the workspace. Everything gets propagated to the UI instantly.

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#ffffff", "primaryTextColor": "#111111", "primaryBorderColor": "#111111", "lineColor": "#737373", "edgeLabelBackground": "#ffffff"}}}%%
flowchart LR
  Agent["Your agent, e.g. Claude Code"] -->|"uses moi skill"| CLI["moi CLI"]
  CLI -->|"updates"| UI["UI"]