Subframe MCP Server – AI UI Design and Components

Overview

Subframe's official MCP server connects compatible AI coding assistants directly to Subframe projects. It lets an agent work with live design-system context, generated React and Tailwind code, design documents, flows, snippets, themes, pages, and components instead of relying only on screenshots or copied snippets.

What the MCP server enables

Subframe documents tools across several design and implementation categories. Depending on project access, an AI agent can:

• List accessible projects and retrieve project metadata.
• List, inspect, design, edit, and delete pages.
• Generate one to four page variations as asynchronous jobs.
• List, inspect, design, edit, and delete components.
• Propagate component edits to pages that use those components.
• Create and edit standalone UI snippets.
• List and inspect user flows and delete flows when appropriate.
• Write or update project-level and component-level design documents.
• Retrieve generated React and Tailwind code for pages, components, and snippets.
• Read and edit the project theme, including colors, fonts, corners, shadows, typography, and tokens.
• Wait for asynchronous design jobs and retrieve their final results.

When to use it

Use Subframe MCP when an AI coding workflow needs direct access to a real UI design system. Typical uses include designing new application pages, creating reusable components, updating an existing design, generating implementation code, documenting component usage and accessibility guidance, reviewing available components, and migrating an existing interface to Subframe's design system.

It is especially useful when an agent must work with both the Subframe project and a local codebase in the same session.

Connection and authentication

The official hosted endpoint is https://mcp.subframe.com/mcp over HTTP. Compatible clients authenticate through OAuth, and the client handles the browser-based sign-in flow.

Subframe also provides a separate documentation MCP server at https://docs.subframe.com/mcp, but this YAML describes only the project-design server. Subframe access tokens are not accepted by the MCP server; use the documented OAuth flow instead.

Key considerations

Write and delete operations can affect live design-system resources. Page, component, and snippet deletions should be reviewed carefully, especially when references exist. Theme token deletion is destructive because existing references are replaced with concrete values. Some design operations run asynchronously and must be polled with the returned job ID before reading the final state. Access remains limited by the authenticated user's project permissions, and long-running jobs may be treated as stalled after approximately ten minutes.