@tscafejr/mcp
Provides Puppeteer-driven screenshots, typing, and network/console diagnostics for web applications deployed on Netlify (including dev and previews).
Provides Puppeteer-driven screenshots, typing, and network/console diagnostics for web applications built with Next.js.
Provides Puppeteer-driven screenshots, typing, and network/console diagnostics for web applications built with Vite.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@@tscafejr/mcptake a screenshot of the homepage"
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.
@tscafejr/mcp
MCP servers I use across projects distributed as a single npm package with one bin per server.
Installation (consumers)
Wire a server into any MCP client config:
{
"mcpServers": {
"visualizer": {
"command": "npx",
"args": ["-y", "@tscafejr/mcp", "mcp-visualizer"]
}
}
}Available servers
Bin | Source | Description |
|
| Puppeteer-driven screenshots, typing, and network/console diagnostics. Framework-agnostic — works with Vite, Next.js, CRA, Netlify dev, deploy previews, etc. |
mcp-visualizer configuration
Target URL is resolved in this order (highest to lowest):
Per-call
base_urlarg — full URL, e.g.https://my-site.netlify.apporhttp://localhost:8888.Per-call
portarg — localhost shorthand.MCP_DEV_SERVER_URLenv — full base URL.MCP_DEV_SERVER_HOST+MCP_DEV_SERVER_PORTenv.Default:
http://localhost:3000.
Example MCP client configs:
// Vite project
{ "mcpServers": { "visualizer": {
"command": "npx", "args": ["-y", "@tscafejr/mcp", "mcp-visualizer"],
"env": { "MCP_DEV_SERVER_PORT": "5173" }
}}}
// Netlify dev
{ "mcpServers": { "visualizer": {
"command": "npx", "args": ["-y", "@tscafejr/mcp", "mcp-visualizer"],
"env": { "MCP_DEV_SERVER_PORT": "8888" }
}}}
// Remote deploy preview
{ "mcpServers": { "visualizer": {
"command": "npx", "args": ["-y", "@tscafejr/mcp", "mcp-visualizer"],
"env": { "MCP_DEV_SERVER_URL": "https://preview-123.example.com" }
}}}Adding a new server
Create
src/servers/<name>.ts. Start with a shebang so the built file is directly executable:#!/usr/bin/env node import { Server } from "@modelcontextprotocol/sdk/server/index.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; // ...Add one line to the
binmap inpackage.json:"bin": { "mcp-visualizer": "dist/servers/visualizer.js", "mcp-<name>": "dist/servers/<name>.js" }Build and run locally:
npm run build npm run dev <name> # tsx, no build step npm run start <name> # runs the built dist/ output
That's it — chmod-bins.js reads package.json on every build and marks all bin outputs executable, so new entries pick up automatically.
Add the new row to the table above so consumers know what's available.
Releasing
The release script prompts for the bump type (major / minor / patch), runs npm version, builds, publishes, and pushes the commit + tag to your git remote.
npm run releaseEquivalent manual steps if you'd rather drive it yourself:
npm version patch # or: minor / major — bumps, commits, tags
npm publish # prepublishOnly rebuilds dist/
git push --follow-tags # if/when this dir has a git remoteResources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
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/TScafeJR/mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server