frameshot

Give your AI agent eyes. Render components with real Vite imports, Tailwind, and CSS Modules — right in your terminal or AI chat. No story files required.

<p align="center"> <img src="docs/demo.gif" alt="frameshot demo" width="720" /> </p>

Claude Code

claude mcp add frameshot -- npx frameshot-mcp@latest

<details> <summary>Cursor · VS Code · Windsurf · Cline</summary>

{
  "mcpServers": {
    "frameshot": {
      "command": "npx",
      "args": ["frameshot-mcp@latest"]
    }
  }
}

</details>

Watch mode — live AI feedback loop

The AI edits a file, saves it, and immediately sees how it looks — without you calling anything.

watch_start({ patterns: ["src/components/Button.tsx"] })
→ renders on every save → call watch_get_latest("watch-1") to see it

The agent fixes → saves → sees → fixes again. You just watch.

GitHub Action — free Chromatic alternative

Two lines. Auto-detects changed components. Posts before/after/diff screenshots directly in the PR comment.

- uses: actions/checkout@v7
  with:
    fetch-depth: 0
- uses: kamegoro/[email protected]

<p align="center"> <img src="docs/diff-before.png" alt="Before" width="210" /> &nbsp; <img src="docs/diff-after.png" alt="After" width="210" /> &nbsp; <img src="docs/diff-result.png" alt="Diff" width="210" /> </p>

Changed .tsx, .jsx, .vue, .svelte, .astro, .mdx files detected automatically. No Storybook. No signup. Free forever.

<details> <summary>Options</summary>

- uses: kamegoro/[email protected]
  with:
    paths: "./src/components/*.tsx"       # default: auto-detect
    extensions: ".jsx,.tsx,.vue"          # default: .jsx,.tsx,.vue,.svelte,.astro,.mdx
    exclude: "*.test.*,*.spec.*"          # default: *.test.*,*.spec.*,*.stories.*

</details>

Render any component

Point to a file. Get a screenshot. Full Vite pipeline.

render_file("src/components/Dashboard.tsx")

<p align="center"> <img src="docs/example-output.png" alt="Rendered PricingCard with full Tailwind styling" width="280" /> </p>

Resolves your project's real imports, Tailwind config, CSS Modules, and path aliases — not a CDN polyfill.

Works out of the box with 16 frameworks

Auto-detected from package.json. No config needed for the common case. Framework-specific imports (next/navigation, $app/stores, useLoaderData, …) are stubbed automatically so components render in isolation.

Mock API calls

Components that fetch data from /api/... render in their loaded state instead of showing a spinner:

render_file({
  path: "src/components/UserList.tsx",
  mock: {
    "/api/users": [{ id: 1, name: "Alice" }],
    "/api/posts/*": { status: 200, body: { data: [] } },
  },
})

Pattern syntax: path (/api/users), glob (**/api/*), or full URL.

Using with Claude

After installing, just describe what you want:

"Render src/components/PricingCard.tsx — does it look right?"
"Refactor the layout to CSS grid and show me before/after"
"Watch Button.tsx while I edit — tell me when something looks off"

Claude calls render_file, diff_component, watch_start, or any other tool automatically.

Try it without an AI client

Works standalone on any React / Vue / Svelte project:

npx frameshot render src/components/Button.tsx
npx frameshot diff src/components/Header.tsx
npx frameshot catalog src/components/ --recursive

Images display inline in iTerm2, Kitty, and Sixel terminals. Saved to .frameshot/ by default.

First run installs Playwright's Chromium (~150MB). Subsequent renders are fast.

Tools

<details> <summary>All 22 tools</summary>

</details>

Performance

Vite server is cached per project root. Browser pool stays warm between MCP calls.

vs. alternatives

Development

git clone https://github.com/kamegoro/frameshot.git
cd frameshot && npm install
npx playwright install chromium
npm run build && npm test

See CONTRIBUTING.md for architecture details.

MIT © kamegoro