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 your agent 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 the Subframe MCP server

The MCP server lets AI coding agents in tools like Claude Code, Cursor, and Codex fetch and create Subframe designs.

https://mcp.subframe.com/mcp

When you connect, your client opens a browser window to sign in to Subframe and approve access using OAuth.

Claude
ChatGPT
Cursor
Manual

Add the Subframe connector from the Claude directory.Or in Claude Code:

claude mcp add --transport http subframe https://mcp.subframe.com/mcp

Then run /mcp in Claude Code to sign in.

Troubleshooting

Claude Code also loads your claude.ai connectors, so adding Subframe from the Claude directory covers Claude Code too.If you can’t add Subframe from the directory, add it as a custom 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
Find the Subframe connector in your connectors list and click Connect

Add the Subframe plugin from the ChatGPT directory.Or in Codex:

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

Troubleshooting

If sign-in doesn’t open, run codex mcp login subframe.If the command doesn’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

To use the Subframe plugin instead, install it from Codex’s plugin browser, or run the following commands, then run /mcp login subframe in a new session:

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

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.

Add Subframe to Cursor ↗ in one click, then check it’s connected in Customize > MCPs.

Troubleshooting

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"
    }
  }
}

See the MCP server guide for available tools.

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 the Subframe MCP server

FAQ

​Prerequisites

​Install Subframe

Next.js

Vite

Astro

Monorepo

Other (manual installation)

​Install fonts

​Set up the Subframe MCP server

​FAQ

Prerequisites

Install Subframe

Install fonts

Set up the Subframe MCP server

FAQ