MCP DevTools. Structured errors. Runtime guardrails. Your AI writes better code with What Framework.
import { mount, useSignal, useComputed } from 'what-framework' function Counter() { const count = useSignal(0) const doubled = useComputed(() => count() * 2) return ( <div> <button onClick={() => count.set(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_devtools.getSignals() // Returns: { count: { value: 5, subscribers: 2 }, doubled: { value: 10, type: "computed" } }
Every error returns JSON with an error code, human message, suggested fix, and code example. Agents parse, understand, and fix errors in a single pass.
{ code: "SIGNAL_READ_OUTSIDE_TRACKING",
message: "Signal read outside reactive scope",
fix: "Wrap in useComputed() or useEffect()",
example: "useComputed(() => count())" }
Runtime catches infinite loops, missing effect cleanup, XSS via innerHTML, and signal misuse before they hit production. The framework protects agents from common mistakes.
// Runtime catches this automatically: useEffect(() => { count.set(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.
~15 core APIs. 12KB runtime. Zero 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 { useSignal, useComputed, useEffect, mount, Show, For, createStore } from 'what-framework' // ~12KB 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 { useSignal, useComputed, mount } from 'what-framework' function TodoApp() { const todos = useSignal([]) const filter = useSignal('all') const visible = useComputed(() => { if (filter() === 'all') return todos() const done = filter() === 'done' return todos().filter(t => t.done === done) }) const remaining = useComputed(() => todos().filter(t => !t.done).length ) return ( <main> <h1>Todos ({remaining()})</h1> <For each={visible()}> {todo => <TodoItem item={todo} />} </For> </main> ) }
// what_devtools.inspectComponent("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, cleanup | 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 | 90+ via what-react | Native | No | No |
| Runtime Size | ~12KB | ~44KB | ~8KB | ~16KB |
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. 90+ React libraries working with zero code changes.
Project scaffolder. One command to start building.
MCP DevTools. Structured errors. Runtime guardrails. One command to start.