YouTip

# OpenCode Web Usage (Browser Interface) In addition to the terminal (TUI), OpenCode also provides a web interface that allows you to directly use AI programming capabilities through a browser. **Web mode is suitable for: remote access, team collaboration, and visual operations.** **OpenCode Web is the graphical version of TUI, upgrading AI programming from a terminal tool to a visual collaboration platform.** * * * ## 1. What is OpenCode Web? OpenCode Web is a graphical interface version based on HTTP service, which is essentially: * Backend: OpenCode service (started via CLI) * Frontend: Browser interface It can be understood as: **The visual version of TUI** !(#) * * * ## 2. Starting the Web Service ### 1. Basic Startup opencode web By default, it will: * Start a local HTTP service * Automatically open the browser * * * ### 2. Custom Port opencode web --port 4096 * * * ### 3. Allowing External Access (Important) opencode web --hostname 0.0.0.0 --port 4096 Can be accessed via LAN or remotely * * * ## 3. Access Methods After starting, access in the browser: http://localhost:4096 Or: http://your-IP:4096 * * * ## 4. Interface Description The OpenCode Web interface usually contains: * **Input Area:** Enter prompts (similar to ChatGPT) * **Conversation Area:** Display AI output results * **File Context:** Automatically read project code * **Operation Records:** Execute commands and modification logs Essentially the same as TUI, just more intuitive * * * ## 5. Basic Usage Methods ### 1. Ask Questions Help me analyze the structure of this project ### 2. Reference Files What does this function do? @src/index.js ### 3. Execute Modifications Split this function into three functions and add error handling **Note:** * Web and TUI commands are completely consistent * Also supports context understanding ### 4. Sessions View and manage your sessions on the homepage. You can view active sessions or create new sessions. !(#) ### 5. Server Status Click See Servers to view connected servers and their status. !(#) * * * ## 6. Authentication (Security Settings) If you use it on a public network or team environment, it is recommended to enable authentication: export OPENCODE_SERVER_PASSWORD=123456 opencode web **Note:** * Username default: opencode * Password: the value you set * * * ## 7. Common Usage Scenarios ### 1. Remote Development * Run OpenCode on the server * Access remotely via browser ### 2. Team Sharing * Multiple people view AI modification results * Share conversation context ### 3. Demonstration / Teaching * More intuitive than terminal * Suitable for screen recording and display * * * ## 8. Web vs TUI | Dimension | TUI (Terminal) | Web (Browser) | | --- | --- | --- | | Usage Method | Command line | Graphical interface | | Operation Efficiency | High (many shortcuts) | Medium | | Visualization | Relatively weak | More intuitive | | Remote Access | Relatively complex | Simple | | Suitable For | Developers | Beginners / Teams | * * * ## 9. Common Questions ### 1. Cannot Access Page Check: * Whether the port is open * Whether using the correct address (localhost / IP) ### 2. Cannot Access Remotely Ensure using: --hostname 0.0.0.0 ### 3. Port Occupied Change port: opencode web --port 5000