frameshot-mcp 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -5
- package/dist/index.js +5 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# frameshot
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/frameshot-mcp) [](https://www.npmjs.com/package/frameshot-mcp) [](https://github.com/kamegoro/frameshot) [](https://github.com/kamegoro/frameshot/actions/workflows/ci.yml) [](https://opensource.org/licenses/MIT)
|
|
4
|
+
|
|
3
5
|
> Instant cross-browser component preview for AI agents. One call, one screenshot — no dev server, no Storybook, no ceremony.
|
|
4
6
|
|
|
5
7
|
**Works with:** Claude Code · Cursor · Codex · Windsurf · any MCP-compatible tool
|
|
@@ -114,7 +116,7 @@ screenshot_url({
|
|
|
114
116
|
| | Storybook | frameshot |
|
|
115
117
|
|---|-----------|-----------|
|
|
116
118
|
| Setup | Write .stories.tsx, configure addons, run server | **Zero** — pass code, get image |
|
|
117
|
-
| Speed | Heavy dev server startup | **~
|
|
119
|
+
| Speed | Heavy dev server startup | **~120ms** warm render |
|
|
118
120
|
| Cross-browser | Chromatic ($149+/mo) | **Free** — Playwright built-in |
|
|
119
121
|
| AI-native | Requires pre-written stories | **Works with any code snippet** |
|
|
120
122
|
| Auth required? | Need full app context | **No** — isolated component render |
|
|
@@ -125,11 +127,11 @@ frameshot is not a Storybook replacement. Storybook is for documentation and des
|
|
|
125
127
|
|
|
126
128
|
| Scenario | Time |
|
|
127
129
|
|----------|------|
|
|
128
|
-
| Warm render (browser reused) | **~
|
|
129
|
-
| Cold start (first render) | ~
|
|
130
|
-
| Cross-browser (3 engines parallel) | ~
|
|
130
|
+
| Warm render (browser reused) | **~120ms** |
|
|
131
|
+
| Cold start (first render) | ~4s |
|
|
132
|
+
| Cross-browser (3 engines parallel) | ~300ms warm |
|
|
131
133
|
|
|
132
|
-
The browser stays warm
|
|
134
|
+
The browser pool stays warm with Tailwind pre-cached. After cold start, renders are **sub-200ms**.
|
|
133
135
|
|
|
134
136
|
## Framework Support
|
|
135
137
|
|
package/dist/index.js
CHANGED
|
@@ -14550,6 +14550,10 @@ async function getSlot(engine) {
|
|
|
14550
14550
|
deviceScaleFactor: 2
|
|
14551
14551
|
});
|
|
14552
14552
|
const page = await context.newPage();
|
|
14553
|
+
await page.setContent(
|
|
14554
|
+
'<html><head><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script></head><body></body></html>',
|
|
14555
|
+
{ waitUntil: "networkidle" }
|
|
14556
|
+
);
|
|
14553
14557
|
const slot = { browser, page, ready: true };
|
|
14554
14558
|
pool.set(engine, slot);
|
|
14555
14559
|
return slot;
|
|
@@ -14599,9 +14603,7 @@ async function renderSingle(engine, html, options) {
|
|
|
14599
14603
|
if (currentViewport?.width !== width || currentViewport?.height !== height) {
|
|
14600
14604
|
await page.setViewportSize({ width, height });
|
|
14601
14605
|
}
|
|
14602
|
-
await page.setContent(html, { waitUntil: "
|
|
14603
|
-
await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => {
|
|
14604
|
-
});
|
|
14606
|
+
await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
|
|
14605
14607
|
if (waitFor > 0) {
|
|
14606
14608
|
await page.waitForTimeout(waitFor);
|
|
14607
14609
|
}
|
package/package.json
CHANGED