メニュー
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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| 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"}
]
}
}
}