【AI编程助手】20分钟带你快速上手opencode
目录
6.5.2.3 本地ollama(受模型影响非常大，不推荐使用）
前言：如何快速使用AI工具帮你编写代码，今天你就能做到。本文最后还来个项目实战，包含前端、后端，以及前后端的联调使用。
一、🚀 引言
OpenCode 是一个开源的 AI 编程助手，主要运行在终端里。你可以把它想象成一位“懂代码的同事”，你直接在命令行里跟它对话，让它帮你写代码、找 Bug、解释项目，甚至直接执行命令来重构整个项目。
二、💡 核心特点
| 特点维度 | 具体说明 |
|---|---|
| 开源免费 | 采用 MIT 开源协议，代码完全公开，你可以自由使用、修改甚至二次开发。 |
| 模型自由 | 不绑定任何一家 AI 公司。你可以接入 OpenAI (GPT-4o)、Anthropic (Claude)、Google (Gemini)，甚至本地部署的模型。 |
| 终端原生 | 提供交互式的终端界面 (TUI)，让你无需离开命令行就能完成复杂的编码任务，非常适合习惯命令行的开发者。 |
| 高度扩展 | 支持 MCP (模型上下文协议) 和自定义 Agent，可以按需扩展工具能力，比如连接数据库或调用外部 API。 |
三、🛠️它能做什么
-
理解与搜索：你问“这个
auth.ts文件是干嘛的？”，它会读取文件并给出解释。 -
编写与修改代码：直接说“给 Express 项目加个用户注册接口”，它会自动生成路由、控制器等文件。
-
修复 Bug：把报错信息贴给它，它能帮你定位错误并给出修复方案。
-
执行命令与重构：它不仅能写代码，还能执行 Shell 命令（如
npm install），或帮你把整个项目代码风格统一重构
四、🔗 它是怎么工作的
OpenCode 本身不带模型，它是一个“代理”或“客户端”。它的工作流程是：
-
连接模型：你需要配置 OpenAI、Claude 等模型的 API Key（或使用阿里云百炼等服务）。
-
加载上下文：你进入项目目录启动它（
opencode），它会自动扫描你的代码结构，建立索引。 -
执行任务：你下达指令（如“修复登录页面的样式”），OpenCode 会将任务拆解，调用相应的工具（查看文件、编辑代码、执行命令），最终完成任务。
五、⚙️ 安装
5.1 下载地址
5.2 终端安装
官方提供了很多安装方式，我这边试用试用npm命令方式，通过 npm 安装 opencode-ai 的前提是你已经安装了 Node.js (版本 18 以上)，我使用的是24LTS的版本，安装好node.js之后，使用管理员命令打开cmd，执行
npm i -g opencode-ai5.3 安装验证
命令行输入opencode
即可弹出这个界面
5.4 IDE插件集成（不使用vscode忽略本章节）
搜索opencode安装，安装完成之后，点击下图箭头位置
开始工作
5.5 配置文件（了解）
六、🛠️快速上手
6.1 创建一个新项目
找一个项目代码目录创建一个项目文件。例如使用D: 切换到D盘，cd进入到对应目录
进入到项目目录之后输入opencode
6.2 命令概览
https://opencode.ai/docs/tui#commands
6.3 基本操作
| 操作 | 方式 |
|---|---|
| 引用文件 | @文件名 |
| 执行 Shell 命令 | !命令 |
| 切换计划/构建模式 plan/build | Tab 键 |
| 快捷键前缀 | Ctrl+x |
6.3.1 编辑模式 plan/build
📋 Plan 模式（计划模式）
-
作用：AI 只会生成执行计划，而不会真正执行任何操作（不修改文件、不运行命令）。
-
适用场景：
-
你想先预览 AI 会做什么，避免意外修改。
-
复杂任务需要分步确认，确保方案正确。
-
学习或调试，看 AI 如何拆解问题。
-
-
表现：
-
AI 会输出详细的步骤列表。
-
不会实际创建/编辑文件，也不会执行 Shell 命令。
-
你可以审查计划，如果需要调整，可以直接提出修改意见。
-
🏗️ Build 模式（构建模式）
-
作用：AI 会实际执行任务，包括修改文件、运行命令、安装依赖等。
-
适用场景：
-
你信任当前计划，希望立即执行。
-
快速实现功能、修复 Bug、重构代码。
-
-
表现：
-
AI 会按计划直接操作文件系统，执行终端命令。
-
执行过程中可能会询问你确认某些敏感操作（如删除文件）。
-
执行完成后，你可以直接看到代码变更或运行结果。
-
💡 使用建议
-
先用 Plan 模式：对不熟悉的任务或大规模修改，先让 AI 生成计划，确认无误后再切换为 Build 模式执行。
-
直接 Build 模式：对于简单、明确的任务（如“修复 typo”），可以直接在 Build 模式下进行。
-
即使处于 Build 模式，AI 在执行关键操作前（如删除文件、修改多处）通常也会请求确认，确保安全。
6.4 内部命令
常用的已经标红，后面章节会重点介绍重点命令
| 命令 | 描述 | 备注 |
|---|---|---|
/help |
显示帮助对话框 | - |
/init |
创建或更新 AGENTS.md 文件 | 默认有可能英文，可以要求它使用简体中文重新生成一下 |
/undo |
撤销上一条消息及文件更改 | - |
/redo |
重做已撤销的消息 | - |
/share |
分享当前会话 | - |
/unshare |
取消分享当前会话 | - |
/connect |
添加 LLM 提供商 | - |
/models |
列出可用模型 | - |
/new |
开始新会话 | /clear |
/sessions |
列出并切换会话 | /resume, /continue |
/compact |
压缩当前会话 | /summarize |
/details |
切换工具执行详情显示 | - |
/editor |
打开外部编辑器编写消息 | - |
/export |
导出会话为 Markdown | - |
/themes |
列出可用主题 | - |
/thinking |
切换思考/推理块的可见性 | - |
| /exit |
退出 OpenCode |
/quit, /q |
6.5 供应商/模型(connect/models)
6.5.1 直接使用提供的厂商
输入前缀 / 选择connect
就能查看所有的供应商了
6.5.2 自定义供应商
6.5.2.1 通用配置
6.5.2.2 注意部分特殊厂商配置
6.5.2.3 本地ollama(受模型影响非常大，不推荐使用）
方式一：从配置文件加载
本地模型没有apikey
方式二：直接在命令行配置(相当于自动修改配置文件)
6.5.3 切换模型
输入/ 前缀 选择models
点进去就可以选择某厂商下的模型了
6.6 开发规范（init）
你可以定义，也可以在你现有项目当中，使用这个命令，让他分析帮你生成该项目规范。
6.6.1 基本用法
在 OpenCode 的对话窗口中直接输入：
/initOpenCode 会：
-
扫描当前工作目录，自动识别已有的配置（如
.cursorrules、package.json等）。 -
生成一个
AGENTS.md模板，包含：-
构建/测试命令
-
代码风格指南
-
项目特定说明
-
-
将文件保存到当前工作目录（即你启动
opencode时所在的文件夹）。
6.6.2 带参数使用
你可以在 /init 后添加描述，让 OpenCode 生成更贴合项目实际的内容。例如：
/init 这是一个 React + TypeScript 项目，使用 Vite 构建，状态管理用 Zustand，测试用 VitestOpenCode 会根据你的描述，在 AGENTS.md 中填充对应的技术栈、命令和规范。
6.6.3 常用选项
| 参数 | 说明 |
|---|---|
/init |
基础生成，自动识别项目 |
/init --force |
强制覆盖已有的 AGENTS.md 文件 |
/init --write |
直接写入文件，不进入交互确认 |
/init 描述内容 |
用自然语言描述项目，生成定制化内容 |
6.6.4 注意事项
-
文件位置：
AGENTS.md会保存在 当前工作目录。-
启动
opencode前，请确保已cd到项目根目录。 -
如果不确定，可以在 OpenCode 中执行
!pwd查看。
-
-
已有文件的处理：如果项目根目录已经存在
AGENTS.md，/init会尝试 改进或合并 现有内容，而不是直接覆盖。-
如果想完全覆盖，请使用
/init --force。
-
-
自定义内容：生成后，你可以手动编辑
AGENTS.md，添加更多项目细节（如环境变量、特殊架构等）。AI 助手会自动读取最新内容。 -
与 Cursor/Copilot 规则集成：
-
如果项目中有
.cursor/rules/、.cursorrules或.github/copilot-instructions.md，/init会尝试提取其中的规范，融入AGENTS.md。
-
6.6.5 为什么需要 AGENTS.md？
-
提高 AI 生成代码的准确性：AI 知道你的测试命令、命名风格、错误处理模式后，会生成更一致的代码。
-
减少重复说明：你不需要每次对话都强调“用 2 空格缩进”、“测试用 Vitest”。
-
团队协作：所有使用 OpenCode 的开发者都能共享统一的项目规范。
6.7 基本编辑（undo-redo）
/undo 一键回退到修改前的状态，如果反悔了，再使用/redo恢复
6.8 会话管理(session)
6.8.1 /sessions 调用会话
delete 你可以删除会话
rename 你可以重命名会话
6.8.2 /new 开启新会话
略
6.9 skills调用
3.9.1 skills简介
Skills 最早诞生于 Anthropic 的 Claude Code 生态中。后来，Anthropic 将 Skills 作为一个独立的开放标准发布，这意味着任何人都可以基于这个规范实现自己的 Skills 系统。标准发布后，迅速被主流 AI 编程工具广泛采用。
包括 OpenCode。
OpenCode 最初采用单数形式 skill 作为技能目录名称。后来演进为 skills，同时兼容 skill
简单来说，一个 Skill 就是一份特殊的 Markdown 文件（必须叫 SKILL.md），里面用固定的格式告诉 AI 该如何完成某个特定任务。比如：
-
执行项目代码检查
-
生成符合标准的文档
-
编写特定类型的测试用例
3.9.2 OpenCode规则
OpenCode 会在多个地方自动搜索 Skill：
-
项目专用：
.opencode/skills/<技能名称>/SKILL.md -
全局共享：
~/.config/opencode/skills/<技能名称>/SKILL.md -
兼容 Claude：也支持
.claude/skills/和.agents/skills/路径
只要配置了skills一般会自动引用，也可以主动出击，/skills 然后选择你配置的skill
6.10 MCP
6.10.1 mcp简介
MCP (Model Context Protocol, 模型上下文协议) 是 Anthropic 公司在 2024 年底开源的一项开放标准协议。可以把它理解成：AI 世界的“USB-C接口”。
6.10.2 应用案例
- 修改 OpenCode 的配置文件，添加高德 MCP 服务
- 备注：高德的服务需要 API Key，申请入口：https://console.amap.com/dev/key/app
-
进入 OpenCode，查看
/mcp，确认加入的 MCP 处于 enable 状态 -
测试 MCP 的天气效果：北京到上海多远？
七、🕹️ 小试牛刀-打造1024小游戏
7.1 创建项目目录
这里我创建了一个1024目录
7.2 创建项目说明
在1024目录下新增一个rules.md文件，内容如下
## 🎮 游戏规则
游戏在一个4x4或5x5的网格上进行。你需要通过方向键或滑动屏幕，控制所有数字方块向同一方向移动。
- 核心玩法：每次移动时，相邻且数字相同的方块会合并成一个新方块，其数字是两者之和（例如2和2合并成4，4和4合并成8）。
- 随机生成：每次移动并合并后，会在空白的格子处随机生成一个新的数字（通常是1或2或4）。
- 获胜目标：游戏的最终目标就是通过不断合并，在网格中“拼”出一个数字为“1024”的方块。7.3 生成代码
在1024目录打开opencode，使用buid模式输入
1024小程序开发，具体请参考项目目录中的 rules.md 项目说明，生成一个基于 html+css+js 的前端页面
查看目录
打开页面
7.4 优化代码
请给这个页面加个主题选择按钮，用户可以选择不同的主题。决定这个游戏页面的颜色样式风格
八、🎴 项目实战
使用opencode全栈式生成一个博客系统，这个过程当中一般是遇到问题，解决问题的方式实现。
8.1 后端开发
创建项目目录，启动opencode
8.1.1 基本框架
下面X部分自己替换
创建一个backend目录，在该目录下为我生成一个javaweb项目，基于springboot构建，集成mysql（版本：8.0.30，服务器：192.168.X.X:3306，数据库名：opencodedemo，用户名是root密码是XXX）、mybatis-plus、lombok，请注意maven坐标与中间件版本的适配，接口请集成swagger来管理。
生成完毕，使用idea打开
pom.xml 有错误，让opencode去修复。
8.1.2 数据库建模
在项目根目录下生成一个sql脚本，该脚本包含了一个博客及点评模块的所有业务表：用户表（用户名、密码、头像、个人简介等），博客表（标题、内容、发布人、发布时间等），博客分类表，博客评论表（对应的博客，评论人、评论时间），收藏表（记录用户收藏的博客），点赞表（记录用户点赞的博客）。并包含大概100条测试数据，数据用模拟的，数据库字段类型尽量设计合理
blog.sql按理应该生成在backend目录下
我发现他生成没有建库脚本，我又让他重新生成建库脚本补充上了
使用mysql客户端工具执行脚本
8.1.3 生成后端代码
根据以上sql文件中生成的表，在项目中创建对应的mybatis、service、controller接口等程序，以备将来前端页面调用。主要业务如下：用户（注册、登录、发布博客、点赞、评论、收藏博客、修改密码、修改头像），其他博客表、分类表、点赞评论收藏等表的业务都需要适配用户相关业务，请合理生成，尽量全面，如有不确定的地方可以跟我交互共创，涉及到文件上传的，请使用springboot将文件存储到后端服务器的目录上并使用backend的url地址访问 
- API文档: http://localhost:8080/doc.html
- 上传文件: http://localhost:8080/upload/**8.1.4 启动后端服务
8.1.5 解决swagger需要登录问题
输入
http://localhost:8080/doc.html提示
需要解决的问题：1、需要从拦截器排除；2、需要移除默认的Spring Security模块
1、当前项目中的Swagger是需要登录的，被拦截了，请配置它无需登录即可访问；2、请检查并全部移除Spring Security的内容，确保项目编译通过
打开网站
http://localhost:8080/doc.html
8.2 前端开发
8.2.1 启用skills
将skills包解压存放在用户下图目录，
链接: https://pan.baidu.com/s/1Gx98jyhVRxR82iJKPvki6A 提取码：需要关注，评论回复skills包
存放之后，记得重新启动opencode
/skills 选择frontend-design
8.2.2 生成前端页面
在frontend目录下，生成博客网站的h5前端页面，使用响应式设计，接口使用本项目里backend后端项目提供的接口. 尽量时尚简约，需要包含以下功能: 首页 (请自主设计布局和板块，可以分最新博客、各种排行榜等) ，分类导航页，博客详情页 (可以对博客点赞、评论、收藏、并展示各项的统计数) ，个人中心页(修改密码、修改头像、发布博客、查看我的评论、查看我的收藏、评论、点赞) 。如果有其他需要的页面，请酌情添加，有不确定的地方，请跟我交互共创
8.2.3 联调
打开前端的两种方式，上图已经说明。
我使用D:\opencode\blog\frontend 地址打开cmd命令，然后输入(我本地有python环境)
python -m http.server 3000
调试的宗旨就是：哪里出问题，解决哪里问题
需要源码：链接: https://pan.baidu.com/s/1e8jSGsUox6qmxzZI_uyJtg 提取码: 关注，评论
这个数据库这的XXX 拿到源码自己改哦！
展示最后页面
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)