Skip to main content

​
Overview

The T3 Code web interface provides a modern, chat-based UI for interacting with AI coding assistants. The interface consists of three main sections: the sidebar for project and thread management, the main chat area for conversations, and an optional diff panel for reviewing code changes.

​
Starting the Web Interface

The web interface is served by the T3 Code server and opens automatically in your browser: 
# Start the server (web mode is default)
t3 

# Specify a custom port
t3 --port 3000

# Bind to a specific host
t3 --host 0.0.0.0

# Disable automatic browser opening
t3 --no-browser
The web interface is accessible at http://localhost:PORT where PORT defaults to an available port starting from 8080.

​
Interface Layout

The sidebar is your project and conversation management hub:
  • Projects: Organize your work by codebase
  • Threads: Each conversation with the AI is a thread
  • Thread Status: Visual indicators show working/completed/approval states
  • Quick Actions: Create new threads, rename, or delete threads via context menu
1

Add a Project

Click the “Add Project” button at the bottom of the sidebar and enter your project path.
2

Create a Thread

Click the pen icon next to a project name to start a new conversation.
3

Switch Threads

Click any thread name to view its conversation history.

​
Chat View

The main area displays your conversation with the AI:
  • Message History: Scrollable timeline of user and assistant messages
  • Composer: Input area at the bottom for sending messages
  • Attachments: Drag and drop images (up to 10MB, 8 images max)
  • Status Indicators: Shows when AI is thinking or working

​
Toolbar

The top toolbar provides quick access to key features:
  • Model Selector: Switch between AI models (Codex, Claude, OpenAI, Gemini)
  • Runtime Mode: Toggle between approval-required and full-access modes
  • Interaction Mode: Switch between default chat and plan mode
  • Diff Toggle: Open the side-by-side diff panel
  • Terminal Toggle: Show/hide integrated terminal
  • Git Actions: Commit, push, and create pull requests

​
Working with Threads

​
Starting a Conversation

How do I implement authentication in this Next.js app?

​
Thread States

Threads display visual indicators for their current state:
  • Working (blue, pulsing): AI is actively processing
  • Pending Approval (amber): Waiting for your permission to proceed
  • Completed (green): Task finished successfully
  • Terminal Running (teal): Background process active

​
Managing Threads

Right-click any thread to access management options:
  • Rename thread: Give your conversation a descriptive name
  • Mark unread: Flag for later review
  • Copy Thread ID: Get the unique identifier
  • Delete: Remove thread and optionally clean up associated worktrees

​
Composer Features

​
Smart Mentions

Type @ to reference files or folders from your project: 
@src/components/Button.tsx
Add a loading state to this component
The autocomplete shows matching files with icons and paths.

​
Slash Commands

Type / for quick actions:
  • /model - Switch the AI model for this thread
  • /plan - Enable plan mode (AI proposes changes before implementing)
  • /default - Return to normal chat mode

​
Model Switching

Type @model to quickly switch models: 
@model claude-sonnet-4
Review this code for security issues
Search by model name, provider, or slug.

​
Image Attachments

1

Drag and Drop

Drag images directly onto the composer area
2

Review

Preview thumbnails appear above the input
3

Remove

Click the X icon on any image to remove it
Images must be under 10MB each. Maximum 8 images per message.

​
Runtime Modes

​
Full Access Mode

The AI can read and write files, execute commands, and make changes without approval:
  • Best for: Trusted environments, rapid iteration
  • Indicator: Unlocked icon in toolbar

​
Approval Required Mode

The AI must request permission before executing commands or modifying files:
  • Best for: Sensitive codebases, learning workflows
  • Indicator: Locked icon in toolbar
You can switch modes at any time using the lock/unlock button in the toolbar.

​
Interaction Modes

​
Default Mode

The AI works immediately on your request: 
Add error handling to the API routes
Changes are made as the AI works through the problem.

​
Plan Mode

The AI creates a detailed plan before implementing:
1

Request Changes

Ask the AI to implement a feature or fix
2

Review Plan

AI presents a markdown plan with steps
3

Approve or Modify

Choose to “Implement this plan” or provide feedback
4

Watch Implementation

AI executes the approved plan

​
Reviewing Changes

​
Inline Diffs

Messages from the AI include inline change summaries:
  • File paths are clickable
  • Addition/deletion counts (+/- lines)
  • File status indicators (created, modified, deleted)

​
Diff Panel

Click the diff icon or press the keyboard shortcut to open the side panel:
  • Unified Diff: See all changes in one view
  • Per-Turn Changes: Filter by specific conversation turns
  • Syntax Highlighting: Code changes with full syntax support

​
Checkpoint Revert

Hover over any message to see the revert button:
1

Identify Checkpoint

Find the message before unwanted changes
2

Click Revert

Click the undo icon on that message
3

Confirm

Review the revert scope and confirm
Reverting removes all changes made after that point in the conversation.

​
Work Logs

Expand work log sections to see detailed AI activity:
  • Tool Calls: What tools the AI is using
  • File Operations: Read/write operations
  • Command Execution: Shell commands run
  • Reasoning: AI’s thought process (for reasoning models)

​
Keyboard Shortcuts

The interface supports many keyboard shortcuts for efficiency:
  • New thread: Varies by platform (shown in tooltip)
  • Toggle terminal: Platform-specific
  • Toggle diff: Platform-specific
  • Focus composer: Click anywhere in chat area
Hover over buttons to see their keyboard shortcuts in tooltips.

​
Performance Tips

Optimize Your Experience

  • Use @file mentions to provide precise context
  • Close unused diff panels to improve scrolling performance
  • Archive old threads by deleting them when no longer needed
  • Use plan mode for complex, multi-file changes

​
Troubleshooting

​
Connection Issues

If the interface shows “Connecting…”:
  1. Check that the server is running
  2. Verify the WebSocket URL is correct
  3. Check browser console for errors
  4. Refresh the page

​
Model Not Available

If a model is grayed out:
  • Codex models: Ensure Codex CLI is installed and in PATH
  • Other providers: Check API keys in settings
  • Service tier: Some models require specific tier access

​
Images Not Uploading

  • Verify file size is under 10MB
  • Check image format is supported (JPEG, PNG, GIF, WebP)
  • Ensure browser has permission to read files
  • Try drag-and-drop instead of file picker

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us