Surface
Project preview showing the live built app with agent chat visible alongside.
Layout
Three panes: 1. Left (~30%): agent chat history. 2. Center (~35%): live preview of the built app. 3. Right (~20%): "Recent Calculations" sidebar (part of the app itself, inside preview).
Top header
Tabs list shows: Calculator (project) + Build me a calculator (chat/task tab, active) + view-toggle icons (preview / code / desktop / mobile / refresh).
Center — live app preview
The screenshot shows the calculator app actually running:
- App title: "Standard Calculator" with subtext "Precision arithmetic for professional workflows".
- Large numeric display showing 0.
- Button grid: numeric keypad (0-9), operators (÷, ×, −, +, =, ., ±, %, AC, ←).
- Blue highlighted = button — this is the "Action Blue" referenced by the agent's reasoning (see Anything.com - Agent Chat).
- Dark mode toggle icon top-right of app.
Recent Calculations panel (inside app)
- Title: "Recent Calculations"
- Empty state: "No recent calculations"
- Icon placeholder (dimmed).
Contextual Max trigger
Bottom of the preview pane:
- Use MAX here — subtle link / pill inviting the user to summon Max within this specific context.
Max is not just a mode toggle — it's contextually invokable from different surfaces. The "Use MAX here" pattern lets the user invoke autonomy within a specific preview, not just at the global prompt level. See Contextual Agent Trigger.
Bottom prompt box
Same as other screens: Make updates to your app… placeholder, Auto > + Default > mode selectors, attach icons.
Components observed
| Component | Purpose |
|---|---|
| Three-pane split (chat + preview + in-app sidebar) | Full workspace |
| Tab bar | Multiple chat/task threads per project |
| Live iframe preview | In-workspace app execution |
| Contextual Max trigger ("Use MAX here") | Localized agent summon |
| Viewport toggles | Desktop / mobile / device frame |
App-side UI inference
The built calculator itself uses:
- Card-based grid for buttons (not flat — each button has a subtle shadow/border).
- Blue primary action (= button) — the "Action Blue" from the design-system vocabulary.
- Persistent right sidebar for history — see the "History Sidebar" reference in Anything.com - Code and Publish.
Sources
- !Preview_Interface.png