Introduction

Codelab is a visual app builder whose canvas is a persisted tree — pages, elements, stores, actions, and hooks are database rows, not files on disk. Nothing about a page exists outside those rows.

The builder at app.codelab.app and an AI client talking MCP edit that same tree through the same tools. There is no separate “AI mode”: chat drives add_element, create_store, update_props, and the rest, and the canvas re-renders from the rows they write.

This site is the public documentation for MCP clients building against that tree.

Start here#

1. Connect the hosted MCP from Claude, Cursor, Grok, or Codex.
2. After OAuth: list_apps → set_context → get_context.
3. Build against the model: App, Page, Element, Component.
4. Wire behavior: Action, Function (FunctionModel / FunctionSlot), type system.
5. Discover kinds and set slots: Registry, Props.

The four moving parts on any page:

Elements  ──► what's on the page (tree of nodes, each with kind + props + styles)
Stores    ──► state the page reads/writes      (stores.<name>.<field>)
Actions   ──► behavior fired by events         (set-property, navigate, hook methods)
Hooks     ──► reactive computation             (hooks.<alias>.<key>)

Expressions {{ … }} wire them together in any prop value.

A prop is either a literal ("Hello") or an expression ("{{stores.user.name}}") resolved at render time. That binding layer is the whole product: the canvas, the published site, and the MCP tools all read and write the same declarations.