Basecoat UI MCP

Name: Basecoat UI MCP
Author: zygiu-zygis

โดย zygiu-zygisรุ่น 1.8.0i★ 18iรันบนเครื่อง

ชื่อใน registryio.github.zygiu-zygis/basecoat-ui-mcp

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Offline Basecoat UI MCP: templates, macro layouts, theming contract, and static validation.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 2 จาก 2 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiเริ่มต้น↓ 76/สัปดาห์ · ★ 18

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
หมวด: อื่น ๆ

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ผลตรวจเบื้องต้น: ผ่าน 2 จาก 2 ข้อ
รันในเครื่องคุณด้วยสิทธิ์ของผู้ใช้คุณ (ไฟล์ อินเทอร์เน็ต แอปต่าง ๆ)
ค่าที่คุณต้องใส่เอง: BASECOAT_PROJECT_ROOT

ต้องเตรียมก่อน

npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@intellmedia/basecoat-ui-mcp"
      ],
      "env": {
        "BASECOAT_PROJECT_ROOT": "ใส่ค่าของคุณ"
      }
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add basecoat-ui --env BASECOAT_PROJECT_ROOT='ใส่ค่าของคุณ' -- npx -y @intellmedia/basecoat-ui-mcp

เติมค่าที่เว้นว่างไว้ก่อนรัน

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@intellmedia/basecoat-ui-mcp"
      ],
      "env": {
        "BASECOAT_PROJECT_ROOT": "ใส่ค่าของคุณ"
      }
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "basecoat-ui": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@intellmedia/basecoat-ui-mcp"
      ],
      "env": {
        "BASECOAT_PROJECT_ROOT": "ใส่ค่าของคุณ"
      }
    }
  }
}

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าที่ต้องใส่เอง

BASECOAT_PROJECT_ROOT env
Optional host application directory for basecoat://project/context (overridden by --project-root)

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 10 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub zygiu-zygis ซึ่งเป็นเจ้าของ repo
✓ ผ่าน
ยังมีคนดูแล
มีการแก้โค้ดล่าสุด 10 วันที่ผ่านมา
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด อื่น ๆi

ดาวมากกว่า 96% ของอีก 19071 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 62% ของอีก 19071 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 19071 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Basecoat UI MCP ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 2 จาก 2 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด 10 วันที่ผ่านมา และส่งรุ่นล่าสุด (1.8.0) เข้า registry 27 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี World Monitor, Claude Flow, Tldraw

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

World Monitor

Real-time global intelligence on conflict, markets, energy, trade, shipping and cyber. 102 tools.

โดย koala73ใช้กันมาก★ 90.4Kอัปเดต 5 วันที่ผ่านมา

รันบนคลาวด์✓ worldmonitor.app

ติดตั้ง

Claude Flow

AI orchestration with hive-mind swarms, neural networks, and 87 MCP tools for enterprise dev.

โดย ruvnetใช้กันมาก↓ 13.5K/สัปดาห์★ 81.4Kอัปเดต 14 เดือนที่ผ่านมา

รันบนเครื่อง

ติดตั้ง

Tldraw

Draw and visually collaborate with your agents on tldraw's canvas.

โดย tldrawใช้กันมาก★ 51.4Kอัปเดต 8 เดือนที่ผ่านมา

รันบนคลาวด์

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

Basecoat UI MCP

Offline Model Context Protocol server for Basecoat UI (shadcn/ui look without bundling or requiring React).

Curated templates, macro layouts, rhythm tokens, and static validation for Astro, Next.js, HTML, and Tailwind CSS 4.

The server exposes a deterministic, offline registry for AI coding agents instead of requiring clients to scrape documentation. It runs over local stdio with zero runtime network requests, bounded < 2 KB responses, and bounded lexical/heuristic static source validation. The host application remains responsible for rendering, data access, authentication, sessions, credentials, OAuth, captcha, and other runtime behavior.

Install

Requires Node.js 22.14.0 or newer.

Quick Start by Client

Cursor (`.cursor/mcp.json`)

"mcpServers": { "basecoat-ui": { "command": "npx", "args": ["-y", "@intellmedia/basecoat-ui-mcp", "--project-root", "${workspaceFolder}"] } } }

Claude Desktop (`claude_desktop_config.json`)

"mcpServers": { "basecoat-ui": { "command": "npx", "args": ["-y", "@intellmedia/basecoat-ui-mcp", "--project-root", "/absolute/path/to/your/application"] } } }

Claude Code (CLI)

claude mcp add basecoat-ui -- npx -y @intellmedia/basecoat-ui-mcp --project-root $(pwd)

Generic npx (no install)

"mcpServers": { "basecoat-ui": { "command": "npx", "args": ["-y", "@intellmedia/basecoat-ui-mcp", "--project-root", "/absolute/path/to/your/application"] } } }

npm

npm install --global @intellmedia/basecoat-ui-mcp

Add the server to an MCP client. Use an absolute path for the host application so design context and persistent sessions belong to the intended project:

"mcpServers": { "basecoat-ui": { "command": "basecoat-ui-mcp", "args": ["--project-root", "/absolute/path/to/your/application"] } } }

The compiled entry can also be invoked directly:

"mcpServers": { "basecoat-ui": { "command": "node", "args": [ "/absolute/path/to/node_modules/@intellmedia/basecoat-ui-mcp/dist/server/stdio.js", "--project-root", "/absolute/path/to/your/application" ] } } }

Published packages include prebuilt dist/ and the immutable semantic snapshot under src/semantics/. Server startup reads that snapshot and does not write inside the installed package. The package contract test builds first, creates and extracts an actual npm tarball, marks the extracted package tree read-only, starts its dist/server/stdio.js under a network tripwire, completes MCP initialize and tool-list requests, and closes the connection. A source checkout does not include dist/.

From source

git clone https://github.com/zygiu-zygis/basecoat-ui-mcp.git

cd basecoat-ui-mcp npm ci npm run build npm start -- --project-root /absolute/path/to/your/application

--project-root takes precedence over BASECOAT_PROJECT_ROOT, which takes precedence over the launch directory. The selected directory is the host project, not the MCP installation directory. The server exposes stdio only.

Project-root configuration

The configured root controls two things:

DESIGN.md is read from that directory by basecoat://project/context.
Persistent macro sessions are stored under /.basecoat/designer/.
.basecoat/rhythm.json is an optional strict override. It must live under a real .basecoat directory inside the project root, be a regular non-symlink file no larger than 65,536 UTF-8 bytes, and resolve inside that root; missing or rejected files leave the packaged profile unchanged. Matching mapping IDs replace in place and keep packaged order.

Only that exact directory is used. The server does not walk parent directories. Keep .basecoat/ in the host project and back it up if design sessions are part of your workflow. The MCP server never writes host application source files.

Basecoat MCP tools

The server exposes 22 offline MCP tools organized across six architectural layers: project setup and configuration, intent-driven layout orchestration, theme-aware charts, component retrieval, macro design graphs, and semantic state contracts. Every tool result is a bounded MCP packet of at most 1,999 UTF-8 bytes. Larger result sets use cursors; responses are not sliced mid-JSON.

Complete MCP Tool Table

Tool Name	Layer	Description	Mode
`basecoat_setup_config`	Setup & Config	Generates framework boilerplates, Tailwind CSS 4 imports, OKLCH variables, and no-flash dark mode scripts	Read-only
`basecoat_page_architect`	Intent Fast Path	Plans complete layout scaffolds with container grid contracts and explicit slot topology	Read-only
`basecoat_compose_stack`	Intent Fast Path	Assembles composable component stacks into canonical shells (sidebar-01..16, topbar, inset, split) with slot hydration	Read-only
`basecoat_rules_enforcer`	Intent Fast Path	Enforces technical constraints across Tailwind v4, FSM state contracts, semantic tokens, and dashboard rules	Read-only
`basecoat_creative_director`	Intent Fast Path	Surfaces Kanso minimalism, 4px/8px optical rhythm, density profiles, typography ladders, and contrast pairings	Read-only
`basecoat_component_syntax`	Intent Fast Path	Delivers copy-pasteable HTML/Astro component markup with pre-configured FSM state variants and inline SVG icons	Read-only
`basecoat_list_charts`	Charts & Data Viz	Lists and filters 56 theme-aware chart blueprints across 7 categories with keyword search	Read-only
`basecoat_get_chart_blueprint`	Charts & Data Viz	Retrieves chart HTML using semantic CSS tokens (--chart-1..5) and mount scripts for 5 frameworks	Read-only
`basecoat_quality_inspector`	Quality & Audit	Audits HTML/Astro markup with Score (0-100), letter grade, syntax violations, a11y omissions, and auto-fix suggestions	Read-only
`search_components`	Components	Searches up to 8 compact component summaries by intent and/or query across 62 curated components	Read-only
`get_component_details`	Components	Retrieves minimal component template, dependencies, and composition guidance for Astro or HTML	Read-only
`get_component_html`	Components	Retrieves HTML markup template and dependencies for any curated component	Read-only
`validate_composition`	Static Analysis	Statically checks up to 256 KiB of markup for migration errors, rhythm, FSM bindings, and accessibility	Read-only
`validate_markup`	Static Analysis	Validates HTML/Astro markup syntax, structure, landmark ordering, and semantic constraints	Read-only
`search_macro_blocks`	Macro Graph	Searches approved macro layout blocks by query, role, family, or tag across 84 blocks and aliases	Read-only
`get_macro_block`	Macro Graph	Retrieves a section of a compiled macro block blueprint (manifest, structure, slots, ports, rules, etc.)	Read-only
`begin_design`	Macro Graph	Creates a persistent, hash-verified design session under .basecoat/designer/ pinning profile and registry revision	Mutation (idempotent)
`get_design_context`	Macro Graph	Reads focused design session views (sessions, overview, decisions, graph, rules, focus, next)	Read-only
`apply_design_patch`	Macro Graph	Applies atomic graph mutations with expectedRevision and idempotent operationId	Mutation (idempotent)
`validate_design`	Macro Graph	Validates draft or complete design graphs, returning diagnostic totals and paginated issues	Read-only
`get_rhythm_rules`	Semantics & Tokens	Reads effective semantic rhythm profiles and approved utilities by family, supporting project-local overrides	Read-only
`get_fsm_recipe`	Semantics & State	Reads finite state machine interaction states, events, transitions, guards, and actions	Read-only

Intent-Driven Design Layer (Fast Path)

basecoat_setup_config - Framework and styling configuration generator. Outputs ready-to-use boilerplate for 6 targets (astro, vanilla, nextjs, sveltekit, vite, htmx), 8 aesthetic style packs (vega, nova, maia, lyra, mira, luma, sera, rhea), complete OKLCH @theme inline blocks, and synchronous inline dark mode scripts.
basecoat_page_architect - Query recipes (src/macros/authoring/recipes/*.json) and macro blocks (src/macros/authoring/blocks/*.json) by intent, recipe, or block. Delivers full layout scaffolds with explicit data-slot markers, semantic HTML skeletons, grid structures, and responsive containers. Fully covers 5 dashboard page archetypes:

Executive Dashboard (workspace-dashboard, executive-dashboard) - KPI stat cards, revenue chart, and recent activity.
E-commerce Overview (ecommerce-overview) - Sales metrics, revenue analytics, top products card, and order summary.
Analytics Workspace (analytics-workspace) - Filter toolbar, time-series interactive chart, and cohort analysis breakdown.
Data Table Detail (workspace-detail, data-table-detail) - Paginated data table with search/filters and slide-over inspection drawer.
Settings Split-Screen (workspace-settings, settings-split-screen) - Two-column responsive layout with vertical section navigation and form controls. Supports density controls (compact for high-density enterprise tools, comfortable for standard interfaces).

basecoat_compose_stack - Dynamically composes 45 pre-built component stacks across 7 categories (shell-stacks, header-stacks, kpi-stacks, chart-stacks, table-stacks, overlay-stacks, form-stacks) into canonical shells (sidebar-01..sidebar-16, topbar-shell, inset-shell, split-shell) with automated slot hydration.
basecoat_rules_enforcer - Enforces strict technical constraints across tailwind-v4, fsm-contracts, tokens, semantic-html, and dashboard-patterns:

MET-01: KPI numerals require text-2xl/text-3xl with tabular-nums and semantic trend indicators.
TBL-01: Data tables require wrapper, sticky blurred , and right-aligned numeric cells.
FRM-01: Input controls require wrappers with associated .
NAV-01: Headers must use compact h-12 or h-14 (forbidding oversized h-16).
TW4-01: Rejects deprecated Tailwind v3 utilities (bg-opacity-*, flex-shrink-*, @tailwind directives).
TOK-01: Rejects arbitrary bracket dimensions (w-[327px]) and hardcoded hex colors (#ff0000, bg-[#123456]).
FSM-01: Enforces finite sta

ตัดมาแค่ช่วงต้น อ่านต่อใน repo

Basecoat UI MCP

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

ค่าที่ต้องใส่เอง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

เทียบกับตัวอื่นในหมวด อื่น ๆi

คำถามที่พบบ่อย

ตัวที่ใช้แทนได้

World Monitor

Claude Flow

Tldraw

README จากผู้ทำ

Install

Quick Start by Client

Cursor (.cursor/mcp.json)

Claude Desktop (claude_desktop_config.json)

Claude Code (CLI)

Generic npx (no install)

npm

From source

Project-root configuration

Basecoat MCP tools

Complete MCP Tool Table

Intent-Driven Design Layer (Fast Path)

Cursor (`.cursor/mcp.json`)

Claude Desktop (`claude_desktop_config.json`)