@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 0x1F320 <me@0x1f320.sh>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# why-did-you-render-mcp
+
+An [MCP](https://modelcontextprotocol.io/) server that bridges [why-did-you-render](https://github.com/welldone-software/why-did-you-render) data from the browser to coding agents. It captures unnecessary React re-render reports in real time and exposes them as MCP tools, so agents can diagnose and fix performance issues without manual browser inspection.
+
+## How It Works
+
+```
+Browser (React app)
+  │
+  │  why-did-you-render detects unnecessary re-render
+  │
+  ▼
+Client (runs in browser)  ── WebSocket ──▶  MCP Server (Node.js)
+                                                │
+                                                ├─ Persists to ~/.wdyr-mcp/renders/
+                                                │
+                                                ▼
+                                          Coding Agent (Claude, etc.)
+                                          queries via MCP tools
+```
+
+The **client** runs inside your React app alongside `why-did-you-render`. Whenever an unnecessary re-render is detected, it sanitizes the render data and sends it over WebSocket to the **MCP server**. The server stores reports as JSONL files and exposes them through MCP tools that coding agents can query.
+
+## Installation
+
+```sh
+npm install @0x1f320.sh/why-did-you-render-mcp @welldone-software/why-did-you-render
+```
+
+## Setup
+
+### 1. Configure why-did-you-render with the client
+
+In your app's entry point (e.g. `src/main.tsx` or `src/index.tsx`), set up `why-did-you-render` with the MCP client as its notifier:
+
+```tsx
+import React from "react";
+import whyDidYouRender from "@welldone-software/why-did-you-render";
+import { buildOptions } from "@0x1f320.sh/why-did-you-render-mcp/client";
+
+if (process.env.NODE_ENV === "development") {
+  const { notifier } = buildOptions();
+
+  whyDidYouRender(React, {
+    notifier,
+    trackAllPureComponents: true,
+  });
+}
+```
+
+The client automatically uses `location.origin` as the project identifier and connects to `ws://localhost:4649` by default. You can customize both:
+
+```ts
+const { notifier } = buildOptions({
+  wsUrl: "ws://localhost:5555",
+  projectId: "my-app",
+});
+```
+
+### 2. Add the MCP server to your agent
+
+Add the server to your MCP client configuration. For example, in Claude Desktop's `claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "why-did-you-render": {
+      "command": "npx",
+      "args": ["@0x1f320.sh/why-did-you-render-mcp"]
+    }
+  }
+}
+```
+
+Or if you installed it globally:
+
+```json
+{
+  "mcpServers": {
+    "why-did-you-render": {
+      "command": "why-did-you-render-mcp"
+    }
+  }
+}
+```
+
+### 3. Start your dev server and interact with the app
+
+Once both the MCP server and your React dev server are running, interact with your app in the browser. The agent can now query re-render data using the MCP tools below.
+
+## MCP Tools
+
+| Tool | Description |
+| --- | --- |
+| `get_unnecessary_renders` | Returns all captured unnecessary re-renders. Optionally filter by `component` name. |
+| `get_render_summary` | Returns a summary of re-renders grouped by component with counts. |
+| `get_projects` | Lists all active projects (identified by their origin URL). |
+| `clear_renders` | Clears all stored render data. Optionally scope to a specific project. |
+
+When multiple projects are active, tools accept an optional `project` parameter (the browser's origin URL, e.g. `http://localhost:3000`). If omitted and only one project exists, it is auto-selected.
+
+## Architecture
+
+```
+Browser (project-a) ──┐
+Browser (project-b) ──┤
+                      ▼
+                MCP #1 → WS(:4649)  (first instance binds)
+                MCP #2 → WS(:4649)  → skip (EADDRINUSE)
+                      │
+                      ▼
+               ~/.wdyr-mcp/renders/  (JSONL files, shared across instances)
+               ├─ http___localhost_3000.jsonl
+               └─ http___localhost_5173.jsonl
+```
+
+- **Multiple MCP instances** can run simultaneously. Only the first instance starts the WebSocket server; others gracefully skip. All instances share the same JSONL data directory.
+- **Multi-project support** — Each project is identified by `location.origin`. Render data is stored in per-project JSONL files.
+- **No daemon required** — Each MCP instance is independent. The WebSocket server is opportunistically claimed by whichever instance starts first.
+
+## Configuration
+
+| Environment Variable | Default | Description |
+| --- | --- | --- |
+| `WDYR_WS_PORT` | `4649` | WebSocket server port |
+
+## License
+
+MIT

package/dist/client/index.cjs

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/client/utils/describe-value.ts
+function describeValue(value) {
+	if (value === null) return "null";
+	if (value === void 0) return "undefined";
+	if (typeof value === "function") return `function ${value.name || "anonymous"}`;
+	if (typeof value !== "object") return String(value);
+	if (Array.isArray(value)) return `Array(${value.length})`;
+	const name = Object.getPrototypeOf(value)?.constructor?.name;
+	if (name && name !== "Object") return name;
+	return "Object";
+}
+//#endregion
+//#region src/client/utils/sanitize-differences.ts
+function sanitizeDifferences(diffs) {
+	if (!Array.isArray(diffs)) return false;
+	return diffs.map((diff) => ({
+		pathString: diff.pathString,
+		diffType: diff.diffType,
+		prevValue: describeValue(diff.prevValue),
+		nextValue: describeValue(diff.nextValue)
+	}));
+}
+//#endregion
+//#region src/client/utils/sanitize-reason.ts
+function sanitizeReason(reason) {
+	return {
+		propsDifferences: sanitizeDifferences(reason.propsDifferences),
+		stateDifferences: sanitizeDifferences(reason.stateDifferences),
+		hookDifferences: sanitizeDifferences(reason.hookDifferences)
+	};
+}
+//#endregion
+//#region src/client/index.ts
+const DEFAULT_WS_URL = "ws://localhost:4649";
+function buildOptions(opts) {
+	const wsUrl = opts?.wsUrl ?? DEFAULT_WS_URL;
+	const projectId = opts?.projectId ?? globalThis.location?.origin ?? "default";
+	let ws = null;
+	let queue = [];
+	function connect() {
+		ws = new WebSocket(wsUrl);
+		ws.addEventListener("open", () => {
+			for (const msg of queue) ws?.send(JSON.stringify(msg));
+			queue = [];
+		});
+		ws.addEventListener("close", () => {
+			ws = null;
+			setTimeout(connect, 1e3);
+		});
+		ws.addEventListener("error", () => {
+			ws?.close();
+		});
+	}
+	connect();
+	function send(msg) {
+		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
+		else queue.push(msg);
+	}
+	return { notifier(info) {
+		send({
+			type: "render",
+			projectId,
+			payload: {
+				displayName: info.displayName,
+				reason: sanitizeReason(info.reason),
+				hookName: info.hookName
+			}
+		});
+	} };
+}
+//#endregion
+exports.buildOptions = buildOptions;

package/dist/client/index.d.cts

@@ -0,0 +1,12 @@
+import { UpdateInfo } from "@welldone-software/why-did-you-render";
+
+//#region src/client/index.d.ts
+interface ClientOptions {
+  wsUrl?: string;
+  projectId?: string;
+}
+declare function buildOptions(opts?: ClientOptions): {
+  notifier(info: UpdateInfo): void;
+};
+//#endregion
+export { ClientOptions, buildOptions };

package/dist/client/index.d.ts

@@ -0,0 +1,12 @@
+import { UpdateInfo } from "@welldone-software/why-did-you-render";
+
+//#region src/client/index.d.ts
+interface ClientOptions {
+  wsUrl?: string;
+  projectId?: string;
+}
+declare function buildOptions(opts?: ClientOptions): {
+  notifier(info: UpdateInfo): void;
+};
+//#endregion
+export { ClientOptions, buildOptions };

package/dist/client/index.js

@@ -0,0 +1,72 @@
+//#region src/client/utils/describe-value.ts
+function describeValue(value) {
+	if (value === null) return "null";
+	if (value === void 0) return "undefined";
+	if (typeof value === "function") return `function ${value.name || "anonymous"}`;
+	if (typeof value !== "object") return String(value);
+	if (Array.isArray(value)) return `Array(${value.length})`;
+	const name = Object.getPrototypeOf(value)?.constructor?.name;
+	if (name && name !== "Object") return name;
+	return "Object";
+}
+//#endregion
+//#region src/client/utils/sanitize-differences.ts
+function sanitizeDifferences(diffs) {
+	if (!Array.isArray(diffs)) return false;
+	return diffs.map((diff) => ({
+		pathString: diff.pathString,
+		diffType: diff.diffType,
+		prevValue: describeValue(diff.prevValue),
+		nextValue: describeValue(diff.nextValue)
+	}));
+}
+//#endregion
+//#region src/client/utils/sanitize-reason.ts
+function sanitizeReason(reason) {
+	return {
+		propsDifferences: sanitizeDifferences(reason.propsDifferences),
+		stateDifferences: sanitizeDifferences(reason.stateDifferences),
+		hookDifferences: sanitizeDifferences(reason.hookDifferences)
+	};
+}
+//#endregion
+//#region src/client/index.ts
+const DEFAULT_WS_URL = "ws://localhost:4649";
+function buildOptions(opts) {
+	const wsUrl = opts?.wsUrl ?? DEFAULT_WS_URL;
+	const projectId = opts?.projectId ?? globalThis.location?.origin ?? "default";
+	let ws = null;
+	let queue = [];
+	function connect() {
+		ws = new WebSocket(wsUrl);
+		ws.addEventListener("open", () => {
+			for (const msg of queue) ws?.send(JSON.stringify(msg));
+			queue = [];
+		});
+		ws.addEventListener("close", () => {
+			ws = null;
+			setTimeout(connect, 1e3);
+		});
+		ws.addEventListener("error", () => {
+			ws?.close();
+		});
+	}
+	connect();
+	function send(msg) {
+		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
+		else queue.push(msg);
+	}
+	return { notifier(info) {
+		send({
+			type: "render",
+			projectId,
+			payload: {
+				displayName: info.displayName,
+				reason: sanitizeReason(info.reason),
+				hookName: info.hookName
+			}
+		});
+	} };
+}
+//#endregion
+export { buildOptions };

package/dist/server/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/server/index.js

@@ -0,0 +1,340 @@
+#!/usr/bin/env node
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import { appendFileSync, existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { WebSocketServer } from "ws";
+//#region src/server/store/utils/read-jsonl.ts
+function readJsonl(file) {
+	if (!existsSync(file)) return [];
+	return readFileSync(file, "utf-8").split("\n").filter(Boolean).map((line) => JSON.parse(line));
+}
+//#endregion
+//#region src/server/store/utils/sanitize-project-id.ts
+function sanitizeProjectId(projectId) {
+	return projectId.replaceAll(/[^a-zA-Z0-9_.-]/g, "_");
+}
+//#endregion
+//#region src/server/store/utils/to-result.ts
+function toResult(stored) {
+	return {
+		project: stored.projectId,
+		displayName: stored.displayName,
+		reason: stored.reason,
+		...stored.hookName != null && { hookName: stored.hookName }
+	};
+}
+//#endregion
+//#region src/server/store/render-store.ts
+const FLUSH_DELAY_MS = 200;
+var RenderStore = class {
+	dir;
+	buffers = /* @__PURE__ */ new Map();
+	timers = /* @__PURE__ */ new Map();
+	constructor(dir) {
+		this.dir = dir ?? join(homedir(), ".wdyr-mcp", "renders");
+		mkdirSync(this.dir, { recursive: true });
+	}
+	addRender(report, projectId) {
+		const stored = {
+			...report,
+			projectId
+		};
+		let buf = this.buffers.get(projectId);
+		if (!buf) {
+			buf = [];
+			this.buffers.set(projectId, buf);
+		}
+		buf.push(stored);
+		const existing = this.timers.get(projectId);
+		if (existing) clearTimeout(existing);
+		this.timers.set(projectId, setTimeout(() => this.flush(projectId), FLUSH_DELAY_MS));
+	}
+	flush(projectId) {
+		if (projectId) this.flushProject(projectId);
+		else for (const id of this.buffers.keys()) this.flushProject(id);
+	}
+	flushProject(projectId) {
+		const buf = this.buffers.get(projectId);
+		if (!buf || buf.length === 0) return;
+		const lines = buf.map((s) => JSON.stringify(s)).join("\n");
+		appendFileSync(this.projectFile(projectId), `${lines}\n`);
+		buf.length = 0;
+		const timer = this.timers.get(projectId);
+		if (timer) {
+			clearTimeout(timer);
+			this.timers.delete(projectId);
+		}
+	}
+	getAllRenders(projectId) {
+		this.flush(projectId);
+		if (projectId) return readJsonl(this.projectFile(projectId)).map(toResult);
+		return this.jsonlFiles().flatMap((f) => readJsonl(join(this.dir, f)).map(toResult));
+	}
+	getRendersByComponent(componentName, projectId) {
+		return this.getAllRenders(projectId).filter((r) => r.displayName === componentName);
+	}
+	clearRenders(projectId) {
+		if (projectId) {
+			this.buffers.delete(projectId);
+			const timer = this.timers.get(projectId);
+			if (timer) {
+				clearTimeout(timer);
+				this.timers.delete(projectId);
+			}
+			const file = this.projectFile(projectId);
+			if (existsSync(file)) unlinkSync(file);
+		} else {
+			for (const [id, timer] of this.timers) clearTimeout(timer);
+			this.buffers.clear();
+			this.timers.clear();
+			for (const f of this.jsonlFiles()) unlinkSync(join(this.dir, f));
+		}
+	}
+	getProjects() {
+		this.flush();
+		const projects = /* @__PURE__ */ new Set();
+		for (const f of this.jsonlFiles()) {
+			const firstLine = readFileSync(join(this.dir, f), "utf-8").split("\n")[0];
+			if (!firstLine) continue;
+			const stored = JSON.parse(firstLine);
+			projects.add(stored.projectId);
+		}
+		return [...projects];
+	}
+	getSummary(projectId) {
+		const renders = this.getAllRenders(projectId);
+		const summary = {};
+		for (const r of renders) {
+			summary[r.project] ??= {};
+			const project = summary[r.project];
+			project[r.displayName] = (project[r.displayName] ?? 0) + 1;
+		}
+		return summary;
+	}
+	projectFile(projectId) {
+		return join(this.dir, `${sanitizeProjectId(projectId)}.jsonl`);
+	}
+	jsonlFiles() {
+		return readdirSync(this.dir).filter((f) => f.endsWith(".jsonl"));
+	}
+};
+//#endregion
+//#region src/server/store/index.ts
+const store = new RenderStore();
+//#endregion
+//#region src/server/tools/utils/resolve-project.ts
+/**
+* Resolves the project to use. If a project is explicitly given, use it.
+* If only one project exists, auto-select it. If multiple exist, return
+* a message asking the agent to disambiguate.
+*/
+function resolveProject(project) {
+	if (project) return { projectId: project };
+	const projects = store.getProjects();
+	if (projects.length === 0) return { projectId: void 0 };
+	if (projects.length === 1) return { projectId: projects[0] };
+	return {
+		projectId: void 0,
+		error: [
+			"Multiple projects are recording render data. Ask the user which project they are working on (e.g. their dev server URL like http://localhost:3000).",
+			"",
+			"Active projects:",
+			...projects.map((p) => `- ${p}`)
+		].join("\n")
+	};
+}
+//#endregion
+//#region src/server/tools/utils/text-result.ts
+function textResult(text) {
+	return { content: [{
+		type: "text",
+		text
+	}] };
+}
+//#endregion
+//#region src/server/tools/clear-renders.ts
+function register$3(server) {
+	server.registerTool("clear_renders", {
+		title: "Clear Renders",
+		description: "Clears collected render data. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.",
+		inputSchema: { project: z.string().optional().describe("Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.") }
+	}, async ({ project }) => {
+		const resolved = resolveProject(project);
+		if (resolved.error) return textResult(resolved.error);
+		store.clearRenders(resolved.projectId);
+		return textResult(resolved.projectId ? `Render data cleared for ${resolved.projectId}.` : "All render data cleared.");
+	});
+}
+//#endregion
+//#region src/server/tools/get-projects.ts
+function register$2(server) {
+	server.registerTool("get_projects", {
+		title: "Get Projects",
+		description: "Returns a list of project identifiers (browser origin URLs) that have recorded render data.",
+		inputSchema: {}
+	}, async () => {
+		const projects = store.getProjects();
+		if (projects.length === 0) return textResult("No projects have recorded render data yet.");
+		return textResult(`Active projects:\n${projects.map((p) => `- ${p}`).join("\n")}`);
+	});
+}
+//#endregion
+//#region src/server/tools/get-render-summary.ts
+function register$1(server) {
+	server.registerTool("get_render_summary", {
+		title: "Get Render Summary",
+		description: "Returns a summary of unnecessary re-renders grouped by component name with counts. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.",
+		inputSchema: { project: z.string().optional().describe("Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.") }
+	}, async ({ project }) => {
+		const resolved = resolveProject(project);
+		if (resolved.error) return textResult(resolved.error);
+		const summary = store.getSummary(resolved.projectId);
+		if (Object.keys(summary).length === 0) return textResult("No unnecessary renders recorded yet.");
+		const lines = [];
+		for (const [projectId, components] of Object.entries(summary)) {
+			lines.push(`[${projectId}]`);
+			for (const [name, count] of Object.entries(components)) lines.push(`  ${name}: ${count} re-render(s)`);
+		}
+		return textResult(`Unnecessary re-render summary:\n\n${lines.join("\n")}`);
+	});
+}
+//#endregion
+//#region src/server/tools/get-unnecessary-renders.ts
+function register(server) {
+	server.registerTool("get_unnecessary_renders", {
+		title: "Get Unnecessary Renders",
+		description: "Returns all unnecessary re-renders collected from the browser. If multiple projects are active and no project is specified, the tool will ask you to disambiguate by asking the user for their dev server URL.",
+		inputSchema: {
+			component: z.string().optional().describe("Filter by component name. Omit to get all renders."),
+			project: z.string().optional().describe("Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.")
+		}
+	}, async ({ component, project }) => {
+		const resolved = resolveProject(project);
+		if (resolved.error) return textResult(resolved.error);
+		const renders = component ? store.getRendersByComponent(component, resolved.projectId) : store.getAllRenders(resolved.projectId);
+		if (renders.length === 0) return textResult(component ? `No unnecessary renders recorded for "${component}".` : "No unnecessary renders recorded yet. Make sure the browser is connected and triggering re-renders.");
+		return textResult(JSON.stringify(renders, null, 2));
+	});
+}
+//#endregion
+//#region src/server/tools/index.ts
+function registerTools(server) {
+	register(server);
+	register$1(server);
+	register$2(server);
+	register$3(server);
+}
+//#endregion
+//#region src/server/liveness.ts
+const DEFAULT_INTERVAL_MS = 3e4;
+var HeartbeatManager = class {
+	connections = /* @__PURE__ */ new Map();
+	timer;
+	constructor(wss, store, intervalMs = DEFAULT_INTERVAL_MS) {
+		this.wss = wss;
+		this.store = store;
+		this.timer = setInterval(() => this.check(), intervalMs);
+	}
+	trackConnection(ws) {
+		this.connections.set(ws, {
+			isAlive: true,
+			projectId: null
+		});
+		ws.on("pong", () => {
+			const meta = this.connections.get(ws);
+			if (meta) meta.isAlive = true;
+		});
+		ws.on("close", () => {
+			this.connections.delete(ws);
+		});
+	}
+	setProjectId(ws, projectId) {
+		const meta = this.connections.get(ws);
+		if (meta) meta.projectId = projectId;
+	}
+	stop() {
+		clearInterval(this.timer);
+		this.connections.clear();
+	}
+	check() {
+		for (const [ws, meta] of this.connections) {
+			if (!meta.isAlive) {
+				this.connections.delete(ws);
+				ws.terminate();
+				if (meta.projectId && !this.hasOtherConnection(ws, meta.projectId)) {
+					console.error(`[wdyr-mcp] client for ${meta.projectId} is dead, clearing render data`);
+					this.store.clearRenders(meta.projectId);
+				}
+				continue;
+			}
+			meta.isAlive = false;
+			ws.ping();
+		}
+	}
+	hasOtherConnection(deadWs, projectId) {
+		for (const [ws, meta] of this.connections) if (ws !== deadWs && meta.projectId === projectId) return true;
+		return false;
+	}
+};
+//#endregion
+//#region src/server/ws.ts
+function createWsServer(port) {
+	const wss = new WebSocketServer({
+		port,
+		host: "127.0.0.1"
+	});
+	const heartbeat = new HeartbeatManager(wss, store);
+	wss.on("error", (err) => {
+		if (err.code === "EADDRINUSE") console.error(`[wdyr-mcp] Port ${port} already in use, another instance owns the WS server. Skipping.`);
+		else console.error("[wdyr-mcp] WS server error:", err);
+	});
+	wss.on("listening", () => {
+		console.error(`[wdyr-mcp] WebSocket server listening on ws://localhost:${port}`);
+	});
+	wss.on("connection", (ws) => {
+		console.error(`[wdyr-mcp] browser connected (ws://localhost:${port})`);
+		heartbeat.trackConnection(ws);
+		ws.on("message", (raw) => {
+			try {
+				const msg = JSON.parse(String(raw));
+				if (msg.type === "render") {
+					const projectId = msg.projectId ?? "default";
+					heartbeat.setProjectId(ws, projectId);
+					store.addRender(msg.payload, projectId);
+				}
+			} catch {
+				console.error("[wdyr-mcp] invalid message received");
+			}
+		});
+		ws.on("close", () => {
+			console.error("[wdyr-mcp] browser disconnected");
+		});
+	});
+	wss.on("close", () => {
+		heartbeat.stop();
+	});
+	return wss;
+}
+//#endregion
+//#region src/server/index.ts
+const DEFAULT_WS_PORT = 4649;
+const server = new McpServer({
+	name: "why-did-you-render",
+	version: "0.0.0"
+});
+registerTools(server);
+async function main() {
+	createWsServer(Number(process.env.WDYR_WS_PORT) || DEFAULT_WS_PORT);
+	const transport = new StdioServerTransport();
+	await server.connect(transport);
+	console.error("[wdyr-mcp] MCP server running on stdio");
+}
+main().catch((error) => {
+	console.error("[wdyr-mcp] Fatal error:", error);
+	process.exit(1);
+});
+//#endregion
+export {};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@0x1f320.sh/why-did-you-render-mcp",
+  "version": "1.0.0-dev.1",
+  "type": "module",
+  "description": "MCP server that collects why-did-you-render data from browser and exposes it to coding agents",
+  "license": "MIT",
+  "author": {
+    "name": "0x1F320",
+    "email": "me@0x1f320.sh",
+    "url": "https://0x1f320.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/0x1f320/why-did-you-render-mcp.git"
+  },
+  "homepage": "https://github.com/0x1f320/why-did-you-render-mcp#readme",
+  "bugs": {
+    "url": "https://github.com/0x1f320/why-did-you-render-mcp/issues"
+  },
+  "keywords": [
+    "mcp",
+    "react",
+    "why-did-you-render",
+    "performance",
+    "re-render"
+  ],
+  "bin": {
+    "why-did-you-render-mcp": "./dist/server/index.js"
+  },
+  "exports": {
+    ".": "./dist/server/index.js",
+    "./client": {
+      "import": "./dist/client/index.js",
+      "require": "./dist/client/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "check": "biome check .",
+    "check:fix": "biome check --fix .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "ws": "^8.18.0",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@types/node": "^22.14.1",
+    "@types/ws": "^8.18.0",
+    "@vitest/coverage-v8": "^4.1.2",
+    "semantic-release": "^25.0.3",
+    "tsdown": "^0.12.4",
+    "typescript": "^5.8.3",
+    "vitest": "^4.1.2"
+  },
+  "peerDependencies": {
+    "@welldone-software/why-did-you-render": "^10.0.1"
+  },
+  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
+  "publishConfig": {
+    "access": "public"
+  },
+  "pnpm": {}
+}