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

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

npx @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, the best way to use Subframe is to recreate your library in Subframe. We will offer a guide to do this and eventually an import tool in the future.Note: If you’re interested in early access to importing your existing library, reach out to support@subframe.com

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 (recommended)

The MCP server lets AI tools like Claude Code, Cursor, and Codex fetch your designs directly and even create new ones. Agent skills teach your AI assistant how to use Subframe well — setting up projects, designing pages, and implementing 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.

Enable auto-update (recommended)

Keep the Subframe plugin up to date automatically:

Run /plugin to open the plugin manager
Select the Marketplaces tab
Choose the subframe marketplace
Select Enable auto-update

Verify installation

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

Create your first design

Follow the Working with AI agents guide to design and implement your first page.

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.

Create your first design

Follow the Working with AI agents guide to design and implement your first page.

Install MCP servers

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

Troubleshooting: Manual installation

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

~/.cursor/mcp.json

{
  "mcpServers": {
    "subframe": {
      "url": "https://mcp.subframe.com/mcp"
    },
    "subframe-docs": {
      "url": "https://docs.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.

Create your first design

Follow the Working with AI agents guide to design and implement your first page.

Install MCP servers

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

codex mcp add subframe --url https://mcp.subframe.com/mcp && codex mcp add subframe-docs --url https://docs.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"

[mcp_servers.subframe-docs]
url = "https://docs.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.

Create your first design

Follow the Working with AI agents guide to design and implement your first page.

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)

Configure the Subframe Docs MCP Server (optional)

Optionally add the Subframe Docs MCP server for documentation access:

URL: https://docs.subframe.com/mcp
Transport: HTTP
Authentication: None required

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 AI assistant to use Subframe.

Create your first design

Follow the Working with AI agents guide to design and implement your first page.

See our MCP server guide and agent skills guide for more details.

FAQ

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

You can use our MCP server to access your designs and documentation in your AI coding assistant and convert them to your preferred language and framework.While Subframe only generates React + Typescript + Tailwind code for now, we found that in practice, asking AI to convert the code to your preferred framework is far faster than starting from scratch. Our generated frontend code is high-quality and consistent, without the overhead that most LLMs add to AI-generated UI code, so AI’s often are able to convert the code to your preferred framework consistently in a single prompt.

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.

Core concepts

Guides

Troubleshooting

Prerequisites

Install Subframe

Next.js

Vite

Astro

Monorepo

Other (manual installation)

Install fonts

Set up Subframe MCP and agent skills (recommended)

FAQ

Core concepts

Guides

Troubleshooting

Documentation Index

​Prerequisites

​Install Subframe

Next.js

Vite

Astro

Monorepo

Other (manual installation)

​Install fonts

​Set up Subframe MCP and agent skills (recommended)

​FAQ

Prerequisites

Install Subframe

Install fonts

Set up Subframe MCP and agent skills (recommended)

FAQ