> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/pingdotgg/t3code/llms.txt
> Use this file to discover all available pages before exploring further.
# Web Interface Guide
> Learn how to use the T3 Code web interface for AI-powered code assistance
## 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:
```bash theme={null}
# 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
### Sidebar
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
Click the "Add Project" button at the bottom of the sidebar and enter your project path.
Click the pen icon next to a project name to start a new conversation.
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
```text Basic Question theme={null}
How do I implement authentication in this Next.js app?
```
```text With File Context theme={null}
@src/app/api/auth.ts
Can you add OAuth support to this authentication handler?
```
```text With Image theme={null}
[Attach screenshot of UI mockup]
Implement this design for the login page
```
### 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:
```text theme={null}
@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:
```text theme={null}
@model claude-sonnet-4
Review this code for security issues
```
Search by model name, provider, or slug.
### Image Attachments
Drag images directly onto the composer area
Preview thumbnails appear above the input
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:
```text theme={null}
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:
Ask the AI to implement a feature or fix
AI presents a markdown plan with steps
Choose to "Implement this plan" or provide feedback
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:
Find the message before unwanted changes
Click the undo icon on that message
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
* 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
* Learn about [CLI Usage](/guides/cli-usage) for advanced server configuration
* Explore [Project Management](/guides/project-management) for organizing work
* Master [Git Workflow](/guides/git-workflow) for version control integration