Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/BaselAshraf81/holystitch/llms.txt

Use this file to discover all available pages before exploring further.

​
Prerequisites

  • Node.js 18 or later
  • A Google Stitch project with at least one screen
  • Claude Desktop, Cursor, Windsurf, or another MCP-compatible IDE

​
Setup

1

Clone and build

Clone the repository and build the MCP server:
git clone https://github.com/BaselAshraf81/holystitch
cd holystitch
npm install
npm run build
Note the full path to the folder — you need it in step 4. For example: /Users/alice/holystitch
On macOS and Linux, run pwd inside the holystitch directory to print the full path.
2

Get your Stitch API key

Open your Stitch project, go to Settings, and copy your API key.
Keep your API key private. Do not commit it to source control. You will add it as an environment variable in the MCP config, not hardcoded in any file.
3

Find your Stitch project ID

Open your Stitch project in the browser. The project ID is the number at the end of the URL:
https://stitch.withgoogle.com/project/12828868370598194178
                                       ^^^^^^^^^^^^^^^^^^^
                                       this is your project ID
Copy it — you will pass it to the conversion command in step 5.
4

Configure your IDE

Add HolyStitch as an MCP server in your IDE. Use the full path to the built entry point from step 1.
{
  "mcpServers": {
    "holystitch": {
      "command": "node",
      "args": ["/Users/alice/holystitch/packages/mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key-here"
      }
    }
  }
}
Replace /Users/alice/holystitch with the actual path where you cloned the repo.
Windows users: use the full path with forward slashes or escaped backslashes:
  • "C:/Users/alice/holystitch/packages/mcp-server/dist/index.js"
  • "C:\\Users\\alice\\holystitch\\packages\\mcp-server\\dist\\index.js"
After saving the config, restart your IDE so it picks up the new MCP server.
5

Run your first conversion

In your IDE’s AI chat, type:
Convert my Stitch project 12828868370598194178 into a Next.js app at /Users/alice/projects/my-app
Replace 12828868370598194178 with your actual project ID and /Users/alice/projects/my-app with the output path you want.HolyStitch fetches your screens, compiles every component, and writes the complete project to disk. Your AI assistant then works through the post-conversion checklist in project-context.md automatically — adding routes, resolving font tokens, and flagging anything that needs your review.

​
What gets generated

After the conversion, your output directory contains a complete, ready-to-run project: 
my-app/
├── components/
│   ├── TopNavBar.tsx          ← shared across all pages
│   ├── Footer.tsx             ← shared across all pages
│   ├── HeroSection.tsx
│   └── PricingCard.tsx
├── app/
│   ├── page.tsx               ← route: /
│   ├── changelog/
│   │   └── page.tsx           ← route: /changelog
│   └── pricing-plan/
│       └── page.tsx           ← route: /pricing-plan
├── stitch-source/             ← original HTML kept for reference
├── tailwind.config.js         ← your exact Stitch theme
├── package.json
├── tsconfig.json
└── project-context.md         ← routing table + AI checklist
Start the dev server with: 
cd my-app
npm install
npm run dev

​
Next steps

MCP setup

Detailed configuration for Claude Desktop, Cursor, and Windsurf.

Options

Set the framework (Next.js or Vite), language, and convert specific screens.

How it works

Understand the full Stitch → React compiler pipeline.

Post-conversion checklist

What to review and fix after your first conversion.

Build docs developers (and LLMs) love

Get started for freeTalk to us