This commit is contained in:
Dax Raad
2025-09-02 23:30:26 -04:00
parent c1d754bec9
commit 1c31c2dd97
33 changed files with 396 additions and 356 deletions

View File

@@ -0,0 +1,20 @@
import type { APIEvent } from "@solidjs/start/server"
async function handler(evt: APIEvent) {
const req = evt.request.clone()
const url = new URL(req.url)
const targetUrl = `https://dev.opencode.ai${url.pathname}${url.search}`
const response = await fetch(targetUrl, {
method: req.method,
headers: req.headers,
body: req.body,
})
return response
}
export const GET = handler
export const POST = handler
export const PUT = handler
export const DELETE = handler
export const OPTIONS = handler
export const PATCH = handler

View File

@@ -0,0 +1,20 @@
import type { APIEvent } from "@solidjs/start/server"
async function handler(evt: APIEvent) {
const req = evt.request.clone()
const url = new URL(req.url)
const targetUrl = `https://dev.opencode.ai${url.pathname}${url.search}`
const response = await fetch(targetUrl, {
method: req.method,
headers: req.headers,
body: req.body,
})
return response
}
export const GET = handler
export const POST = handler
export const PUT = handler
export const DELETE = handler
export const OPTIONS = handler
export const PATCH = handler

View File

@@ -0,0 +1,20 @@
import type { APIEvent } from "@solidjs/start/server"
async function handler(evt: APIEvent) {
const req = evt.request.clone()
const url = new URL(req.url)
const targetUrl = `http://dev.opencode.ai/docs${url.pathname}${url.search}`
const response = await fetch(targetUrl, {
method: req.method,
headers: req.headers,
body: req.body,
})
return response
}
export const GET = handler
export const POST = handler
export const PUT = handler
export const DELETE = handler
export const OPTIONS = handler
export const PATCH = handler

View File

@@ -1,11 +1,10 @@
import "./[id].css"
import { Billing } from "@opencode/cloud-core/billing.js" import { Billing } from "@opencode/cloud-core/billing.js"
import { Key } from "@opencode/cloud-core/key.js" import { Key } from "@opencode/cloud-core/key.js"
import { action, createAsync, query, useAction, useSubmission, json } from "@solidjs/router" import { action, createAsync, query, useAction, useSubmission, json } from "@solidjs/router"
import { createSignal, For, onMount, Show } from "solid-js" import { createSignal, For, Show } from "solid-js"
import { getActor } from "~/context/auth"
import { withActor } from "~/context/auth.withActor" import { withActor } from "~/context/auth.withActor"
import { IconCopy, IconCheck } from "~/component/icon" import { IconCopy, IconCheck } from "~/component/icon"
import "./[id].css"
import { User } from "@opencode/cloud-core/user.js" import { User } from "@opencode/cloud-core/user.js"
import { Actor } from "@opencode/cloud-core/actor.js" import { Actor } from "@opencode/cloud-core/actor.js"
@@ -63,7 +62,7 @@ const createPortalUrl = action(async (returnUrl: string) => {
return withActor(() => Billing.generatePortalUrl({ returnUrl })) return withActor(() => Billing.generatePortalUrl({ returnUrl }))
}, "portalUrl") }, "portalUrl")
export default function() { export default function () {
///////////////// /////////////////
// Keys section // Keys section

View File

@@ -34,7 +34,7 @@ export const api = new sst.cloudflare.Worker("Api", {
}) })
export const web = new sst.cloudflare.x.Astro("Web", { export const web = new sst.cloudflare.x.Astro("Web", {
domain, domain: "docs." + domain,
path: "packages/web", path: "packages/web",
environment: { environment: {
// For astro config // For astro config

View File

@@ -12,6 +12,7 @@ import { spawnSync } from "child_process"
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: config.url, site: config.url,
base: "/docs",
output: "server", output: "server",
adapter: cloudflare({ adapter: cloudflare({
imageService: "passthrough", imageService: "passthrough",
@@ -59,44 +60,36 @@ export default defineConfig({
replacesTitle: true, replacesTitle: true,
}, },
sidebar: [ sidebar: [
"docs", "",
"docs/config", "config",
"docs/providers", "providers",
"docs/enterprise", "enterprise",
"docs/troubleshooting", "troubleshooting",
{ {
label: "Usage", label: "Usage",
items: [ items: ["tui", "cli", "ide", "zen", "share", "github", "gitlab"],
"docs/tui",
"docs/cli",
"docs/ide",
"docs/zen",
"docs/share",
"docs/github",
"docs/gitlab"
],
}, },
{ {
label: "Configure", label: "Configure",
items: [ items: [
"docs/rules", "rules",
"docs/agents", "agents",
"docs/models", "models",
"docs/themes", "themes",
"docs/keybinds", "keybinds",
"docs/commands", "commands",
"docs/formatters", "formatters",
"docs/permissions", "permissions",
"docs/lsp", "lsp",
"docs/mcp-servers", "mcp-servers",
], ],
}, },
{ {
label: "Develop", label: "Develop",
items: ["docs/sdk", "docs/server", "docs/plugins"], items: ["sdk", "server", "plugins"],
}, },
], ],
components: { components: {

View File

@@ -1,311 +0,0 @@
---
title: Intro
description: Get started with opencode.
---
import { Tabs, TabItem } from "@astrojs/starlight/components"
[**opencode**](/) is an AI coding agent built for the terminal.
![opencode TUI with the opencode theme](../../../assets/lander/screenshot.png)
Let's get started.
---
#### Prerequisites
To use opencode, you'll need:
1. A modern terminal emulator like:
- [WezTerm](https://wezterm.org), cross-platform
- [Alacritty](https://alacritty.org), cross-platform
- [Ghostty](https://ghostty.org), Linux and macOS
- [Kitty](https://sw.kovidgoyal.net/kitty/), Linux and macOS
2. API keys for the LLM providers you want to use.
---
## Install
The easiest way to install opencode is through the install script.
```bash
curl -fsSL https://opencode.ai/install | bash
```
You can also install it with the following:
- **Using Node.js**
<Tabs>
<TabItem label="npm">
```bash
npm install -g opencode-ai
```
</TabItem>
<TabItem label="Bun">
```bash
bun install -g opencode-ai
```
</TabItem>
<TabItem label="pnpm">
```bash
pnpm install -g opencode-ai
```
</TabItem>
<TabItem label="Yarn">
```bash
yarn global add opencode-ai
```
</TabItem>
</Tabs>
- **Using Homebrew on macOS and Linux**
```bash
brew install sst/tap/opencode
```
- **Using Paru on Arch Linux**
```bash
paru -S opencode-bin
```
#### Windows
Right now the automatic installation methods do not work properly on Windows. However you can grab the binary from the [Releases](https://github.com/sst/opencode/releases).
---
## Configure
With opencode you can use any LLM provider by configuring their API keys.
We recommend signing up for [Claude Pro](https://www.anthropic.com/news/claude-pro) or [Max](https://www.anthropic.com/max), it's the most cost-effective way to use opencode.
Once you've signed up, run `opencode auth login` and select Anthropic.
```bash
$ opencode auth login
┌ Add credential
◆ Select provider
│ ● Anthropic (recommended)
│ ○ OpenAI
│ ○ Google
│ ○ Amazon Bedrock
│ ○ Azure
│ ○ DeepSeek
│ ○ Groq
│ ...
```
Alternatively, you can select one of the other providers. [Learn more](/docs/providers#directory).
---
## Initialize
Now that you've configured a provider, you can navigate to a project that
you want to work on.
```bash
cd /path/to/project
```
And run opencode.
```bash
opencode
```
Next, initialize opencode for the project by running the following command.
```bash frame="none"
/init
```
This will get opencode to analyze your project and create an `AGENTS.md` file in
the project root.
:::tip
You should commit your project's `AGENTS.md` file to Git.
:::
This helps opencode understand the project structure and the coding patterns
used.
---
## Usage
You are now ready to use opencode to work on your project. Feel free to ask it
anything!
If you are new to using an AI coding agent, here are some examples that might
help.
---
### Ask questions
You can ask opencode to explain the codebase to you.
:::tip
Use the `@` key to fuzzy search for files in the project.
:::
```txt frame="none" "@packages/functions/src/api/index.ts"
How is authentication handled in @packages/functions/src/api/index.ts
```
This is helpful if there's a part of the codebase that you didn't work on.
---
### Add features
You can ask opencode to add new features to your project. Though we first recommend asking it to create a plan.
1. **Create a plan**
opencode has a _Plan mode_ that disables its ability to make changes and
instead suggest _how_ it'll implement the feature.
Switch to it using the **Tab** key. You'll see an indicator for this in the lower right corner.
```bash frame="none" title="Switch to Plan mode"
<TAB>
```
Now let's describe what we want it to do.
```txt frame="none"
When a user deletes a note, we'd like to flag it as deleted in the database.
Then create a screen that shows all the recently deleted notes.
From this screen, the user can undelete a note or permanently delete it.
```
You want to give opencode enough details to understand what you want. It helps
to talk to it like you are talking to a junior developer on your team.
:::tip
Give opencode plenty of context and examples to help it understand what you
want.
:::
2. **Iterate on the plan**
Once it gives you a plan, you can give it feedback or add more details.
```txt frame="none"
We'd like to design this new screen using a design I've used before.
[Image #1] Take a look at this image and use it as a reference.
```
:::tip
Drag and drop images into the terminal to add them to the prompt.
:::
opencode can scan any images you give it and add them to the prompt. You can
do this by dragging and dropping an image into the terminal.
3. **Build the feature**
Once you feel comfortable with the plan, switch back to _Build mode_ by
hitting the **Tab** key again.
```bash frame="none"
<TAB>
```
And asking it to make the changes.
```bash frame="none"
Sounds good! Go ahead and make the changes.
```
---
### Make changes
For more straightforward changes, you can ask opencode to directly build it
without having to review the plan first.
```txt frame="none" "@packages/functions/src/settings.ts" "@packages/functions/src/notes.ts"
We need to add authentication to the /settings route. Take a look at how this is
handled in the /notes route in @packages/functions/src/notes.ts and implement
the same logic in @packages/functions/src/settings.ts
```
You want to make sure you provide a good amount of detail so opencode makes the right
changes.
---
### Undo changes
Let's say you ask opencode to make some changes.
```txt frame="none" "@packages/functions/src/api/index.ts"
Can you refactor the function in @packages/functions/src/api/index.ts?
```
But you realize that it is not what you wanted. You **can undo** the changes
using the `/undo` command.
```bash frame="none"
/undo
```
opencode will now revert the changes you made and show your original message
again.
```txt frame="none" "@packages/functions/src/api/index.ts"
Can you refactor the function in @packages/functions/src/api/index.ts?
```
From here you can tweak the prompt and ask opencode to try again.
:::tip
You can run `/undo` multiple times to undo multiple changes.
:::
Or you **can redo** the changes using the `/redo` command.
```bash frame="none"
/redo
```
---
## Share
The conversations that you have with opencode can be [shared with your
team](/docs/share).
```bash frame="none"
/share
```
This will create a link to the current conversation and copy it to your clipboard.
:::note
Conversations are not shared by default.
:::
Here's an [example conversation](https://opencode.ai/s/4XP1fce5) with opencode.
---
## Customize
And that's it! You are now a pro at using opencode.
To make it your own, we recommend [picking a theme](/docs/themes), [customizing the keybinds](/docs/keybinds), [configuring code formatters](/docs/formatters), [creating custom commands](/docs/commands), or playing around with the [opencode config](/docs/config).

View File

@@ -3,7 +3,7 @@ title: Enterprise
description: Using opencode in your organization. description: Using opencode in your organization.
--- ---
import config from "../../../../config.mjs" import config from "../../../config.mjs"
export const email = `mailto:${config.email}` export const email = `mailto:${config.email}`
opencode does not store any of your code or context data. This makes it easy for opencode does not store any of your code or context data. This makes it easy for

View File

@@ -1,12 +1,311 @@
--- ---
title: opencode title: Intro
description: The AI coding agent built for the terminal. description: Get started with opencode.
template: splash
hero:
title: The AI coding agent built for the terminal.
tagline: The AI coding agent built for the terminal.
image:
dark: ../../assets/logo-ornate-dark.svg
light: ../../assets/logo-ornate-light.svg
alt: opencode logo
--- ---
import { Tabs, TabItem } from "@astrojs/starlight/components"
[**opencode**](/) is an AI coding agent built for the terminal.
![opencode TUI with the opencode theme](../../assets/lander/screenshot.png)
Let's get started.
---
#### Prerequisites
To use opencode, you'll need:
1. A modern terminal emulator like:
- [WezTerm](https://wezterm.org), cross-platform
- [Alacritty](https://alacritty.org), cross-platform
- [Ghostty](https://ghostty.org), Linux and macOS
- [Kitty](https://sw.kovidgoyal.net/kitty/), Linux and macOS
2. API keys for the LLM providers you want to use.
---
## Install
The easiest way to install opencode is through the install script.
```bash
curl -fsSL https://opencode.ai/install | bash
```
You can also install it with the following:
- **Using Node.js**
<Tabs>
<TabItem label="npm">
```bash
npm install -g opencode-ai
```
</TabItem>
<TabItem label="Bun">
```bash
bun install -g opencode-ai
```
</TabItem>
<TabItem label="pnpm">
```bash
pnpm install -g opencode-ai
```
</TabItem>
<TabItem label="Yarn">
```bash
yarn global add opencode-ai
```
</TabItem>
</Tabs>
- **Using Homebrew on macOS and Linux**
```bash
brew install sst/tap/opencode
```
- **Using Paru on Arch Linux**
```bash
paru -S opencode-bin
```
#### Windows
Right now the automatic installation methods do not work properly on Windows. However you can grab the binary from the [Releases](https://github.com/sst/opencode/releases).
---
## Configure
With opencode you can use any LLM provider by configuring their API keys.
We recommend signing up for [Claude Pro](https://www.anthropic.com/news/claude-pro) or [Max](https://www.anthropic.com/max), it's the most cost-effective way to use opencode.
Once you've signed up, run `opencode auth login` and select Anthropic.
```bash
$ opencode auth login
┌ Add credential
◆ Select provider
│ ● Anthropic (recommended)
│ ○ OpenAI
│ ○ Google
│ ○ Amazon Bedrock
│ ○ Azure
│ ○ DeepSeek
│ ○ Groq
│ ...
```
Alternatively, you can select one of the other providers. [Learn more](/docs/providers#directory).
---
## Initialize
Now that you've configured a provider, you can navigate to a project that
you want to work on.
```bash
cd /path/to/project
```
And run opencode.
```bash
opencode
```
Next, initialize opencode for the project by running the following command.
```bash frame="none"
/init
```
This will get opencode to analyze your project and create an `AGENTS.md` file in
the project root.
:::tip
You should commit your project's `AGENTS.md` file to Git.
:::
This helps opencode understand the project structure and the coding patterns
used.
---
## Usage
You are now ready to use opencode to work on your project. Feel free to ask it
anything!
If you are new to using an AI coding agent, here are some examples that might
help.
---
### Ask questions
You can ask opencode to explain the codebase to you.
:::tip
Use the `@` key to fuzzy search for files in the project.
:::
```txt frame="none" "@packages/functions/src/api/index.ts"
How is authentication handled in @packages/functions/src/api/index.ts
```
This is helpful if there's a part of the codebase that you didn't work on.
---
### Add features
You can ask opencode to add new features to your project. Though we first recommend asking it to create a plan.
1. **Create a plan**
opencode has a _Plan mode_ that disables its ability to make changes and
instead suggest _how_ it'll implement the feature.
Switch to it using the **Tab** key. You'll see an indicator for this in the lower right corner.
```bash frame="none" title="Switch to Plan mode"
<TAB>
```
Now let's describe what we want it to do.
```txt frame="none"
When a user deletes a note, we'd like to flag it as deleted in the database.
Then create a screen that shows all the recently deleted notes.
From this screen, the user can undelete a note or permanently delete it.
```
You want to give opencode enough details to understand what you want. It helps
to talk to it like you are talking to a junior developer on your team.
:::tip
Give opencode plenty of context and examples to help it understand what you
want.
:::
2. **Iterate on the plan**
Once it gives you a plan, you can give it feedback or add more details.
```txt frame="none"
We'd like to design this new screen using a design I've used before.
[Image #1] Take a look at this image and use it as a reference.
```
:::tip
Drag and drop images into the terminal to add them to the prompt.
:::
opencode can scan any images you give it and add them to the prompt. You can
do this by dragging and dropping an image into the terminal.
3. **Build the feature**
Once you feel comfortable with the plan, switch back to _Build mode_ by
hitting the **Tab** key again.
```bash frame="none"
<TAB>
```
And asking it to make the changes.
```bash frame="none"
Sounds good! Go ahead and make the changes.
```
---
### Make changes
For more straightforward changes, you can ask opencode to directly build it
without having to review the plan first.
```txt frame="none" "@packages/functions/src/settings.ts" "@packages/functions/src/notes.ts"
We need to add authentication to the /settings route. Take a look at how this is
handled in the /notes route in @packages/functions/src/notes.ts and implement
the same logic in @packages/functions/src/settings.ts
```
You want to make sure you provide a good amount of detail so opencode makes the right
changes.
---
### Undo changes
Let's say you ask opencode to make some changes.
```txt frame="none" "@packages/functions/src/api/index.ts"
Can you refactor the function in @packages/functions/src/api/index.ts?
```
But you realize that it is not what you wanted. You **can undo** the changes
using the `/undo` command.
```bash frame="none"
/undo
```
opencode will now revert the changes you made and show your original message
again.
```txt frame="none" "@packages/functions/src/api/index.ts"
Can you refactor the function in @packages/functions/src/api/index.ts?
```
From here you can tweak the prompt and ask opencode to try again.
:::tip
You can run `/undo` multiple times to undo multiple changes.
:::
Or you **can redo** the changes using the `/redo` command.
```bash frame="none"
/redo
```
---
## Share
The conversations that you have with opencode can be [shared with your
team](/docs/share).
```bash frame="none"
/share
```
This will create a link to the current conversation and copy it to your clipboard.
:::note
Conversations are not shared by default.
:::
Here's an [example conversation](https://opencode.ai/s/4XP1fce5) with opencode.
---
## Customize
And that's it! You are now a pro at using opencode.
To make it your own, we recommend [picking a theme](/docs/themes), [customizing the keybinds](/docs/keybinds), [configuring code formatters](/docs/formatters), [creating custom commands](/docs/commands), or playing around with the [opencode config](/docs/config).

View File

@@ -3,7 +3,7 @@ title: Providers
description: Using any LLM provider in opencode. description: Using any LLM provider in opencode.
--- ---
import config from "../../../../config.mjs" import config from "../../../config.mjs"
export const console = config.console export const console = config.console
opencode uses the [AI SDK](https://ai-sdk.dev/) and [Models.dev](https://models.dev) to support for **75+ LLM providers** and it supports running local models. opencode uses the [AI SDK](https://ai-sdk.dev/) and [Models.dev](https://models.dev) to support for **75+ LLM providers** and it supports running local models.

View File

@@ -3,7 +3,7 @@ title: SDK
description: Type-safe JS client for opencode server. description: Type-safe JS client for opencode server.
--- ---
import config from "../../../../config.mjs" import config from "../../../config.mjs"
export const typesUrl = `${config.github}/blob/dev/packages/sdk/js/src/gen/types.gen.ts` export const typesUrl = `${config.github}/blob/dev/packages/sdk/js/src/gen/types.gen.ts`
The opencode JS/TS SDK provides a type-safe client for interacting with the server. The opencode JS/TS SDK provides a type-safe client for interacting with the server.

View File

@@ -3,7 +3,7 @@ title: Server
description: Interact with opencode server over HTTP. description: Interact with opencode server over HTTP.
--- ---
import config from "../../../../config.mjs" import config from "../../../config.mjs"
export const typesUrl = `${config.github}/blob/dev/packages/sdk/js/src/gen/types.gen.ts` export const typesUrl = `${config.github}/blob/dev/packages/sdk/js/src/gen/types.gen.ts`
The `opencode serve` command runs a headless HTTP server that exposes an OpenAPI endpoint that an opencode client can use. The `opencode serve` command runs a headless HTTP server that exposes an OpenAPI endpoint that an opencode client can use.

View File

@@ -3,7 +3,7 @@ title: Zen
description: Curated list of models provided by opencode. description: Curated list of models provided by opencode.
--- ---
import config from "../../../../config.mjs" import config from "../../../config.mjs"
export const console = config.console export const console = config.console
export const email = `mailto:${config.email}` export const email = `mailto:${config.email}`