docs: add Web usage page (#8482)
This commit is contained in:
@@ -693,7 +693,7 @@ export default function Home() {
|
|||||||
<li>
|
<li>
|
||||||
<Faq question="Can I only use OpenCode in the terminal?">
|
<Faq question="Can I only use OpenCode in the terminal?">
|
||||||
Not anymore! OpenCode is now available as an app for your <a href="/download">desktop</a> and{" "}
|
Not anymore! OpenCode is now available as an app for your <a href="/download">desktop</a> and{" "}
|
||||||
<a href="/docs/cli/#web">web</a>!
|
<a href="/docs/web">web</a>!
|
||||||
</Faq>
|
</Faq>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export default defineConfig({
|
|||||||
"1-0",
|
"1-0",
|
||||||
{
|
{
|
||||||
label: "Usage",
|
label: "Usage",
|
||||||
items: ["tui", "cli", "ide", "zen", "share", "github", "gitlab"],
|
items: ["tui", "cli", "web", "ide", "zen", "share", "github", "gitlab"],
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|||||||
BIN
packages/web/src/assets/web/web-homepage-active-session.png
Normal file
BIN
packages/web/src/assets/web/web-homepage-active-session.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 730 KiB |
BIN
packages/web/src/assets/web/web-homepage-new-session.png
Normal file
BIN
packages/web/src/assets/web/web-homepage-new-session.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 609 KiB |
BIN
packages/web/src/assets/web/web-homepage-see-servers.png
Normal file
BIN
packages/web/src/assets/web/web-homepage-see-servers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 KiB |
132
packages/web/src/content/docs/web.mdx
Normal file
132
packages/web/src/content/docs/web.mdx
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
---
|
||||||
|
title: Web
|
||||||
|
description: Using OpenCode in your browser.
|
||||||
|
---
|
||||||
|
|
||||||
|
OpenCode can run as a web application in your browser, providing the same powerful AI coding experience without needing a terminal.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
Start the web interface by running:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
opencode web
|
||||||
|
```
|
||||||
|
|
||||||
|
This starts a local server on `127.0.0.1` with a random available port and automatically opens OpenCode in your default browser.
|
||||||
|
|
||||||
|
:::caution
|
||||||
|
If `OPENCODE_SERVER_PASSWORD` is not set, the server will be unsecured. This is fine for local use but should be set for network access.
|
||||||
|
:::
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
You can configure the web server using command line flags or in your [config file](/docs/config).
|
||||||
|
|
||||||
|
### Port
|
||||||
|
|
||||||
|
By default, OpenCode picks an available port. You can specify a port:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
opencode web --port 4096
|
||||||
|
```
|
||||||
|
|
||||||
|
### Hostname
|
||||||
|
|
||||||
|
By default, the server binds to `127.0.0.1` (localhost only). To make OpenCode accessible on your network:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
opencode web --hostname 0.0.0.0
|
||||||
|
```
|
||||||
|
|
||||||
|
When using `0.0.0.0`, OpenCode will display both local and network addresses:
|
||||||
|
|
||||||
|
```
|
||||||
|
Local access: http://localhost:4096
|
||||||
|
Network access: http://192.168.1.100:4096
|
||||||
|
```
|
||||||
|
|
||||||
|
### mDNS Discovery
|
||||||
|
|
||||||
|
Enable mDNS to make your server discoverable on the local network:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
opencode web --mdns
|
||||||
|
```
|
||||||
|
|
||||||
|
This automatically sets the hostname to `0.0.0.0` and advertises the server as `opencode.local`.
|
||||||
|
|
||||||
|
### CORS
|
||||||
|
|
||||||
|
To allow additional domains for CORS (useful for custom frontends):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
opencode web --cors https://example.com
|
||||||
|
```
|
||||||
|
|
||||||
|
### Authentication
|
||||||
|
|
||||||
|
To protect access, set a password using the `OPENCODE_SERVER_PASSWORD` environment variable:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENCODE_SERVER_PASSWORD=secret opencode web
|
||||||
|
```
|
||||||
|
|
||||||
|
The username defaults to `opencode` but can be changed with `OPENCODE_SERVER_USERNAME`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Using the Web Interface
|
||||||
|
|
||||||
|
Once started, the web interface provides access to your OpenCode sessions.
|
||||||
|
|
||||||
|
### Sessions
|
||||||
|
|
||||||
|
View and manage your sessions from the homepage. You can see active sessions and start new ones.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### Server Status
|
||||||
|
|
||||||
|
Click "See Servers" to view connected servers and their status.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Attaching a Terminal
|
||||||
|
|
||||||
|
You can attach a terminal TUI to a running web server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start the web server
|
||||||
|
opencode web --port 4096
|
||||||
|
|
||||||
|
# In another terminal, attach the TUI
|
||||||
|
opencode attach http://localhost:4096
|
||||||
|
```
|
||||||
|
|
||||||
|
This allows you to use both the web interface and terminal simultaneously, sharing the same sessions and state.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Config File
|
||||||
|
|
||||||
|
You can also configure server settings in your `opencode.json` config file:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"server": {
|
||||||
|
"port": 4096,
|
||||||
|
"hostname": "0.0.0.0",
|
||||||
|
"mdns": true,
|
||||||
|
"cors": ["https://example.com"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Command line flags take precedence over config file settings.
|
||||||
Reference in New Issue
Block a user