index.mdx 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  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 AI coding agent built for the terminal.
  9. ![OpenCode TUI with the opencode theme](../../assets/lander/screenshot.png)
  10. Let's get started.
  11. ---
  12. #### Prerequisites
  13. To use OpenCode, 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. Support for installing OpenCode on Windows using Bun is currently in progress.
  73. You can also grab the binary from the [Releases](https://github.com/sst/opencode/releases).
  74. ---
  75. ## Configure
  76. With OpenCode you can use any LLM provider by configuring their API keys.
  77. If you are new to using LLM providers, we recommend using [OpenCode Zen](/docs/zen).
  78. It's a curated list of models that have been tested and verified by the OpenCode
  79. team.
  80. 1. Run `opencode auth login`, select opencode, and head to [opencode.ai/auth](https://opencode.ai/auth).
  81. 2. Sign in, add your billing details, and copy your API key.
  82. 3. Paste your API key.
  83. ```bash
  84. $ opencode auth login
  85. ┌ Add credential
  86. │
  87. ◇ Select provider
  88. │ opencode
  89. │
  90. ● Create an api key at https://opencode.ai/auth
  91. │
  92. ◆ Enter your API key
  93. │ _
  94. └
  95. ```
  96. Alternatively, you can select one of the other providers. [Learn more](/docs/providers#directory).
  97. ---
  98. ## Initialize
  99. Now that you've configured a provider, you can navigate to a project that
  100. you want to work on.
  101. ```bash
  102. cd /path/to/project
  103. ```
  104. And run OpenCode.
  105. ```bash
  106. opencode
  107. ```
  108. Next, initialize OpenCode for the project by running the following command.
  109. ```bash frame="none"
  110. /init
  111. ```
  112. This will get OpenCode to analyze your project and create an `AGENTS.md` file in
  113. the project root.
  114. :::tip
  115. You should commit your project's `AGENTS.md` file to Git.
  116. :::
  117. This helps OpenCode understand the project structure and the coding patterns
  118. used.
  119. ---
  120. ## Usage
  121. You are now ready to use OpenCode to work on your project. Feel free to ask it
  122. anything!
  123. If you are new to using an AI coding agent, here are some examples that might
  124. help.
  125. ---
  126. ### Ask questions
  127. You can ask OpenCode to explain the codebase to you.
  128. :::tip
  129. Use the `@` key to fuzzy search for files in the project.
  130. :::
  131. ```txt frame="none" "@packages/functions/src/api/index.ts"
  132. How is authentication handled in @packages/functions/src/api/index.ts
  133. ```
  134. This is helpful if there's a part of the codebase that you didn't work on.
  135. ---
  136. ### Add features
  137. You can ask OpenCode to add new features to your project. Though we first recommend asking it to create a plan.
  138. 1. **Create a plan**
  139. OpenCode has a _Plan mode_ that disables its ability to make changes and
  140. instead suggest _how_ it'll implement the feature.
  141. Switch to it using the **Tab** key. You'll see an indicator for this in the lower right corner.
  142. ```bash frame="none" title="Switch to Plan mode"
  143. <TAB>
  144. ```
  145. Now let's describe what we want it to do.
  146. ```txt frame="none"
  147. When a user deletes a note, we'd like to flag it as deleted in the database.
  148. Then create a screen that shows all the recently deleted notes.
  149. From this screen, the user can undelete a note or permanently delete it.
  150. ```
  151. You want to give OpenCode enough details to understand what you want. It helps
  152. to talk to it like you are talking to a junior developer on your team.
  153. :::tip
  154. Give OpenCode plenty of context and examples to help it understand what you
  155. want.
  156. :::
  157. 2. **Iterate on the plan**
  158. Once it gives you a plan, you can give it feedback or add more details.
  159. ```txt frame="none"
  160. We'd like to design this new screen using a design I've used before.
  161. [Image #1] Take a look at this image and use it as a reference.
  162. ```
  163. :::tip
  164. Drag and drop images into the terminal to add them to the prompt.
  165. :::
  166. OpenCode can scan any images you give it and add them to the prompt. You can
  167. do this by dragging and dropping an image into the terminal.
  168. 3. **Build the feature**
  169. Once you feel comfortable with the plan, switch back to _Build mode_ by
  170. hitting the **Tab** key again.
  171. ```bash frame="none"
  172. <TAB>
  173. ```
  174. And asking it to make the changes.
  175. ```bash frame="none"
  176. Sounds good! Go ahead and make the changes.
  177. ```
  178. ---
  179. ### Make changes
  180. For more straightforward changes, you can ask OpenCode to directly build it
  181. without having to review the plan first.
  182. ```txt frame="none" "@packages/functions/src/settings.ts" "@packages/functions/src/notes.ts"
  183. We need to add authentication to the /settings route. Take a look at how this is
  184. handled in the /notes route in @packages/functions/src/notes.ts and implement
  185. the same logic in @packages/functions/src/settings.ts
  186. ```
  187. You want to make sure you provide a good amount of detail so OpenCode makes the right
  188. changes.
  189. ---
  190. ### Undo changes
  191. Let's say you ask OpenCode to make some changes.
  192. ```txt frame="none" "@packages/functions/src/api/index.ts"
  193. Can you refactor the function in @packages/functions/src/api/index.ts?
  194. ```
  195. But you realize that it is not what you wanted. You **can undo** the changes
  196. using the `/undo` command.
  197. ```bash frame="none"
  198. /undo
  199. ```
  200. OpenCode will now revert the changes you made and show your original message
  201. again.
  202. ```txt frame="none" "@packages/functions/src/api/index.ts"
  203. Can you refactor the function in @packages/functions/src/api/index.ts?
  204. ```
  205. From here you can tweak the prompt and ask OpenCode to try again.
  206. :::tip
  207. You can run `/undo` multiple times to undo multiple changes.
  208. :::
  209. Or you **can redo** the changes using the `/redo` command.
  210. ```bash frame="none"
  211. /redo
  212. ```
  213. ---
  214. ## Share
  215. The conversations that you have with OpenCode can be [shared with your
  216. team](/docs/share).
  217. ```bash frame="none"
  218. /share
  219. ```
  220. This will create a link to the current conversation and copy it to your clipboard.
  221. :::note
  222. Conversations are not shared by default.
  223. :::
  224. Here's an [example conversation](https://opencode.ai/s/4XP1fce5) with OpenCode.
  225. ---
  226. ## Customize
  227. And that's it! You are now a pro at using OpenCode.
  228. 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).