An AI-agent-first frontend framework. Components are pure data structures. State is immutable. Everything is observable.

JSON-to-DOM rendering — Components return { tag, props, children } trees. No templates, no JSX.

import { defineComponent } from '@atrotos/vio'

const Greeting = defineComponent({
  name: 'Greeting',
  state: { name: 'World' },
  render(state) {
    return {
      tag: 'h1',
      children: [`Hello, ${state.name}!`]
    }
  }
})

Immutable state — State changes produce new objects. The virtual DOM diff determines what to update.

Observable everything — All mutations flow through an event bus. Serializable, loggable, replayable.

import { createApp, defineComponent } from '@atrotos/vio'

const App = defineComponent({
  name: 'App',
  state: { count: 0 },
  render(state) {
    return {
      tag: 'div',
      children: [
        { tag: 'h1', children: [`Count: ${state.count}`] },
        { tag: 'button', props: { onClick: () => {} }, children: ['Increment'] }
      ]
    }
  }
})

const app = createApp({
  root: '#app',
  routes: [{ path: '/', component: App }],
  store: {
    state: { theme: 'light' },
    actions: {
      toggleTheme(s) {
        return { ...s, theme: s.theme === 'light' ? 'dark' : 'light' }
      }
    }
  }
})

app.mount()

AI agents can control a running Vio app programmatically:

// State management
app.setState(componentId, { count: 5 })
app.getState(componentId)

// Global store
app.dispatch('toggleTheme')
app.getStore()

// Navigation
app.navigate('/dashboard')

// Introspection
app.getComponentTree()

// Event observation
app.on('state:change', (event) => console.log(event))

// Batch operations
app.batch([
  { action: 'setState', target: id, payload: { count: 10 } },
  { action: 'dispatch', payload: { action: 'toggleTheme' } }
])

@atrotos/vio-devtools is a companion package that exposes a running Vio app to AI agents via the Model Context Protocol. An MCP-capable client (Claude Code, Cursor, etc.) can read state, dispatch actions, navigate routes, and inspect the component tree — all from the terminal.

Architecture: MCP Server (stdio) ↔ WebSocket Bridge ↔ Browser Client

1. Browser side — connect the devtools client in your app entry:

import { connectDevtools } from '@atrotos/vio-devtools/client'

const app = createApp({ /* ... */ })
app.mount()
connectDevtools(app)

2. MCP config — add to your .mcp.json (or Claude Code settings):

{
  "mcpServers": {
    "vio-devtools": {
      "command": "node",
      "args": ["./packages/vio-devtools/dist/cli.js"]
    }
  }
}

3. Build — npm run build from the workspace root.

1. JSON-native — { tag, props, children }. Any LLM can produce valid component trees.
2. Pure renders — render(state) → tree. Same input, same output. Deterministic.
3. Full introspection — Agents can "see" the entire UI as JSON via getComponentTree().
4. Full control — setState, dispatch, navigate, batch — all programmatic.
5. Serializable — Components, state, events are all plain JSON. Works over any transport.
6. MCP-ready — Connect @atrotos/vio-devtools and any MCP client can control your app live.

MIT