moi
molefrog · molefrog/moi
Không gian làm việc trực quan nơi agent tự dựng giao diện, với widget và view kết nối API, file cục bộ và MCP server, được hướng dẫn qua một skill.
💾 MOI: agent-agnostic generative UI workspace. Give your agent a skill and let it build software around itself.
Xem trước
Bạn có thể làm gì với nó
- Dựng dashboard số liệu dự án trực tiếp từ dữ liệu trong workspace
- Tạo CRM hoặc trình quản lý công việc nhỏ thành một tab trong workspace
- Phác thảo sơ đồ và kế hoạch cùng agent trên bảng nháp chung
Kiểm tra an toàn
Dùng được, nhưng nên đọc ghi chú trước.
- ●Không có giấy phép rõ ràng: hỏi tác giả trước khi dùng cho sản phẩm thương mại.
Quét tự động các file trong repo. Luôn xem lại code trước khi chạy.
Trích từ README
██████████ ██████ ██
██░░██░░██ ██░░██ ██
██░░██░░██ ██████ ██
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.
Widgets wired to live project stats Order funnel on the scratchpad, live from Postgres Use the agent as a copilot when working with products
E-commerce store dashboard connected to Postgres and Resend Build a Roadmap view with epics and pull requests Sketching architecture together with the agent
Custom view for color grading Home screen with your workspaces Issues view, a lightweight Linear-like tracker
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:
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"]
Moi also stores the all widgets and views as code to keep the workspace filesystem as a source of truth.
Updates installed from the UI restart moi and reload the browser automatically. The app checks npm at most once an hour while it is open, retrying in five minutes if the registry could not be reached; a closed app makes no network calls of its own.
Connect an agent
A workspace is the folder where your agent runs and stores its data. moi adds
a .moi/ folder and the skills the agent needs to work with the UI.
You can connect a workspace in either of these ways:
- Open http://localhost:13337 and create a workspace or import one that moi found on your computer.
- Run
moi initin a folder. moi detects the harness from the folder's Hermes profile, OpenClaw agent, or Claude Code or Codex history. If detection is ambiguous, it asks you to choose a harness.
Claude Code and Codex
Open Claude Code or Codex in your project folder and paste this prompt:
Set up the moi workspace for this project. Fetch https://moi.computer/INSTALL.md, and follow the steps.
To set it up manually, run:
moi init --harness=claude-code # or --harness=codex
moi start # or run moi as a service
The project folder becomes the workspace. You can create as many workspaces as you need.
OpenClaw
OpenClaw is a self-hosted harness for running one or more always-on agents. Its channels connect agents to Slack and other messaging services.
moi connects each OpenClaw agent to one workspace. See the OpenClaw documentation to add or manage agents.
Run moi openclaw init to connect your agent. If moi finds more than one, it
lists them so you can rerun the command with the agent you want:
moi openclaw init
moi openclaw init # only needed when you have multiple agents
moi start # or run moi as a service
Your agent's workspace will show up at http://localhost:13337.
Hermes
Hermes is a self-hosted personal agent from Nous Research.
moi connects each Hermes profile to one workspace. A profile is a separate agent identity with its own model, keys, persona, skills, and memories.
Run moi hermes init to connect your profile. If moi finds more than one, it
lists them so you can rerun the command with the profile you want:
moi hermes init
moi hermes init # only needed when you have multiple profiles
moi start # or run moi as a service
The profile's workspace appears at http://localhost:13337. To add another,
create it with hermes profile create <name>, then run moi hermes init again.
moi connects to Hermes through its built-in [A