loaditout.ai
SkillsPacksTrendingLeaderboardAPI DocsBlogSubmitRequestsCompareAgentsXPrivacyDisclaimer
{}loaditout.ai
Skills & MCPPacksBlog

openui-mcp-studio

MCP Tool

xiaojiou176-open/openui-mcp-studio

Generate, apply, and verify production-ready React and shadcn UI from natural-language briefs.

Install

$ npx loaditout add xiaojiou176-open/openui-mcp-studio

Platform-specific configuration:

.claude/settings.json
{
  "mcpServers": {
    "openui-mcp-studio": {
      "command": "npx",
      "args": [
        "-y",
        "openui-mcp-studio"
      ]
    }
  }
}

Add the config above to .claude/settings.json under the mcpServers key.

About

OpenUI MCP Studio

OpenUI MCP Studio is a local stdio MCP server that turns natural-language UI requests into governed frontend delivery.

English is the canonical source of truth for repository governance and maintenance.

What This Repository Is
  • The repository entrypoint is services/mcp-server/src/main.ts.
  • Tool registration and orchestration live in services/mcp-server/src/index.ts.
  • The MCP server remains the system protocol entrypoint.
  • apps/web is the default frontend proof target for smoke, E2E, visual, and

UI/UX checks.

  • contracts/* and tooling/* contain the machine-governed repository control

plane.

  • This repository is a long-lived productized fork and uses selective port

maintenance instead of whole-repo upstream merge as the default path.

Quick Start
npm install
cp .env.example .env
npx playwright install chromium firefox webkit
npm run build
npm start
Core Commands
npm run lint
npm run typecheck
npm run test
npm run test:e2e
npm run smoke:e2e
npm run docs:check
npm run repo:doctor
npm run repo:verify:fast
npm run repo:verify:full
npm run repo:upstream:check
npm run release:public-safe:check
Minimum Docs
  • Docs index: docs/index.md
  • Architecture: docs/architecture.md
  • Environment governance: docs/environment-governance.md
  • Testing: docs/testing.md
  • Governance runbook: docs/governance-runbook.md
  • Release readiness: docs/release-readiness.md
  • Upstream maintenance: docs/upstream-sync-sop.md
  • Secrets and incident routing: docs/secrets-incident-runbook.md
  • Agent baseline: AGENTS.md
  • Claude guidance: CLAUDE.md
Community And Legal Surface
  • LICENSE
  • SECURITY.md
  • CONTRIBUTING.md
  • CODEOWNERS
  • CODE_OF_CONDUCT.md
  • SUPPORT.md
Security And Release Truth
  • The repository is public.
  • main is protected.
  • Required checks are enforced.
  • CODEOWNERS review is enforced.
  • Secret scanning is enabled.
  • Push protection is enabled.
  • Private vulnerab

Tags

agent-toolsai-uidesign-to-codedeveloper-toolsfrontend-workflowmcpnextjsopenuiquality-gatesreactshadcntailwindui-generationui-testing

Reviews

Loading reviews...

Quality Signals

0
Installs
Last updated23 days ago
Security: AREADME

Safety

Risk Levelmedium
Data Access
read
Network Accessnone

Details

Sourcegithub-crawl
Last commit3/25/2026
View on GitHub→

Embed Badge

[![Loaditout](https://loaditout.ai/api/badge/xiaojiou176-open/openui-mcp-studio)](https://loaditout.ai/skills/xiaojiou176-open/openui-mcp-studio)