Web

Web Interface

Start the server and open the web UI:

tfcode web

The session UI includes a files panel — open .xlsx, .docx or .pptx files from it for read-only previews, or edit them in LibreOffice with the Office documents integration.

Computer Use

Let the agent control the local OS GUI (mouse, keyboard, screen) by clicking the computer-use icon in the prompt toolbar, or pressing Ctrl+Alt+C. The toggle is always available — no environment variable needed — and a computer chip appears in the prompt footer when active. See Computer Use.

Integrated Browser

TF Code ships with a built-in browser panel that opens as a full-height column on the right side of the session, next to the review and file panel. Use it to preview pages you or the agent are building without leaving the app — and to point the agent at exact elements on the page.

Open it with the globe icon in the session header. The panel is resizable (drag its left edge), and TF Code remembers whether it was open — on the next start it comes back exactly as you left it.

Two Viewing Modes

The toolbar has two mode buttons; the active one is highlighted in the accent color:

• Embedded preview (globe icon): renders the page in a sandboxed frame inside the panel. Fast and lightweight, but only works for localhost URLs and pages that allow embedding. For anything else TF Code switches to live mode automatically.
• Live browser (window icon): streams the real Chromium session the agent controls — the same one its browser tool drives. You can watch the agent work, and navigate, click, scroll, and type like a normal browser. Requires Chrome, Chromium, or Edge on the machine running the server; set TF_CHROME_PATH if yours lives elsewhere.

Remaining toolbar actions: back/forward, reload, open the current URL in your system browser, and close.

Picking Elements as Context

In live mode, the crosshair button ("Pick element") lets your cursor do the talking:

1. Click the crosshair in the browser toolbar.
2. Hover the page — an outline highlights each element under your cursor.
3. Click the element you care about.

A reference to that element (tag, text, CSS selector, size and position) is inserted straight into your prompt input. Describe the change you want and send — the agent knows exactly which element you meant.

Agent Integration

When the agent builds or changes a web page, it opens the result in the integrated browser with its browser tool — the panel pops open on its own and follows the agent's navigations, so you can watch progress live. Localhost dev servers with hot reload (Vite, Next.js, etc.) update in the panel as you edit files — embed mode re-renders automatically, and the agent can force a reload in live mode when a server needs a nudge. The panel stays closed unless the agent opens a page or you reopen it.

Attach a TUI

Connect a terminal interface to a running server:

tfcode attach http://localhost:4096

Server Options

These flags apply to tfcode serve, tfcode web, and tfcode attach:

Flag	Description	Default
--port	Port to listen on	0 (tries 4096)
--hostname	Hostname to bind	127.0.0.1
--mdns	Enable mDNS service discovery	false
--mdns-domain	Custom mDNS domain	tfcode.local
--cors	Additional allowed CORS origins	[]

See Server Mode for the full API reference.