How do I use frameshot?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@frameshot Screenshot this React button component" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

frameshot

by kamegoro

Overview Schema Related Servers Score Discussions

TypeScript

Local

frameshot

npm version npm downloads GitHub stars License: MIT

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.

Claude Code

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

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

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.

Related MCP server: rendex-mcp

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/frameshot@v0.8.0

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

- uses: kamegoro/frameshot@v0.8.0
  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.*

Render any component

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

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

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

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

Tool	What it does
`render_file`	Render a file via Vite — real imports, Tailwind, CSS Modules
`diff_component`	Pixel diff before/after — % changed, highlighted pixels
`watch_start`	Watch files — auto-render on every save
`watch_get_latest`	Get the latest render from a watch session
`render_catalog`	Render every component in a directory at once
`screenshot_url`	Screenshot any URL — localhost, staging, prod
`render_responsive`	Mobile + tablet + desktop in one call
`render_theme`	Light + dark mode side by side
`audit_a11y`	axe-core accessibility audit (WCAG violations)
`render_component`	Render a self-contained code snippet

Tool	What it does
`render_file`	Render a project file with full Vite dependency resolution
`render_component`	Render a self-contained snippet → screenshot
`screenshot_url`	Screenshot any URL with retry and network idle wait
`render_responsive`	Mobile + tablet + desktop in one call
`render_variants`	Multiple prop/state variants at once
`render_theme`	Light + dark mode side by side
`render_interaction`	Simulate click/hover/type, then screenshot
`render_grid`	Multiple snippets in a labeled grid
`render_matrix`	Viewport × theme matrix in one call
`capture_animation`	Multi-frame CSS animation capture
`diff_component`	Before/after pixel diff with % changed
`diff_reference`	Compare render against a reference image (Figma QA)
`audit_a11y`	axe-core accessibility audit
`perf_audit`	DOM count, depth, render timing
`render_catalog`	Render all components in a directory
`snapshot_save`	Save a render as named baseline
`snapshot_check`	Compare current render against saved baseline
`snapshot_list`	List all saved snapshots
`watch_start`	Start watching files — renders on every save
`watch_stop`	Stop a watch session
`watch_get_latest`	Get the latest rendered screenshot from a session
`watch_list`	List active watch sessions

Performance

Scenario	Time
Warm render (Vite server cached)	~200–500ms
CDN fallback (no Vite)	~120ms
Cold start (first render)	~1–3s
Subsequent renders (same session)	~200ms

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

vs. alternatives

	Storybook	Chromatic	Browser MCP	frameshot
Setup	Stories + config	SaaS signup	Browser install	`npx` — done
Speed	Dev server startup	Cloud round-trip	2–5s	~200ms warm
Cost	Free (labor cost)	$149–800+/mo	Free	Free forever
Story files needed	Yes	Yes	No	No
Real imports resolved	Via Storybook	Via Storybook	No	Via Vite
Works offline	Yes	No	Yes	Yes
Watch mode	No	No	No	Yes
AI-native (MCP)	No	No	Full-page only	Component-level

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

Install Server

license - permissive license

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

<1hResponse time

0dRelease cycle

13Releases (12mo)

Commit activity

Resources

Need Help?

Related Servers

Tools

View all tools

Related MCP Servers

autonomous-frontend-browser
Browser Automation Coding Agents Developer Tools
Winds-AI
A
license
A
quality
-
maintenance
Enables AI tools to interact with browsers for enhanced frontend development, providing context to LLMs through tools like API call analysis, screenshots, element selection, and documentation ingestion.
Last updated 2025-09-05
9
9
10
rendex-mcp
Browser Automation Web Scraping Image & Video Processing
copperline-labs
A
license
A
quality
B
maintenance
Capture screenshots, generate PDFs, and render HTML to images via AI agents. Supports batch capture, geo-targeting, async webhooks, and CSS/JS injection.
Last updated 2026-07-20
11
272
7
MIT
screenbox
Browser Automation Virtualization Agent Orchestration
dklymentiev
A
license
-
quality
C
maintenance
Provides AI agents with isolated virtual desktops containing a real Chromium browser, enabling them to see, click, type, and navigate like a human, with features like snapshots and remote control.
Last updated 2026-04-15
19
AGPL 3.0
Browser-Debugger
Testing & QA Tools Browser Automation
Selvadinesh-giga
F
license
-
quality
D
maintenance
Enables AI agents to automate and debug real Chromium browsers with capabilities like screenshots, video recording, performance analysis, visual regression testing, and OCR text extraction.
Last updated 2026-01-30
13

View all related MCP servers

Related MCP Connectors

mcp
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Snapshot Site
Capture screenshots, detect visual regressions between page versions, and analyze with AI.
snapforge
Screenshots, PDFs and Markdown from any URL or HTML for AI agents, via the SnapForge API

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/kamegoro/frameshot'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

frameshot

Watch mode — live AI feedback loop

GitHub Action — free Chromatic alternative

Render any component

Using with Claude

Try it without an AI client

Tools

Performance

vs. alternatives

Development

Maintenance

Resources

Tools

Related MCP Servers

autonomous-frontend-browser

rendex-mcp

screenbox

Browser-Debugger

Related MCP Connectors

Latest Blog Posts

MCP directory API