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.

The convert_stitch_to_react tool accepts the following parameters. You must provide either projectId or htmlScreens — all other options are optional.

Input source

projectId
string
The ID of a Google Stitch project. HolyStitch fetches every screen from the Stitch API and converts them all.Requires the STITCH_API_KEY environment variable to be set in your MCP config. See MCP server setup for how to add it.The project ID is in the Stitch URL:
https://stitch.withgoogle.com/project/12828868370598194178
                                       ^^^^^^^^^^^^^^^^^^^
screenIds
string[]
A subset of screen IDs to convert. When provided alongside projectId, only these screens are fetched and written as pages. Omit this field to convert every screen in the project.
htmlScreens
object[]
Pass HTML screens directly instead of fetching from the Stitch API. Each object becomes one page in the output. Use this when you have the HTML locally or want to convert without an API key.Each item requires:

Output location

outputDir
string
default:"cwd"
Directory to write the generated project. Defaults to the current working directory.Pass a relative name like "my-app" to write into a subfolder, or an absolute path like "/Users/alice/projects/my-app" to write anywhere on disk.

Framework and language

framework
string
default:"nextjs"
Target framework for the generated project.
ValueOutput
"nextjs"Next.js App Router project with app/ directory, layout.tsx, and next.config.js
"vite"Vite + React project
language
string
default:"typescript"
Language for all generated files.
ValueExtensions
"typescript".tsx / .ts
"javascript".jsx / .js
styling
string
default:"tailwind"
CSS framework used in the generated project. Currently only "tailwind" is supported. HolyStitch extracts your exact Stitch theme — colors, fonts, and dark mode config — into tailwind.config.js.

Examples

{
  "projectId": "12828868370598194178",
  "outputDir": "/Users/alice/projects/my-app"
}

What gets written

Regardless of which input method you use, HolyStitch writes a complete, ready-to-run project:
my-app
components
TopNavBar.tsx
Footer.tsx
HeroSection.tsx
app
layout.tsx
page.tsx
tailwind.config.js
package.json
tsconfig.json
project-context.md
After the tool completes, read project-context.md immediately. It contains the routing table, a step-by-step fix checklist, and instructions for your AI to verify pixel accuracy against the source HTML in stitch-source/.

Build docs developers (and LLMs) love