index.mdx 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. ---
  2. title: Intro
  3. description: Get started with OpenCode.
  4. ---
  5. import { Tabs, TabItem } from "@astrojs/starlight/components"
  6. import config from "../../../config.mjs"
  7. export const console = config.console
  8. [**OpenCode**](/) is an open source AI coding agent. It's available as a terminal-based interface, desktop app, or IDE extension.
  9. ![OpenCode TUI with the opencode theme](../../assets/lander/screenshot.png)
  10. Let's get started.
  11. ---
  12. #### Prerequisites
  13. To use OpenCode in your terminal, you'll need:
  14. 1. A modern terminal emulator like:
  15. - [WezTerm](https://wezterm.org), cross-platform
  16. - [Alacritty](https://alacritty.org), cross-platform
  17. - [Ghostty](https://ghostty.org), Linux and macOS
  18. - [Kitty](https://sw.kovidgoyal.net/kitty/), Linux and macOS
  19. 2. API keys for the LLM providers you want to use.
  20. ---
  21. ## Install
  22. The easiest way to install OpenCode is through the install script.
  23. ```bash
  24. curl -fsSL https://opencode.ai/install | bash
  25. ```
  26. You can also install it with the following commands:
  27. - **Using Node.js**
  28. <Tabs>
  29. <TabItem label="npm">
  30. ```bash
  31. npm install -g opencode-ai
  32. ```
  33. </TabItem>
  34. <TabItem label="Bun">
  35. ```bash
  36. bun install -g opencode-ai
  37. ```
  38. </TabItem>
  39. <TabItem label="pnpm">
  40. ```bash
  41. pnpm install -g opencode-ai
  42. ```
  43. </TabItem>
  44. <TabItem label="Yarn">
  45. ```bash
  46. yarn global add opencode-ai
  47. ```
  48. </TabItem>
  49. </Tabs>
  50. - **Using Homebrew on macOS and Linux**
  51. ```bash
  52. brew install opencode
  53. ```
  54. - **Using Paru on Arch Linux**
  55. ```bash
  56. paru -S opencode-bin
  57. ```
  58. #### Windows
  59. - **Using Chocolatey**
  60. ```bash
  61. choco install opencode
  62. ```
  63. - **Using Scoop**
  64. ```bash
  65. scoop bucket add extras
  66. scoop install extras/opencode
  67. ```
  68. - **Using NPM**
  69. ```bash
  70. npm install -g opencode-ai
  71. ```
  72. - **Using Mise**
  73. ```bash
  74. mise use -g github:sst/opencode
  75. ```
  76. - **Using Docker**
  77. ```bash
  78. docker run -it --rm ghcr.io/sst/opencode
  79. ```
  80. Support for installing OpenCode on Windows using Bun is currently in progress.
  81. You can also grab the binary from the [Releases](https://github.com/sst/opencode/releases).
  82. ---
  83. ## Configure
  84. With OpenCode you can use any LLM provider by configuring their API keys.
  85. If you are new to using LLM providers, we recommend using [OpenCode Zen](/docs/zen).
  86. It's a curated list of models that have been tested and verified by the OpenCode
  87. team.
  88. 1. Run the `/connect` command in the TUI, select opencode, and head to [opencode.ai/auth](https://opencode.ai/auth).
  89. ```txt
  90. /connect
  91. ```
  92. 2. Sign in, add your billing details, and copy your API key.
  93. 3. Paste your API key.
  94. ```txt
  95. ┌ API key
  96. │
  97. │
  98. └ enter
  99. ```
  100. Alternatively, you can select one of the other providers. [Learn more](/docs/providers#directory).
  101. ---
  102. ## Initialize
  103. Now that you've configured a provider, you can navigate to a project that
  104. you want to work on.
  105. ```bash
  106. cd /path/to/project
  107. ```
  108. And run OpenCode.
  109. ```bash
  110. opencode
  111. ```
  112. Next, initialize OpenCode for the project by running the following command.
  113. ```bash frame="none"
  114. /init
  115. ```
  116. This will get OpenCode to analyze your project and create an `AGENTS.md` file in
  117. the project root.
  118. :::tip
  119. You should commit your project's `AGENTS.md` file to Git.
  120. :::
  121. This helps OpenCode understand the project structure and the coding patterns
  122. used.
  123. ---
  124. ## Usage
  125. You are now ready to use OpenCode to work on your project. Feel free to ask it
  126. anything!
  127. If you are new to using an AI coding agent, here are some examples that might
  128. help.
  129. ---
  130. ### Ask questions
  131. You can ask OpenCode to explain the codebase to you.
  132. :::tip
  133. Use the `@` key to fuzzy search for files in the project.
  134. :::
  135. ```txt frame="none" "@packages/functions/src/api/index.ts"
  136. How is authentication handled in @packages/functions/src/api/index.ts
  137. ```
  138. This is helpful if there's a part of the codebase that you didn't work on.
  139. ---
  140. ### Add features
  141. You can ask OpenCode to add new features to your project. Though we first recommend asking it to create a plan.
  142. 1. **Create a plan**
  143. OpenCode has a _Plan mode_ that disables its ability to make changes and
  144. instead suggest _how_ it'll implement the feature.
  145. Switch to it using the **Tab** key. You'll see an indicator for this in the lower right corner.
  146. ```bash frame="none" title="Switch to Plan mode"
  147. <TAB>
  148. ```
  149. Now let's describe what we want it to do.
  150. ```txt frame="none"
  151. When a user deletes a note, we'd like to flag it as deleted in the database.
  152. Then create a screen that shows all the recently deleted notes.
  153. From this screen, the user can undelete a note or permanently delete it.
  154. ```
  155. You want to give OpenCode enough details to understand what you want. It helps
  156. to talk to it like you are talking to a junior developer on your team.
  157. :::tip
  158. Give OpenCode plenty of context and examples to help it understand what you
  159. want.
  160. :::
  161. 2. **Iterate on the plan**
  162. Once it gives you a plan, you can give it feedback or add more details.
  163. ```txt frame="none"
  164. We'd like to design this new screen using a design I've used before.
  165. [Image #1] Take a look at this image and use it as a reference.
  166. ```
  167. :::tip
  168. Drag and drop images into the terminal to add them to the prompt.
  169. :::
  170. OpenCode can scan any images you give it and add them to the prompt. You can
  171. do this by dragging and dropping an image into the terminal.
  172. 3. **Build the feature**
  173. Once you feel comfortable with the plan, switch back to _Build mode_ by
  174. hitting the **Tab** key again.
  175. ```bash frame="none"
  176. <TAB>
  177. ```
  178. And asking it to make the changes.
  179. ```bash frame="none"
  180. Sounds good! Go ahead and make the changes.
  181. ```
  182. ---
  183. ### Make changes
  184. For more straightforward changes, you can ask OpenCode to directly build it
  185. without having to review the plan first.
  186. ```txt frame="none" "@packages/functions/src/settings.ts" "@packages/functions/src/notes.ts"
  187. We need to add authentication to the /settings route. Take a look at how this is
  188. handled in the /notes route in @packages/functions/src/notes.ts and implement
  189. the same logic in @packages/functions/src/settings.ts
  190. ```
  191. You want to make sure you provide a good amount of detail so OpenCode makes the right
  192. changes.
  193. ---
  194. ### Undo changes
  195. Let's say you ask OpenCode to make some changes.
  196. ```txt frame="none" "@packages/functions/src/api/index.ts"
  197. Can you refactor the function in @packages/functions/src/api/index.ts?
  198. ```
  199. But you realize that it is not what you wanted. You **can undo** the changes
  200. using the `/undo` command.
  201. ```bash frame="none"
  202. /undo
  203. ```
  204. OpenCode will now revert the changes you made and show your original message
  205. again.
  206. ```txt frame="none" "@packages/functions/src/api/index.ts"
  207. Can you refactor the function in @packages/functions/src/api/index.ts?
  208. ```
  209. From here you can tweak the prompt and ask OpenCode to try again.
  210. :::tip
  211. You can run `/undo` multiple times to undo multiple changes.
  212. :::
  213. Or you **can redo** the changes using the `/redo` command.
  214. ```bash frame="none"
  215. /redo
  216. ```
  217. ---
  218. ## Share
  219. The conversations that you have with OpenCode can be [shared with your
  220. team](/docs/share).
  221. ```bash frame="none"
  222. /share
  223. ```
  224. This will create a link to the current conversation and copy it to your clipboard.
  225. :::note
  226. Conversations are not shared by default.
  227. :::
  228. Here's an [example conversation](https://opencode.ai/s/4XP1fce5) with OpenCode.
  229. ---
  230. ## Customize
  231. And that's it! You are now a pro at using OpenCode.
  232. 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).