mcpField
O
OpenUI MCP Studio

OpenUI MCP Studio

Local
xiaojiou176-open.github.ioDeveloper Tools1Updated 22w ago

About OpenUI MCP Studio

OpenUI MCP Studio turns short UI briefs into styled React + shadcn surfaces, with local preview, review, and export steps. It is for teams building interfaces that need screenshots and accessibility checks alongside the result.

Key features

  1. 01Brief-to-UI generation
  2. 02Local preview, diff, and export
  3. 03Screenshots and accessibility checks
  4. 04Reusable shadcn-aligned components
  5. 05Versioned brief and proof schemas

Use cases

  1. 01Turn a UI brief into a React surface
  2. 02Review visual changes before export
  3. 03Check accessibility in a UI workflow

MCP support

An MCP server lets agents submit a brief to the studio workflow.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

No install method listed yet

We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.

Repository

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

artist palette

ShadcnBrief

brief in, React + shadcn out, proof attached

Stars Last Commit License

What You Get • Install • How It Work • Ecosystem


ShadcnBrief takes a one-paragraph brief and produces a styled React + shadcn surface — with screenshots, accessibility checks, and proof attached. Open-source MCP studio, batteries included.

┌──────────────────────────────────────┐
│  LOCAL-FIRST          ████████ 100%  │
│  SOURCE-TRACEABLE     ████████ 100%  │
│  TYPING REQUIRED      ░░░░░░░░   0%  │
│  VIBES                ████████ ZERO  │
│                                FILLER│
└──────────────────────────────────────┘

MCP-driven UI generator. Brief, render, diff, ship.

What You Get

SurfaceWhat
studio appsBrief → preview → diff → export. All local.
packagesReusable shadcn-aligned components, themed for proof workflows.
mcp servicesHand a brief to any agent through an MCP server.
contractsSchemas for brief, render, and proof — versioned, diffable.
toolingSnapshot tests, a11y checks, design-token guardrails.

Important

Local-first by default. No silent telemetry. No cloud round-trip. Your data stays on your machine until you explicitly ship it somewhere.

Install

git clone https://github.com/xiaojiou176-open/shadcn-brief.git
cd ShadcnBrief
# follow the per-stack quickstart in INSTALL.md or docs/

Three commands. No curl | sh. No login. Read what you run.

Install break? Open your favorite agent and say "Read AGENTS.md and bootstrap ShadcnBrief for me." Agent fix own brain. Long version: docs/.

How It Work

The repo is seven layers — exactly the seven commits in git log. New work goes in as small named PRs. No 50-file mystery commits.

LayerWhat
chore: scaffoldLicense, governance, hygiene gates, CI scaffolding.
feat(core)The primary engine. The reason ShadcnBrief exists.
feat(modules)Packages, adapters, services, plugins. The second floor.
feat(contracts)Schemas, configs, public boundaries. Other code talks here.
test:Receipts. Everything in this layer must run.
feat(ops)Scripts, infra, CI helpers, build glue.
docs:Public docs surface. The pretty face.

git log reads like a building floor plan. Look once, know the whole shape.

Ecosystem

ShadcnBrief lives in the open family: three open platforms. local-first, source-first, builder-first.

RepoWhat
OpenCampusCanvas + Gradescope + EdStem on one calm desk
OpenVibeCodingAI codes overnight, you ship in the morning
ShadcnBrief (you here)brief in, React + shadcn out, proof attached

Cross-family taste: BeamMe · BrewMe · OpenVibeCoding · proofyard.

Star This Repo

If ShadcnBrief saves you a click, an hour, or a headache — star costs zero. Fair trade. ⭐

Star History Chart

Also by Yifeng[Terry] Yu

  • OpenCampus — Canvas + Gradescope + EdStem on one calm desk
  • OpenVibeCoding — AI codes overnight, you ship in the morning
  • BeamMe — beam your agent config to any planet
  • BrewMe — wake up, news already brewed
  • proofyard — every claim ships with its receipt

License

MIT — small print, big freedom.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.