MCP server

Open Components

com.uxfront/open-components

Checked 25 Oct 2026, 20:29 UTC · Connected to it and listed its tools

Guidelines for UI components with a perfect UX, DX and AX, whether humans or AI agents write them.

Website Source

At a glance

Type

MCP server

Publisher

uxfront.com (verified by the MCP Registry)

Status

Working at last check

Tools

6

Token cost

About 2,661 tokens per request

Sets up in

Claude Code, Claude Desktop, Codex, Gemini CLI, Cursor, VS Code, Antigravity, ChatGPT, OpenAI API, Grok

Last checked

25 Oct 2026, 20:29 UTC

Connect it to your agent

Add to CursorAdd to VS CodeVS Code Insiders

Opens the app, which shows the server and asks you to confirm. For other apps, copy the setup below.

Claude Code

claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp

Claude Desktop

Settings → Connectors → Add custom connector, and paste the URL.

Codex (config.toml)

[mcp_servers.open-components]
url = "https://mcp.opencomponents.dev/mcp"

Gemini CLI

{"mcpServers":{"open-components":{"httpUrl":"https://mcp.opencomponents.dev/mcp"}}}

Cursor

{"mcpServers":{"open-components":{"url":"https://mcp.opencomponents.dev/mcp"}}}

VS Code

{"servers":{"open-components":{"type":"http","url":"https://mcp.opencomponents.dev/mcp"}}}

Antigravity

agy mcp add open-components https://mcp.opencomponents.dev/mcp

ChatGPT

Settings → Apps & Connectors → Advanced settings: turn on Developer mode, then Create a connector and paste the URL. Which plans can do this varies.

OpenAI API (Responses tools)

{"type":"mcp","server_label":"open-components","server_url":"https://mcp.opencomponents.dev/mcp","require_approval":"always"}

Grok (xAI API tools)

{"type":"mcp","server_label":"open-components","server_url":"https://mcp.opencomponents.dev/mcp"}

Tools

• get-contract ~327 tokens
  Returns the contract of a component or a foundation, as YAML: its API (props, slots and events), its DOM contract (element, role, states, keyboard and parts), its tokens, and every rule in its checklist, each with a stable ID (like button/keep-focus), a level (must or should), a scope (component, us
• get-page ~514 tokens
  Reads a docs page as markdown, whole or just the sections you name. Component pages explain why each rule exists, with examples in React, Vue, Svelte, Angular, Solid, Astro and Vanilla: pass a framework to keep only its examples. WHEN TO USE: for the reasoning, an example or the details behind a ru
• get-reference-implementation ~330 tokens
  Returns a shipped component's reference implementation: a Vue 3 component that meets every rule in its checklist, the tests that prove it, the helpers it shares with other components and its theme tokens. The live examples on the site run on this code. WHEN TO USE: to build a component that meets t
• list-components ~281 tokens
  Lists what the Open Components standard covers: the components that have shipped (like Button), the foundations every component follows (like Design Tokens), and the components planned on the Roadmap. WHEN TO USE: to check whether a component has a standard yet, to get the name the other tools take
• list-rules ~801 tokens
  Lists checklist rules as records, filtered by component, ID, scope, layer, level or check. Each rule has a stable ID to cite in reviews and commits, its level (must or should), its scope, its requirement, how to check it (like a unit test, a review or axe's button-name rule) and a link to it. WHEN
• search-docs ~408 tokens
  Searches the whole standard, every section of every page and every checklist rule, and returns the best matches: where each one is, a short excerpt, and for rules, their ID, level and scope. WHEN TO USE: to find where a topic is covered when you don't know the page or the section, like "focus after

Browse

• Svelte tools
• Converting to Markdown

Related MCP servers

• R3
  Build 3D web apps: physics, audio, music, Blender import. Live edits, undo, versions, publishing.
• Compose Preview Catalogs
  Browse, inspect and render Jetpack Compose Material 3 and Wear component catalogs.
• SparkPay
  Stripe billing for indie apps: plans, coupons, subscriptions, customers and revenue reporting.
• HTML Email Playbook
  Teaches AI to write HTML email that renders in Outlook, Gmail, and Apple Mail. 19 rules, 6 comps.
• Polyxd
  Write Polyxd UI documents, check them, and show them as real screens in any design-system pack.
• DatePhotos.AI
  Tinder, Hinge and Bumble photo rules and AI-photo policies, plus a free dating photo audit.
• CueFrame
  Turn footage into finished video: reframing, captions behind the subject, motion graphics, renders.
• Kaiku
  Issue tracker and wiki for teams and their agents: find, file and update issues, write pages.

Badge for your README

[![AptLynx](https://aptlynx.net/badge/com.uxfront/open-components.svg)](https://aptlynx.net/servers/com.uxfront/open-components)

Listing text is written by the maker; AptLynx lists tools and does not vouch for them. Find another tool · Browse by topic · For agents