The problem
An AI app-builder needs to show three things simultaneously: the conversation (what the user told the agent), the artifact (the code / canvas / file tree), and the result (the live running preview). These compete for screen space.
Observed layouts
Replit — 4-pane with persistent left icon rail
From Replit - Agent Chat with Preview:
[icon rail] | [chat pane] | [preview pane (live app, tabbed)] | [library pane]
56px ~30% ~50% ~15%
- Chat pane: agent thread with inline tool-calls, status updates.
- Preview: live app in iframe with tabs across the top (Preview / dashboard sub-tabs).
- Library: right-side tree of pages/screens (user-centric inventory).
Anything.com — 4-pane with code tree
From Anything.com - Code and Publish:
[icon rail] | [chat pane] | [file tree] | [code editor] | [publish or preview]
56px ~30% ~15% ~35% ~20%
- Chat pane: condensed summary of what was built.
- File tree: Next.js-style folder/file hierarchy.
- Code editor: JSX view.
- Right pane: Publish panel OR live preview (toggles via top-bar view icons).
Key difference
Replit keeps chat + live preview as peers — you're always watching the app run. The code editor is accessible via tab switch but not foregrounded.
Anything.com keeps chat + code + preview all visible at once — the file tree and code editor get equal weight alongside the preview. This is a more code-centric IDE layout, which is interesting given their marketing disavows code.
Together: Replit is more product-preview-first (what you see is what the user sees); Anything.com is more code-preview-first (see the code that produces what the user sees). Both support both, but the default framing differs.
Common elements
- Left icon rail (Anything 56px, Replit also narrow). Persistent nav.
- Right pane takes the biggest chunk. Natural reading flow (chat on left → result on right).
- Chat pane is always reserved. Neither tool lets you dismiss the agent conversation entirely.
Viewport toggles at top
Both competitors put viewport controls (preview / code / desktop / mobile) in a persistent top header above all panes. See Viewport Toggle Bar pattern.
Sources
- !raw/replit/Chat_View.png
- !raw/anythingdotcom/Code_Interface.png