|
@@ -18,6 +18,7 @@ Let's get started.
|
|
|
To use opencode, you'll need:
|
|
To use opencode, you'll need:
|
|
|
|
|
|
|
|
1. A modern terminal emulator like:
|
|
1. A modern terminal emulator like:
|
|
|
|
|
+
|
|
|
- [WezTerm](https://wezterm.org), cross-platform
|
|
- [WezTerm](https://wezterm.org), cross-platform
|
|
|
- [Alacritty](https://alacritty.org), cross-platform
|
|
- [Alacritty](https://alacritty.org), cross-platform
|
|
|
- [Ghostty](https://ghostty.org), Linux and macOS
|
|
- [Ghostty](https://ghostty.org), Linux and macOS
|
|
@@ -40,26 +41,10 @@ You can also install it with the following:
|
|
|
- **Using Node.js**
|
|
- **Using Node.js**
|
|
|
|
|
|
|
|
<Tabs>
|
|
<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>
|
|
|
|
|
|
|
+ <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>
|
|
</Tabs>
|
|
|
|
|
|
|
|
- **Using Homebrew on macOS**
|
|
- **Using Homebrew on macOS**
|
|
@@ -138,7 +123,7 @@ You should commit your project's `AGENTS.md` file to Git.
|
|
|
:::
|
|
:::
|
|
|
|
|
|
|
|
This helps opencode understand the project structure and the coding patterns
|
|
This helps opencode understand the project structure and the coding patterns
|
|
|
-used.
|
|
|
|
|
|
|
+used.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
@@ -178,22 +163,22 @@ You can ask opencode to add new features to your project. Though we first recomm
|
|
|
instead suggest _how_ it'll implement the feature.
|
|
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.
|
|
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"
|
|
```bash frame="none" title="Switch to Plan mode"
|
|
|
<TAB>
|
|
<TAB>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
Now let's describe what we want it to do.
|
|
Now let's describe what we want it to do.
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
```txt frame="none"
|
|
```txt frame="none"
|
|
|
When a user deletes a note, we'd like to flag it as deleted in the database.
|
|
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.
|
|
Then create a screen that shows all the recently deleted notes.
|
|
|
From this screen, the user can undelete a note or permanently delete it.
|
|
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
|
|
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.
|
|
to talk to it like you are talking to a junior developer on your team.
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
:::tip
|
|
:::tip
|
|
|
Give opencode plenty of context and examples to help it understand what you
|
|
Give opencode plenty of context and examples to help it understand what you
|
|
|
want.
|
|
want.
|
|
@@ -202,7 +187,7 @@ You can ask opencode to add new features to your project. Though we first recomm
|
|
|
2. **Iterate on the plan**
|
|
2. **Iterate on the plan**
|
|
|
|
|
|
|
|
Once it gives you a plan, you can give it feedback or add more details.
|
|
Once it gives you a plan, you can give it feedback or add more details.
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
```txt frame="none"
|
|
```txt frame="none"
|
|
|
We'd like to design this new screen using a design I've used before.
|
|
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.
|
|
[Image #1] Take a look at this image and use it as a reference.
|
|
@@ -216,16 +201,16 @@ You can ask opencode to add new features to your project. Though we first recomm
|
|
|
do this by dragging and dropping an image into the terminal.
|
|
do this by dragging and dropping an image into the terminal.
|
|
|
|
|
|
|
|
3. **Build the feature**
|
|
3. **Build the feature**
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
Once you feel comfortable with the plan, switch back to _Build mode_ by
|
|
Once you feel comfortable with the plan, switch back to _Build mode_ by
|
|
|
hitting the **Tab** key again.
|
|
hitting the **Tab** key again.
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
```bash frame="none"
|
|
```bash frame="none"
|
|
|
<TAB>
|
|
<TAB>
|
|
|
```
|
|
```
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
And asking it to make the changes.
|
|
And asking it to make the changes.
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
```bash frame="none"
|
|
```bash frame="none"
|
|
|
Sounds good! Go ahead and make the changes.
|
|
Sounds good! Go ahead and make the changes.
|
|
|
```
|
|
```
|
|
@@ -271,4 +256,4 @@ Here's an [example conversation](https://opencode.ai/s/4XP1fce5) with opencode.
|
|
|
|
|
|
|
|
And that's it! You are now a pro at using opencode.
|
|
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), or playing around with the [opencode config](/docs/config).
|
|
|
|
|
|
|
+To make it your own, we recommend [picking a theme](/docs/themes), [customizing the keybinds](/docs/keybinds), [configuring code formatters](/docs/formatters), or playing around with the [opencode config](/docs/config).
|