tenet-ui-mcp
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@tenet-ui-mcplist Button props and tokens for tenet-ui 0.4.0"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
tenet-ui-mcp
The design-to-code MCP server for the tenet-ui design system, built to the design in mcp-masterclass/design/ds-mcp-server/DESIGN.md (rev 3). The server supplies context and judgment; the agent writes the code and runs the checks.
Status: step 1 of the build order, in progress. The ingest pipeline is done; the catalog tools, transport and auth come next.
What is here
src/ingest/ the data pipeline (DESIGN.md §10)
cli.ts npm run ingest -- <version|latest> | --new | --watch | --list
registry.ts npm packument, version resolution, provenance claim check
tarball.ts download, sha512 integrity, extract
extract/types.ts the published .d.ts → components, props, unions, @default, @deprecated (TypeScript compiler API)
extract/catalog.ts types + the package's own generated/components.json → one catalog, mismatches reported
extract/stories.ts the deployed Storybook's index.json
extract/baselines.ts the baselines-vX.Y.Z.tgz release asset (downloaded, never rendered)
extract/guidelines.ts generated/guidelines/**.md → a guidelines revision; docs-site llms.txt recorded alongside
extract/package-data.ts tokens (+ contrast pairs), icons, deprecations, changelog
snapshot.ts assemble, validate fail-closed, publish into snapshots/index.json
snapshots/ one folder per ingested version + one per guidelines revision (committed; the server image carries them)
.github/workflows/ ci.yml · ingest.yml (repository_dispatch from tenet-ui's release, 6-hourly registry watch, manual)Related MCP server: Design MCP
Ingest
npm ci
npm run ingest -- 0.4.0 # one version
npm run ingest -- latest
npm run ingest -- --new # every registry version newer than the newest snapshot (the registry watch)
npm run ingest -- --listSources, in the order they are read, and what each yields:
Source | Read from | Yields |
Provenance | npm attestations endpoint | The SLSA statement must name |
Types |
| Every export: components, hooks, props with types, literal unions expanded, required flags, |
Catalog |
| Status, |
Guidelines |
| A guidelines revision |
Tokens, icons, deprecations, changelog |
| The token registry with documented contrast pairs; the icon manifest; the migration registry; parsed releases |
Stories |
| Story ids, titles, play-function tags |
Baselines |
| 1280×800 screenshots per story per theme with a sha256 manifest |
Every snapshot carries a manifest.json listing each source with its sourceRef, content hash and extractedAt, and a gaps.json (typed components with no story, no baseline, no guideline, catalog mismatches). The version index is only updated after the whole snapshot validates. Missing sources fail the run unless named in --allow-missing.
Environment: DS_PACKAGE, DS_REPOSITORY, DS_DOCS_URL, DS_STORYBOOK_URL, SNAPSHOTS_DIR, GITHUB_TOKEN (release-asset download rate limit).
Keeping it current
ingest.yml runs the same command on three triggers: a repository_dispatch of type tenet-ui-released from tenet-ui's release workflow (set DS_MCP_REPO_TOKEN there), a 6-hourly schedule that ingests anything new on the registry, and a manual run. A successful ingest commits the snapshot to main.
Next
DESIGN.md §15: the five read-only catalog tools over these snapshots, ds:// resources, Streamable HTTP with header validation, the built-in HS256 issuer with AUTH_MODE=none, structured output, spans. Then ingest → match → plan, then checks over the capture script's results, then audit and tests.
This server cannot be deployed
Maintenance
Related MCP Connectors
Serves your design system and coding standards to coding agents, so they stop guessing.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Read-only MCP over the Mzizi design system registry — nodes, components, ownership.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Related MCP Servers
- AlicenseNot gradedqualityAmaintenanceA read-only MCP server that provides AI coding agents with a queryable contract for design system tokens, components, patterns, and anti-patterns.6 npm1Apache 2.0
- AlicenseNot gradedqualityBmaintenanceProvides source-backed design context, route card validation, contract generation, critique and verification reports, evidence packages, Penpot change plans, and anti-repeat checks for design workflows. Does not directly mutate Penpot, but consumes read-only Penpot snapshots.8 npmMIT
- AlicenseAqualityAmaintenanceRead-only MCP server that exposes a design system's tokens, components, conventions, and deprecations as queryable tools, enabling agents to look up canonical values, assess change impact, and detect hardcoded value drift.81 npmMIT
- AlicenseAqualityAmaintenanceA read-only MCP server that recommends React components from a measured, curated snapshot by answering component-fit questions with terse verdicts and harness facts.99 npmMIT