@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 |
|---|---|---|
mcp-visualizer | src/servers/visualizer.ts | 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 release
Equivalent 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 remote