菜单
Build and manage persistent, reusable AI-generated UI components with the open-mcp-apps MCP engine
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Aradotso/mcp-skills --skill open-mcp-apps-persistent-ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
MCP server that enables LLMs to query and analyze PostgreSQL databases through a controlled interface with read/write capabilities.
Use local-mcp to enable AI agents to safely read, write, and execute commands on local files with sandboxed permissions
Run MCPX MCP Runtime to connect AI clients to local development environments with workspace management, source control, changesets, and terminal execution
基于 SOC 职业分类
正在显示 SKILL.md
| name | open-mcp-apps-persistent-ui |
| description | Build and manage persistent, reusable AI-generated UI components with the open-mcp-apps MCP engine |
| triggers | ["create a persistent UI component","build an MCP app widget","make a reusable interface for","set up open-mcp-apps","create a kanban board that persists","build a habit tracker with open-mcp-apps","write a custom MCP app","install an app into open-mcp-apps"] |
Skill by ara.so — MCP Skills collection.
open-mcp-apps is an MCP server that enables AI assistants to create persistent, reusable UI components. When a user asks for a UI (kanban board, habit tracker, reading list), the AI writes a single-file HTML app, saves it to a registry, and binds it to persistent SQLite-backed data. The app persists across conversations and hosts.
Key capabilities:
curl -fsSL https://raw.githubusercontent.com/2nd1st/open-mcp-apps/main/install.sh | sh
The installer:
Skip prompts (auto-yes):
curl -fsSL https://raw.githubusercontent.com/2nd1st/open-mcp-apps/main/install.sh | sh -s -- --yes
Target specific host:
curl -fsSL https://raw.githubusercontent.com/2nd1st/open-mcp-apps/main/install.sh | sh -s -- --host codex
git clone https://github.com/2nd1st/open-mcp-apps
cd open-mcp-apps
node install.mjs
~/Library/Application Support/open-mcp-apps/open-mcp-apps.db%APPDATA%\open-mcp-apps\open-mcp-apps.db$XDG_DATA_HOME/open-mcp-apps/open-mcp-apps.db or ~/.local/share/open-mcp-apps/node uninstall.mjs # Unregister, keep data
node uninstall.mjs --purge # Delete everything (irreversible)
node uninstall.mjs --check # Preview changes
Full reset: Delete the .db file (and -wal/-shm siblings) while host is fully quit.
The server exposes these tools to the AI:
list_appsLists all installed apps with metadata.
{
"name": "list_apps"
}
Returns: Array of apps with name, title, description, version, author, trust_tier.
get_appRetrieves an app's full source code.
{
"name": "get_app",
"arguments": {
"name": "kanban-board"
}
}
get_app_guideRetrieves the authoring guide the AI should read before writing a new app.
{
"name": "get_app_guide"
}
Returns: Complete guide with window.oma API, design patterns, constraints.
save_appSaves a new or updated app to the registry.
{
"name": "save_app",
"arguments": {
"name": "habit-tracker",
"title": "Habit Tracker",
"description": "Track daily habits with streaks",
"html": "<html>...</html>",
"version": "1.0.0",
"collections": ["habits"]
}
}
delete_appRemoves an app from the registry (data persists).
{
"name": "delete_app",
"arguments": {
"name": "old-app"
}
}
open_app (or open_<name>)Opens an app with optional initial items.
{
"name": "open_kanban",
"arguments": {
"initial_items": {
"tasks": [
{"id": "1", "title": "Review PR", "status": "todo"},
{"id": "2", "title": "Fix bug", "status": "in-progress"}
]
}
}
}
The AI uses this after creating or when reopening an app.
When user says: "make me a reading tracker"
1. Call get_app_guide to read the authoring contract
2. Write single-file HTML app following the guide
3. Call save_app with the HTML and collections list
4. Call open_reading_tracker with sample initial_items
Example HTML structure for an app:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reading Tracker</title>
</head>
<body>
<div class="container">
<h1>My Reading List</h1>
<ul id="books"></ul>
<form id="add-form">
<input id="title" placeholder="Book title">
<input id="author" placeholder="Author">
<button type="submit">Add</button>
</form>
</div>
<script>
// window.oma is injected by the engine
const { items, mutate, subscribe } = .;
books = ();
() {
list = .();
list. = books.(
).();
}
.(). = {
e.();
(, {
: ,
: {
: crypto.(),
: .().,
: .().
}
});
e..();
};
. = {
(, {
: ,
: id
});
};
(, render);
();
When user says: "show me my reading tracker again"
1. Call list_apps to check if 'reading-tracker' exists
2. If exists: call open_reading_tracker (no initial_items needed)
3. If not: follow Pattern 1 to create it
When user says: "add a rating field to my reading tracker"
1. Call get_app with name="reading-tracker"
2. Modify the HTML to add rating functionality
3. Call save_app with incremented version
4. Call open_reading_tracker to show updated version
The built-in library app shows 17 ready-made apps. To use them:
1. User opens library (open_library tool)
2. User clicks install in the library UI
3. App is installed and immediately available
Or programmatically:
# Install a custom app from file
node install-app.mjs ./my-custom-app.html
node install-app.mjs ./untrusted-app.html --sandboxed
Every app has access to window.oma with these methods:
items(collection_name)Returns array of all items in the collection.
const tasks = window.oma.items('tasks');
// Returns: [{id: '1', title: 'Task 1', ...}, ...]
mutate(collection_name, command)Idempotently mutates the collection.
window.oma.mutate('tasks', {
command: 'add_task',
command_id: crypto.randomUUID(), // Optional, auto-generated
expected_version: window.oma.version('tasks'), // OCC
item: {
id: crypto.randomUUID(),
title: 'New task',
status: 'todo'
}
});
subscribe(collection_name, callback)Listens for changes.
window.oma.subscribe('tasks', () => {
console.log('Tasks changed, re-render');
render();
});
version(collection_name)Returns current version number (for optimistic concurrency control).
const v = window.oma.version('tasks'); // e.g., 42
themeObject with mode ('light' or 'dark') and design tokens.
if (window.oma.theme.mode === 'dark') {
document.body.classList.add('dark');
}
capabilities: ['files'])// Upload file
window.oma.files.upload(file_object).then(file_id => {
console.log('Uploaded:', file_id);
});
// Get file metadata
window.oma.files.get(file_id).then(metadata => {
console.log(metadata.name, metadata.size, metadata.mime_type);
});
// Download URL
const url = window.oma.files.url(file_id);
// Returns: /files/<file_id>
// List all files
window.oma.files.list().then(files => {
files.forEach(f => console.log(f.name));
});
// Delete
window.oma.files.delete(file_id);
Set in the env block of your host's MCP server entry:
{
"mcpServers": {
"open-mcp-apps": {
"command": "node",
"args": ["/path/to/open-mcp-apps/src/server.mjs"],
"env": {
"OMA_VIEWER": "0",
"PORT": "9000"
}
}
}
}
OMA_VIEWER: Set to 0 to disable the browser viewer entirelyPORT: Change the viewer port (default: 8787)The viewer runs at http://127.0.0.1:8787 (or custom PORT). It serves:
/view/<app-name> - Individual app pages/mcp - Stateless HTTP MCP endpointSecurity: Bound to 127.0.0.1 only. No password because any local process can access the SQLite file directly. Treat tunnel URLs as secrets if you expose it.
For apps beyond the AI's context window, write in your own editor:
# Create my-app.html with full bundling/tooling
# Keep it ≤200 KB, self-contained, no network requests
# Install as trusted (full capabilities)
node install-app.mjs ./my-app.html
# Install as sandboxed (no capabilities)
node install-app.mjs ./my-app.html --sandboxed
# List provenance
node install-app.mjs --list
Key constraints:
window.omaSee RUNTIME.md for full contract.
~/.config/Claude/claude_desktop_config.json (or equivalent) for server entryps aux | grep open-mcp-apps.db file-wal and -shm siblings (SQLite write-ahead log)open-mcp-apps instance is running (they share data, no issue)PORT in env to use a different portopen-mcp-apps.db and restart (data lost)Run the full test suite:
npm test
Individual test files:
node test/server-smoke.mjs # 419 assertions (stdio MCP)
node test/http-smoke.mjs # 53 assertions (HTTP transport)
node test/provenance.mjs # 39 assertions (trust tiers)
node test/seed-smoke.mjs # 14 assertions (seed pipeline)
node test/files-smoke.mjs # 45 assertions (file store)
command_idexpected_version prevents conflictsUser says: "make me a kanban board"
AI workflow:
Check if exists:
{"name": "list_apps"}
Read guide (first time only):
{"name": "get_app_guide"}
Write app (HTML with columns: todo, in-progress, done):
<!DOCTYPE html>
<html>
<head><title>Kanban Board</title></head>
<body>
<div class="board">
<div class="column" data-status="todo">
<h2>To Do</h2>
<div class="tasks" id="todo"></div>
</div>
<div class="column" data-status="in-progress">
In Progress
Done
Add to To Do
The board now persists. In any future chat: "open my kanban board" → AI calls open_kanban → all tasks still there.
Repository: https://github.com/2nd1st/open-mcp-apps
Homepage: https://openmcp.app
License: AGPL-3.0
Save app:
{
"name": "save_app",
"arguments": {
"name": "kanban-board",
"title": "Kanban Board",
"description": "Visual task board with drag-and-drop",
"html": "<html>...</html>",
"version": "1.0.0",
"collections": ["tasks"]
}
}
Open with initial tasks:
{
"name": "open_kanban",
"arguments": {
"initial_items": {
"tasks": [
{"id": "1", "title": "Review PR", "status": "todo"},
{"id": "2", "title": "Fix bug", "status": "in-progress"},
{"id": "3", "title": "Deploy", "status": "done"}
]
}
}
}