메뉴
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에서 현재 제공할 수 있는 파일을 다운로드하세요.
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"}
]
}
}
}