> ## Documentation Index > Fetch the complete documentation index at: https://subframe-59800133-apg-edit-updates.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Installation > Set up Subframe in your codebase. ## 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 ↗](https://github.com/SubframeApp/subframe/tree/main/packages/subframe-cli) and will help you get started quickly. Run our CLI in a blank folder to scaffold a new pre-configured project and follow the prompts: ```bash npm theme={null} npx @subframe/cli@latest init ``` ```bash yarn theme={null} yarn dlx @subframe/cli@latest init ``` ```bash pnpm theme={null} pnpx @subframe/cli@latest init ``` ```bash bun theme={null} bunx @subframe/cli@latest init ``` Run our CLI in your project root and follow the prompts: ```bash npm theme={null} npx @subframe/cli@latest init ``` ```bash yarn theme={null} yarn dlx @subframe/cli@latest init ``` ```bash pnpm theme={null} pnpx @subframe/cli@latest init ``` ```bash bun theme={null} bunx @subframe/cli@latest init ``` If you run into installation issues, refer to one of these framework-specific troubleshooting guides: If you have an existing component library, you have two paths: * **Build incrementally** (recommended) — use the [Subframe MCP server](/guides/mcp-server) or the `/subframe:design` agent skill to design components and snippets and write documentation, one at a time. Works for any team and any size of design system. * **Bulk-upload in one batch** — if you want to upload many components in a single CLI invocation rather than one at a time, the `/subframe:bulk-import` agent skill drives that flow. Currently gated to select teams — reach out to [support@subframe.com](mailto:support@subframe.com) for access. ## Install fonts Your Subframe theme may use a Google Font or an [uploaded custom font](/learn/theme/adding-custom-fonts). You'll need to add a snippet to your codebase to render the fonts correctly. You can get the import code snippet from your [Subframe theme ↗](https://app.subframe.com/library?component=theme\&showInstallFontsModal=true) ```html theme={null} ``` ## 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. ```bash theme={null} 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. Keep the Subframe plugin up to date automatically: 1. Run `/plugin` to open the plugin manager 2. Select the **Marketplaces** tab 3. Choose the **subframe** marketplace 4. Select **Enable auto-update** Run `/mcp` to check that the Subframe MCP server is connected, then try asking Claude Code to use Subframe. Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page. 1. Go to [**Customize > Connectors**](https://claude.ai/customize/connectors) 2. Click and select **Add custom connector** 3. Set the name to **Subframe** 4. For **Remote MCP Server URL**, paste the following URL: ``` https://mcp.subframe.com/mcp ``` 5. Click **Add** Find the Subframe connector in your connectors list and click **Connect**. Follow the instructions on the Subframe website to complete authentication. Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page. Add the Subframe MCP servers to Cursor. You'll be prompted to authenticate via OAuth. * [Add Subframe MCP server to Cursor ↗](https://cursor.com/en-US/install-mcp?name=subframe\&config=eyJ1cmwiOiJodHRwczovL21jcC5zdWJmcmFtZS5jb20vbWNwIn0%3D) * (Optional) [Add Subframe Docs MCP server to Cursor ↗](https://cursor.com/en-US/install-mcp?name=subframe-docs\&config=eyJ1cmwiOiJodHRwczovL2RvY3Muc3ViZnJhbWUuY29tL21jcCJ9) If the install links don't work, make the following changes to `~/.cursor/mcp.json`. ```json ~/.cursor/mcp.json theme={null} { "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. Agent skills are guided workflows that teach Cursor how to best use Subframe. Install them with: ```bash theme={null} npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent cursor --yes ``` Check that the Subframe MCP server has successfully connected in **Cursor Settings** > **MCP**, then try asking Cursor to use Subframe. Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page. Run the following commands to add the Subframe MCP servers and authenticate: ```bash theme={null} 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 ``` If the commands above don't work, add the following to `~/.codex/config.toml`: ```toml ~/.codex/config.toml theme={null} [mcp_servers.subframe] url = "https://mcp.subframe.com/mcp" [mcp_servers.subframe-docs] url = "https://docs.subframe.com/mcp" ``` Then authenticate: ```bash theme={null} codex mcp login subframe ``` Agent skills are guided workflows that teach Codex how to best use Subframe. Install them with: ```bash theme={null} npx skills add https://github.com/SubframeApp/subframe --skill '*' -g --agent codex --yes ``` Run `/mcp` in Codex to check that the Subframe MCP server is connected, then try asking Codex to use Subframe. Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page. 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) Optionally add the Subframe Docs MCP server for documentation access: * **URL:** `https://docs.subframe.com/mcp` * **Transport:** HTTP * **Authentication:** None required If your client supports the [Agent Skills](https://agentskills.io) standard, install the Subframe skills with: ```bash theme={null} npx skills add https://github.com/SubframeApp/subframe --skill '*' --agent '*' --yes ``` Restart your MCP client, then check that the Subframe MCP server has successfully connected and try asking your AI assistant to use Subframe. Follow the [Working with AI agents](/learn/guides/working-with-ai-agents) guide to design and implement your first page. See our [MCP server guide](/guides/mcp-server) and [agent skills guide](/guides/skills) for more details. ## FAQ You can use our [MCP server](/guides/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. Yes. All generated code lives in your codebase and is yours to keep. Any dependencies you see are [open source ↗](https://github.com/SubframeApp/subframe). Join our active [Slack community ↗](https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ) for additional support from the Subframe team and other users.