MCP DevTools. Structured errors. Runtime guardrails. Your AI writes better code with What Framework.
import { mount, signal, computed } from 'what-framework' function Counter() { const count = signal(0) const doubled = computed(() => count() * 2) return ( <div> <button onClick={() => count(c => c + 1)}> Count: {count()} </button> <p>Doubled: {doubled()}</p> </div> ) } mount(<Counter />, '#app')
AI agents generate more frontend code every month. But existing frameworks give them nothing to work with.
Stack traces full of minified internals. "Cannot read property of undefined" with no hint where the signal, effect, or component went wrong. Agents guess, retry, break more things.
When an agent builds a component, it cannot see signal values, dependency graphs, or effect states at runtime. Debugging is blind.
Forgot to clean up an effect? Created an infinite reactive loop? Passed wrong props? Other frameworks stay quiet. The bug ships.
Autocomplete, hover docs, and inline hints help humans in IDEs. AI agents need structured, machine-readable contracts they can query programmatically.
Every layer of What Framework gives AI agents the context they need to write correct code, catch errors, and ship faster.
AI agents inspect every signal, effect, and component in a running app via the Model Context Protocol. Live state, dependency graphs, performance data -- all queryable.
// Agent calls MCP tool: what_signals({ filter: "count|doubled" }) // Returns: { count: { value: 5, subscribers: 2 }, doubled: { value: 10, type: "computed" } }
Core runtime errors carry an error code, human message, suggested fix, and code example, and serialize to JSON. Agents parse, understand, and fix them in a single pass.
{ code: "SIGNAL_READ_OUTSIDE_TRACKING",
message: "Signal read outside reactive scope",
fix: "Wrap in computed() or effect()",
example: "computed(() => count())" }
In dev mode the runtime catches infinite effect loops, refuses unsafe innerHTML, and warns on signal misuse. Lint rules catch the rest before they hit production.
// Runtime catches this automatically: effect(() => { count(count() + 1) // Infinite loop }) // Error: EFFECT_LOOP_DETECTED
Write normal JSX. The compiler transforms it into fine-grained reactive DOM operations. No virtual DOM diff. Components run once. Agents write familiar code, the compiler optimizes it.
// You write: <p>{count()}</p> // Compiler outputs: direct DOM text node update // No re-renders. No VDOM. No reconciliation.
A small reactive core — signal, computed, effect, batch — plus opt-in modules. ~8KB typical-app runtime, minimal dependencies, tree-shakeable. Agents generate less code, ship smaller bundles, and reason about a smaller API surface.
// The full API an agent needs to learn: import { signal, computed, effect, mount, Show, For, createStore } from 'what-framework' // ~8KB gzipped. That's it.
The left panel is what you write. The right is what an AI agent can query via MCP DevTools at runtime.
import { signal, computed, mount } from 'what-framework' function TodoApp() { const todos = signal([]) const filter = signal('all') const visible = computed(() => { if (filter() === 'all') return todos() const done = filter() === 'done' return todos().filter(t => t.done === done) }) const remaining = computed(() => todos().filter(t => !t.done).length ) return ( <main> <h1>Todos ({remaining()})</h1> <For each={visible()}> {todo => <TodoItem item={todo} />} </For> </main> ) }
// what_explain({ componentId }) — TodoApp { "component": "TodoApp", "signals": { "todos": { "value": [ { "text": "Ship v1", "done": false }, { "text": "Write tests", "done": true } ], "subscribers": 2 }, "filter": { "value": "all", "subscribers": 1 } }, "computed": { "visible": { "value": ["...2 items"], "deps": ["todos", "filter"] }, "remaining": { "value": 1, "deps": ["todos"] } }, "children": ["TodoItem", "TodoItem"] }
Connect your AI agent to a running What app. Works with Claude Code, Cursor, and any MCP-compatible client.
Add the What DevTools MCP server to your Claude Code config.
// .claude/mcp_servers.json { "what-devtools": { "command": "npx", "args": ["what-devtools-mcp"], "env": { "PORT": "3001" } } }
Add the MCP server to your Cursor workspace settings.
// .cursor/mcp.json { "mcpServers": { "what-devtools": { "command": "npx", "args": ["what-devtools-mcp"] } } }
A factual look at AI-agent capabilities across frameworks.
| What | React | Solid | Svelte | |
|---|---|---|---|---|
| MCP DevTools | Built in | No | No | No |
| Structured Errors | JSON + fix | Stack trace | Stack trace | Warnings |
| Runtime Guardrails | Loops, XSS, signal misuse | StrictMode | Minimal | Minimal |
| Reactivity | Fine-grained signals | VDOM diff | Fine-grained signals | Compiler runes |
| JSX | Yes | Yes | Yes | Custom syntax |
| SSR / Islands | Built in | Via Next.js | SolidStart | SvelteKit |
| React Library Compat | Via what-react | Native | No | No |
| Runtime Size* | ~8KB | ~44KB | ~8KB | ~16KB |
* Minimal-runtime gzipped size. Real-world app bundles vary by features used and differ between frameworks at app scale — these figures don't imply byte-for-byte parity.
Every package works standalone. Grab what you need.
Signals, computed, effects, components, forms, routing. The full reactive runtime.
MCP server for AI agents. Inspect signals, components, effects, and performance in real time.
JSX transform, optimizing compiler, fine-grained reactivity output.
Client-side routing with dynamic params, nested layouts, and View Transitions.
React compatibility layer. Run React ecosystem libraries with little or no code change.
Project scaffolder. One command to start building.
MCP DevTools. Structured errors. Runtime guardrails. One command to start.