What Devtools Mcp

npm version license CI

The web framework built for AI agents.

whatfw.com · Docs · Playground · React Compat · Benchmarks · GitHub

Try What Framework in the Playground →

---

Why What?

• MCP DevTools — AI agents inspect every signal, effect, and component in a running app via the Model Context Protocol
• Structured Errors — Core runtime errors carry a code, message, suggested fix, and code example, and serialize to JSON. Agents parse and fix in one pass
• Agent Guardrails — In dev mode the runtime catches infinite effect loops, refuses unsafe innerHTML, and warns on signal misuse. Lint rules catch the rest before they ship
• Compiler Intelligence — Write normal JSX. The compiler outputs fine-grained reactive DOM operations. No VDOM diff
• Small & Fast — Fine-grained, no VDOM. Measured (production build, min+gzip, via npm run check:size): the reactive core in a counter app is ~5.5KB; a typical app ~8KB. Minimal dependencies, fully tree-shakeable

Quick Start

npm create what@latest my-app
cd my-app
npm install
npm run dev

Open http://localhost:5173.

MCP Setup

Connect your AI agent to a running What app:

{
  "mcpServers": {
    "what-framework": {
      "command": "npx",
      "args": ["what-devtools-mcp"]
    }
  }
}

Add to .claude/mcp_servers.json (Claude Code) or .cursor/mcp.json (Cursor).

Example Component

import { signal, computed, mount } from 'what-framework';

function Counter() {
  const count = signal(0, 'count');
  const doubled = computed(() => count() * 2);

  return (
    <main>
      <h1>What Framework</h1>
      <p>Count: {count()}</p>
      <p>Doubled: {doubled()}</p>
      <button onClick={() => count(c => c + 1)}>Increment</button>
      <button onClick={() => count(0)}>Reset</button>
    </main>
  );
}

mount(<Counter />, '#app');

The compiler handles reactive expressions automatically — signal reads in JSX are auto-wrapped.

Packages

All 14 packages publish together at the same version — see CHANGELOG.md for the current release.

Package	Description
what-framework	Umbrella package — re-exports core, router, server, etc.
what-core	Signals, components, reactivity, forms, data fetching
what-compiler	JSX transform and optimizing compiler (what-compiler/vite, /babel)
what-router	File-based & programmatic routing with View Transitions
what-server	SSR, islands architecture, static generation, server actions
what-isr	Origin-first ISR cache engine (stale-while-revalidate, tags, webhooks)
what-text	Optional text engine (powered by @chenglou/pretext)
create-what	Project scaffolder (npm create what@latest)
what-framework-cli	CLI — dev server, build, deploy tools (what dev/build/start)
what-devtools	Browser dev panel (signal inspector, component tree)
what-devtools-mcp	MCP server bridging AI agents to live app state — 29 live debugging tools
what-mcp	Deprecated — docs/assistance MCP server, superseded by what-devtools-mcp
what-react	React compatibility layer (use React-ecosystem packages)
eslint-plugin-what	ESLint rules — catch signal bugs, enforce patterns

The umbrella what-framework exposes subpaths: what-framework/router, /server, /jsx-runtime, etc.

Manual Setup

npm init -y
npm install what-framework what-compiler
npm install -D vite

Set "type": "module" in package.json — what-compiler/vite is ESM-only, and Vite can't resolve it from a CommonJS project:

{
  "type": "module"
}

// vite.config.js
import { defineConfig } from 'vite';
import what from 'what-compiler/vite';

export default defineConfig({
  plugins: [what()],
});

Run the dev server with npx vite (open http://localhost:5173), and build with npx vite build.

Bun works too: bun create what@latest and bun run dev.

MCP DevTools (AI Agent Debugging)

What Framework ships an MCP server for AI-assisted development. 29 live debugging tools: inspect signals, effects, components, DOM, cache, dependency graphs, and more. See /docs/MCP-DEVTOOLS.md.

React Compatibility

Run many React ecosystem libraries with what-react. This is a secondary feature — native What Framework APIs are preferred for new code.

npm install what-react

See /REACT-COMPAT.md for the tested compatibility matrix — the verified list of libraries is the source of truth.

Where everything lives & deploys

Surface	Domain	Source	How it deploys
Marketing + docs	whatfw.com (/docs)	docs-site/	Native Vercel ↔ GitHub (push to main)
Playground	playground.whatfw.com	sites/playground/	Native Vercel (Vite build)
React-compat demo	react.whatfw.com	sites/react-compat/	Native Vercel (Vite build)
Benchmarks	benchmarks.whatfw.com	sites/benchmarks/	Native Vercel (static)
npm packages (×14)	npmjs.com/~	packages/*	Release And Deploy workflow / npm run release:*

sites/showcase/ is local-only (not deployed). Full details — build commands, domains, the release workflow, tokens vs. native integration — are in DEPLOYMENTS.md.

Docs

• Vision -- what What is and why
• Deployments -- where everything lives and how it ships
• Security Policy -- reporting + supported versions
• Agent Guide -- MCP, patterns, mistakes
• Getting Started -- Setup for agents and developers
• Quick Start -- Tutorial
• API Reference -- Full API
• Architecture -- Deep-dive
• MCP DevTools -- MCP tools reference
• Agent Patterns -- Best practices
• Gotchas -- Common mistakes
• Migration from React · TypeScript · Styling · Development · Release
• Ecosystem Roadmap -- planned @what/* packages

License

MIT