Agent chat

The AI rail on the left of app.codelab.app is agent chat. You talk to a model; the model calls the same tools MCP clients use (add_element, create_store, update_props, …); the canvas re-renders from that tree.

There is no separate “AI copy” of the app. Chat and MCP are two clients of one tree. See App, Page, Element, and Component.

Where it lives

Open an app in the builder. The left sidebar is the chat:

• Tabs along the top are chats for this app. Create, rename, reorder, or close them.
• The composer at the bottom is where you type. Attach images if the model should see them.
• Model picks which network the next send uses. The default is GPT-5.6 Sol. Grok has two rows — API vs subscription.
• Review / Agent is approval. Review pauses on tool batches so you accept or reject. Agent runs tools without pausing (navigate still asks).

The empty state suggests a first prompt (Create a hero section…). When Grok 4.6 Subscription is selected, that same empty state (and Account → Grok subscription) is how you connect SuperGrok.

A second composer on the props panel shares the same chat thread, not live UI state with the rail.

What a send does

1. The builder sends the prompt to the selected model (or, for Grok subscription, to the local proxy on this Mac).
2. The model streams a reply and tool calls.
3. Those tools run against the current app. The tree is the source of truth — inspect with find_element / inspect_element / inspect_dom, then add or update.
4. History is stored on the chat.

API models (including unlabeled Grok 4.6) bill Codelab credits. Running out of credits opens top-up. Subscription chat does not; it uses your SuperGrok quota on this Mac.

Chat vs MCP

Use MCP when the agent should live in an external IDE. Use agent chat when you want the canvas and the model in one window.