Installation

Prerequisites

Subframe generates React components with Tailwind CSS. Your project needs:

React 16+
Tailwind CSS 3.4+
TypeScript

Install Subframe

Start from a new project or install in an existing project. Our CLI is open source ↗ and will help you get started quickly.

New project
Existing project

Run our CLI in a blank folder to scaffold a new pre-configured project and follow the prompts:

npx @subframe/cli@latest init

yarn dlx @subframe/cli@latest init

pnpx @subframe/cli@latest init

bunx @subframe/cli@latest init

Run our CLI in your project root and follow the prompts:

npx @subframe/cli@latest init

yarn dlx @subframe/cli@latest init

pnpx @subframe/cli@latest init

bunx @subframe/cli@latest init

Installation issues

If you run into installation issues, refer to one of these framework-specific troubleshooting guides:

Next.js

Vite

Astro

Monorepo

Other (manual installation)

Importing existing components

If you have an existing component library, use the /subframe:import agent skill with the Subframe MCP server to bring its theme, fonts, icons, and components into Subframe.

Install fonts

Your Subframe theme may use a Google Font or an uploaded custom font. You’ll need to add a snippet to your codebase to render the fonts correctly.

Copy the font import snippet

You can get the import code snippet from your Subframe theme ↗

Add the code snippet to your <head> tag

<head>
  <!-- Insert the font import snippet you copied here -->
  <!-- Example: importing the Inter font... -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet"
  />

  <!-- Remaining code in your `<head>` tag... -->
</head>

Set up Subframe MCP and agent skills

The MCP server lets AI coding agents in tools like Claude Code, Cursor, and Codex fetch and create Subframe designs. Agent skills guide your agent through setting up projects, designing pages, and implementing them with business logic.

Claude Code
Claude Desktop
Cursor
Codex
Other clients

Install the Subframe plugin

claude plugin marketplace add https://github.com/SubframeApp/subframe && claude plugin install subframe@subframe

The Subframe plugin for Claude Code sets up the MCP server and agent skills in one install.In the Claude desktop app’s Code tab, click + → Add plugins to install from marketplaces you’ve added. The terminal and desktop app share settings, so an install in one appears in the other.

Keep the plugin up to date

Claude Code turns auto-update off by default for third-party marketplaces, including Subframe. Run claude plugin update subframe@subframe to update manually, or run /plugin and select Marketplaces → subframe → Enable auto-update.

Verify installation

Run /mcp to check that the Subframe MCP server is connected, then try asking Claude Code to use Subframe.If you’ve also connected Subframe as a connector on claude.ai, Claude Code uses that connection and the plugin doesn’t add a second Subframe server.

Share with your team (optional)

Add the following to .claude/settings.json and commit it, so team members are prompted to install the Subframe plugin:

.claude/settings.json

{
  "enabledPlugins": {
    "subframe@subframe": true
  },
  "extraKnownMarketplaces": {
    "subframe": {
      "source": {
        "source": "github",
        "repo": "SubframeApp/subframe"
      }
    }
  }
}

Add the Subframe connector

Go to Customize > Connectors
Click and select Add custom connector
Set the name to Subframe
For Remote MCP Server URL, paste the following URL:
https://mcp.subframe.com/mcp
Click Add

Authenticate

Find the Subframe connector in your connectors list and click Connect. Follow the instructions on the Subframe website to complete authentication.

To install the plugin with the MCP server and skills, import https://github.com/SubframeApp/subframe into a Cursor team marketplace ↗, then open Customize, find Subframe, and click Install. Repository imports require an eligible Teams or Enterprise marketplace. The plugin will also be available in the Cursor Marketplace once listed. If you already use the Subframe plugin in Claude Code, Cursor can load it too when Include third-party Plugins, Skills, and other configs is on in Cursor Settings → Rules, Skills, Subagents.To install the MCP server and skills separately, follow these steps:

Install the MCP server

Add the Subframe MCP server to Cursor. You’ll be prompted to authenticate via OAuth.

Add Subframe MCP server to Cursor ↗

Troubleshooting: Manual installation

If the install link doesn’t work, make the following changes to ~/.cursor/mcp.json.

~/.cursor/mcp.json

{
  "mcpServers": {
    "subframe": {
      "url": "https://mcp.subframe.com/mcp"
    }
  }
}

Cursor will handle OAuth authentication automatically when you first connect.

Install agent skills

Agent skills are guided workflows that teach Cursor how to best use Subframe. Install them with:

npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent cursor --yes

Verify installation

Check that the Subframe MCP server has successfully connected in Cursor Settings > MCP, then try asking Cursor to use Subframe.

Install the Subframe plugin to add the MCP server and agent skills:

codex plugin marketplace add SubframeApp/subframe
codex plugin add subframe@subframe

Then start a new Codex session and run /mcp login subframe to sign in to Subframe.After adding the marketplace with the CLI, restart the ChatGPT desktop app, open Plugins, and install Subframe from the subframe marketplace.Codex refreshes git marketplaces on startup, so plugin updates arrive automatically. To update immediately, run codex plugin marketplace upgrade subframe and start a new session.Codex picks skills automatically, or you can invoke one explicitly with $subframe:design, $subframe:develop, or $subframe:import.The Codex IDE extension doesn’t support plugins. If you use the IDE extension, install the MCP server and skills separately with these steps:

Install the MCP server

Run the following commands to add the Subframe MCP server and authenticate:

codex mcp add subframe --url https://mcp.subframe.com/mcp && codex mcp login subframe

Troubleshooting: Manual installation

If the commands above don’t work, add the following to ~/.codex/config.toml:

~/.codex/config.toml

[mcp_servers.subframe]
url = "https://mcp.subframe.com/mcp"

Then authenticate:

codex mcp login subframe

Install agent skills

Agent skills are guided workflows that teach Codex how to best use Subframe. Install them with:

npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent codex --yes

Verify installation

Run /mcp in Codex to check that the Subframe MCP server is connected, then try asking Codex to use Subframe.

Configure the Subframe MCP Server

Configure your MCP client to connect to the Subframe MCP server:

URL: https://mcp.subframe.com/mcp
Transport: HTTP
Authentication: OAuth (your client will handle the authentication flow)

Install agent skills (optional)

If your client supports the Agent Skills standard, install the Subframe skills with:

npx skills add https://github.com/SubframeApp/subframe --skill '*' --agent '*' --yes

Verify installation

Restart your MCP client, then check that the Subframe MCP server has successfully connected and try asking your coding agent to use Subframe.

See the MCP server guide for available tools and Agent skills.

FAQ

What if I don't use React, TypeScript or Tailwind CSS?

You can use our MCP server to access your designs and documentation from your coding agent and convert them to your preferred language and framework.Subframe generates React, TypeScript, and Tailwind CSS code. You can ask your coding agent to adapt the exported code to another framework, then review and test the result in your app.

Will my code keep working if I stop using Subframe?

Yes. All generated code lives in your codebase and is yours to keep. Any dependencies you see are open source ↗.

How can I get additional installation support?

Join our active Slack community ↗ for additional support from the Subframe team and other users.

Design

Browser

Agent

Building from scratch

Admin and billing

Prerequisites

Install Subframe

Next.js

Vite

Astro

Monorepo

Other (manual installation)

Install fonts

Set up Subframe MCP and agent skills

FAQ

​Prerequisites

​Install Subframe

Next.js

Vite

Astro

Monorepo

Other (manual installation)

​Install fonts

​Set up Subframe MCP and agent skills

​FAQ

Prerequisites

Install Subframe

Install fonts

Set up Subframe MCP and agent skills

FAQ