智能体应用入门 讲师 · Cliff
Intelligent Agent Basics

智能体协作
与应用入门

这节课不从概念开始，而是用干活 AI 跑通一个连接 OpenLLM 的小原型，再把协作方法迁移到真实工作。

TeacherCliff
DeliverableVue 3 LLM 任务台 + 4 张任务卡
Method任务、接口、反馈、验收
Course Line
  1. 01
    认识工作台看懂干活 AI、Agent、模型、文件区和浏览器分别负责什么。
  2. 02
    接入 OpenLLM配置 API Key、Base URL 和 Model，先跑通 /v1/chat/completions。
  3. 03
    练四个短任务策划、合同草稿、读网页、热点总结，都用同一套任务格式。
  4. 04
    完成主项目做一个 OpenLLM 任务台：能输入任务、调用模型、显示结果、保存历史。
00 · 课程目录 先看懂，再动手

今天不是听懂 Agent，而是做出一个能跑的 OpenLLM 任务台。

参考 Easy-Vibe 的零基础路线：先把原型跑起来，再接真实 API，最后补反馈、错误处理和保存历史。

智能体协作逻辑图
Workflow 人给目标和材料，干活 AI 组织模型、工具、文件和浏览器，最后交付可验收结果。
01 · 课程定位 从工具演示变成工作协作

第一课只讲清一件事：怎样和智能体协作完成工作。

01 · Human

人定义任务

把一句模糊需求说清楚：目标是什么，给哪些材料，哪些边界不能越过，最后用什么形式交付。

02 · Agent

智能体执行

读取网页、文件或截图，调用工具，产出策划、合同草稿、摘要、热点卡或页面内容。

03 · Verify

人验收结果

看来源、看边界、看是否可执行；网页任务还要用浏览器打开，截图才算证据。

标题里的“协作”，不是让 AI 自由发挥，而是让每一步都有任务、材料、边界和证据。
02 · 干活 AI 工作台 它不是普通聊天窗口

干活 AI 的工作台，有三个固定区域。

干活 AI 工作台结构图
03 · 智能体基础 会使用工具的执行者

智能体不是陪聊，而是按目标推进任务。

智能体协作闭环流程图
04 · 任务怎么交代 先当负责人，再让智能体执行

主项目先固定框架，别让智能体自由选型。

StackVue 3 + Vite + JavaScript + 纯 CSS，不上 UI 库。
Components配置区、任务区、结果区、历史区，四块拆清楚。
Client单独写 llmClient.js，所有 OpenLLM 请求都从这里走。
Storage只用 localStorage 保存最近 5 条结果，不保存 API Key。
Copy Prompt 00先锁定项目架构
请按下面架构帮我检查/搭建项目，不要自由换技术栈：
技术栈：Vue 3 + Vite + JavaScript + 纯 CSS。
目标：做一个连接 OpenLLM 的 LLM 智能体任务台。
目录建议：
src/App.vue
src/components/ModelConfig.vue
src/components/TaskEditor.vue
src/components/ResultPanel.vue
src/components/HistoryList.vue
src/lib/llmClient.js
src/lib/storage.js
src/lib/taskPrompts.js
限制：不做登录，不做数据库，不接后端，不保存 API Key。
API：固定使用 OpenLLM，Base URL 为 https://openllmapi.com/v1，请求路径为 /chat/completions。
请先复述你理解的目录和每个文件职责，不要直接写代码。
05 · OpenLLM 模型接入 模型是智能体的大脑

接入 OpenLLM 只为一件事：让 Vue 原型能真实调用模型。

Provider

固定 OpenLLM

它是统一 API 网关，课堂里统一用 OpenAI-compatible 请求格式。

API Key

只在本地输入

学生自己填，不写进代码，不提交，不保存到 localStorage。

Base URL

统一拼接口

Base URL 固定为 https://openllmapi.com/v1，llmClient.js 拼 /chat/completions。

Model

先 smoke test

先选一个能回复的文本模型，再进入策划、合同、网页和热点任务。

脱敏示例
Provider: OpenLLM
Base URL: https://openllmapi.com/v1
Endpoint: /chat/completions
Model: 课堂可用模型名
API Key: sk-****
不展示真实 Key。模型不通时，先修 llmClient.js 和配置，不要让页面继续假装成功。
06 · 模型可用性验收 先 smoke test，再做任务

模型接好后，用四个小动作验收智能体是否可协作。

01能回答问一句“你现在能做什么”，确认能稳定返回。
02能读材料给一段短文本，让它提取事实和待确认点。
03能按格式让它输出应用卡、表格或清单，不要散文。
04能复盘让它说清改了什么、依据是什么、如何验收。
Smoke Test Prompt开课前 3 分钟
请通过 OpenLLM 网关做一次 smoke test：
Base URL: https://openllmapi.com/v1
Endpoint: /chat/completions
请用 3 句话说明你当前能帮助我完成哪些工作。
然后按表格输出：策划、合同草稿、读网页、热点总结、综合作品，分别需要我提供什么材料。
不要编造我没有提供的信息。
  • 没回复检查 API Key、Base URL、余额和网络。
  • 乱编加一句“未知就写待确认”。
  • 不按格式要求重新按表格输出，不扩写。
07 · 短任务一 把想法变成方案

应用一：让智能体把模糊想法变成可执行策划。

示例任务

输入我想做一个周末体验活动。
输出目标人群、核心信息、行动步骤、素材清单。
验收看到策划后，能立刻知道下一步做什么。
风险不要只要漂亮口号，要能执行的清单。
任务策划看板示意图
Planning board · 模糊想法变成可执行结构
08 · 策划提示词 输出必须能落地

策划提示词要让智能体给步骤，不给空话。

Copy Prompt 01策划卡
你是一个活动策划智能体。
我要做一个【周末体验活动】。
目标用户：附近想找周末去处的人。
希望用户完成：看完后愿意预约或到店。
请输出：
1. 活动目标
2. 目标用户和核心信息
3. 需要补充的素材
4. 执行步骤
5. 不确定信息
限制：不要写空泛词，必须能直接变成任务清单。
检查动作

方案能不能做，看三件事。

  • 1目标用户和活动目标是否明确。
  • 2有没有列出还缺的时间、地点、价格等材料。
  • 3有没有下一步制作步骤，不只是形容词。
这张策划卡后面会成为任务台的测试模板，证明你不是只接了一个空接口。
09 · 短任务二 草稿可以给 AI，责任不能甩给 AI

应用二：让智能体起草边界清楚的合作协议草稿。

不合格用法

帮我写一份合同，越正式越好。
问题：没有交易场景、金额、交付物、修改次数和风险提示，容易变成套话。

合格用法

场景、费用、交付物、期限、修改次数、验收方式都给清楚。
注意：这只是草稿整理，不是法律意见；正式使用前要人工确认。
10 · 合同提示词 先结构化，再人工确认

合同提示词必须写明“不提供法律意见”。

Copy Prompt 02合同草稿
你是合同草稿整理助手，不提供法律意见。
场景：请同学为活动页设计 3 张宣传图。
费用：300 元。
期限：3 天交付。
修改：最多 2 次。
请起草合作协议草稿，包含：工作内容、交付物、时间、费用、修改次数、验收、延期或取消。
最后必须提醒：正式使用前需要人工确认。
验收重点

合同草稿不是越长越好。

  • 1条款有没有覆盖交付物、时间、费用和验收。
  • 2风险是否标出，而不是假装已经合法。
  • 3有没有提醒人工确认和必要时咨询专业人士。
第一课只练“把边界写清楚”，不教法律判断。
11 · 短任务三 阅读网页不能无来源总结

应用三：让智能体把网页拆成来源、事实和观点。

Web Reading

网页不是读完就算

读网页的关键不是“总结一下”，而是让智能体标出来源、确定事实、观点立场、宣传表达和待核实信息。

项目要看什么可用判断
来源网址、标题、发布时间或页面位置。以后能回到原页面复查。
事实页面明确给出的数字、事件、功能。不要把观点写成事实。
观点作者判断、宣传语、立场表达。标注“这是观点”。
待核实缺少来源、过时、夸张或无法确认的说法。进入下一轮搜索或人工确认。
12 · 读网页提示词 来源先行

读网页提示词要强制区分事实、观点和待核实。

Copy Prompt 03网页摘要
请阅读下面网页内容或链接。
请分成 6 部分输出：
1. 来源和时间
2. 确定事实
3. 观点立场
4. 宣传表达
5. 可引用内容
6. 待核实信息
要求：不要把观点写成事实；不确定就写“待核实”。
内容或链接：___
检查动作

摘要能不能用，看有没有证据感。

  • 1每个结论能不能回到网页找到依据。
  • 2有没有把营销话术误当成事实。
  • 3有没有列出下一步要核实的信息。
这张网页摘要卡以后可以用于选题、竞品、资料整理和内容写作。
13 · 短任务四 热点不是复制热闹

应用四：让智能体把热点拆成事实、观点、推测和行动角度。

Fact

发生了什么

只写已发生、可核实的信息。没有来源就写待确认。

例：某工具发布新功能，而不是“行业被颠覆”。
View

大家怎么看

把支持、质疑、观望的观点分开，不混成一个结论。

观点可以引用，但不要当成事实。
Action

我能做什么

把热点变成行动角度、产品改进或下一步调研。

第一课要能落到可执行动作。
14 · 热点提示词 先分组，再判断

热点提示词要输出“可行动角度”。

Copy Prompt 04热点总结卡
请围绕【AI 编程工具进入日常学习】做热点总结卡：
1. 热点是什么
2. 已发生事实
3. 不同观点
4. 需要验证的说法
5. 可行动角度
6. 下一步任务
要求：明确区分事实、观点、推测；不要写无法验证的绝对结论。
验收方式

能不能用，取决于能否进入下一步。

  • 1事实和观点有没有分栏。
  • 2待验证说法有没有保留。
  • 3能不能变成下一步任务。
热点卡的价值是帮你找到“下一步做什么”，不是显得自己看了很多新闻。
15 · 同一个协作闭环 四个任务练的是同一件事

四类智能体应用，背后都是同一套协作动作。

Step 1给目标

这次要完成什么，不要把多个工作混成一句话。

Step 2给材料

链接、文件、截图、背景、数字和限制条件。

Step 3要格式

应用卡、表格、清单、摘要，不要散文式回答。

Step 4做验收

看来源、边界、文件、页面、下一步是否清楚。

智能体协作不是把脑子交出去，而是把执行过程变得可检查。 你负责目标和判断，智能体负责整理、起草、读取、修改，证据负责说话。
16 · 主任务 把成果放进网页

综合作品：做一个能连接 LLM 的智能体任务台。

Project 0

LLM 智能体任务台

它不是完整 SaaS，也不是复杂后端。它是一个零基础能讲明白的 AI 原型：填模型配置，输入任务，调用 LLM，显示结果，保存历史。

真实 API 可调用 失败有反馈 历史能保存
llm-task-console-demo.html 打开 Demo
LLM 智能体任务台效果示意 Live demo · 先看终点打开 Demo ↗
17 · 项目怎么演示 先看终点，再回到起点

演示不是讲代码，而是讲一个原型怎样从空壳变成可运行。

LLM 智能体任务台效果示意 Live demo · 先点击看终点打开 Demo ↗
01先看终点。点击 Demo，让大家看到配置模型、输入任务、生成结果。
02再说起点。空模板只有输入框，没有 API 调用、Loading、错误提示和历史。
03回到干活 AI。先让 Agent 读懂页面和接口目标，不急着写大功能。
04小步修改。先接通模型，再补反馈，再保存历史。
05浏览器验收。真实返回、失败提示、历史保留，三项都看到才算完成。
18 · 综合作品第一步 先读模板，不急着改

开始写代码前，先让智能体读懂 LLM 任务台模板。

Copy Prompt 05只读模板
请先阅读当前 Vue + Vite 项目，不要修改代码。
重点查看：
1. package.json
2. src/App.vue
3. src/components/
4. src/lib/
不要直接修改。
先用 5 句话告诉我：
1. 这个项目入口在哪里
2. 当前有哪些组件
3. 哪个文件负责请求 LLM
4. 哪个文件负责保存历史
5. 你建议本轮只改哪些文件，以及如何验证
继续条件

说不清模板结构，就不能进入修改。

  • 1能说出 Vite 入口、App.vue 和组件目录。
  • 2能说出 ModelConfig、TaskEditor、ResultPanel、HistoryList 的职责。
  • 3能说明本轮只做前端原型，不新增登录、数据库或复杂后端。
综合作品也遵守同一条规则：先理解，再执行。
19 · 综合作品第二步 只做一个小改动

第二步让页面真正调用 OpenLLM，并补上反馈和历史。

Copy Prompt 06保留结构，小步修改
这轮只做一个综合作品：把 Vue 页面改成「OpenLLM 智能体任务台」。
请保留现有项目结构，不要重写整个项目。
页面至少包含：
1. Base URL、API Key、Model 输入区
2. 任务类型和任务内容输入区
3. 生成按钮的 Loading 状态
4. 成功结果展示区
5. 失败错误提示
6. localStorage 保存最近 5 条历史
建议文件：
src/components/ModelConfig.vue
src/components/TaskEditor.vue
src/components/ResultPanel.vue
src/components/HistoryList.vue
src/lib/llmClient.js
src/lib/storage.js
src/lib/taskPrompts.js
接口要求：
Base URL 固定为 https://openllmapi.com/v1
请求路径固定为 /chat/completions
Header 使用 Authorization: Bearer 用户输入的 API Key
不要把 API Key 写死在代码里
改完后请告诉我修改了哪些文件，以及如何打开页面检查。
输出检查

它必须交代“改了什么”和“怎么验收”。

  • A修改文件集中在 Vue 组件和 src/lib，不新增无关目录。
  • B能用真实模型返回内容，不能只写死结果。
  • C请求中失败要显示错误，不白屏。
  • D刷新后最近历史还在，以浏览器为准。
主项目不是炫技，是把“AI 能力接进原型”这件事跑通。
20 · 智能体输出后 先看三件事

智能体输出后先检查 Vue 文件、请求边界和验收方式。

01文件App.vue 组织页面，组件负责展示，src/lib 负责请求和存储。
02范围只做 Vue 前端连接台。新增登录、数据库或新框架就暂停。
03证据模型能返回、失败能提示、历史能保存，才算不是静态壳子。
04验收没有验证方式，就让 AI 补充，不宣布完成。
硬标准：智能体必须说清改了哪些 Vue 文件、请求怎么发、失败怎么显示、刷新后历史怎么验证。
21 · 浏览器验证 打开才算完成

能调用、能失败、能保存，才算 LLM 任务台完成。

浏览器打开后的 LLM 智能体任务台
Browser proof · 看到页面主体才算验收
  • 1地址能打开，没有白屏或 404。
  • 2填入测试模型后，点击生成能看到真实返回。
  • 3断网、Key 错或余额不足时，页面显示可读错误。
  • 4刷新页面后，最近历史仍然保留。
  • 5截图里能看出这是一个可操作的 AI 原型。
22 · 证据驱动二改 比“美化一下”可靠

第二轮优化从截图和应用卡开始。

Step 1截图

截完整浏览器页面，最好包含地址和首屏主体。

Step 2指出问题

是请求失败、没有 Loading、错误太难懂，还是历史没保存。

Step 3限制范围

不换技术栈，不新增页面，不重写项目。

Step 4再次验证

打开浏览器，对比前后截图和应用卡。

把截图和应用卡发给智能体，本质上是在给它验收证据。 一句“帮我美化一下”没有证据，智能体只能自由发挥。
23 · 修复和纠偏 先判断原因，再最小修改

报错、跑偏和坏结果，都用证据拉回小任务。

Copy Prompt 07最小修复
这是当前页面截图、智能体回复和终端信息。
请先判断问题原因，再给出最小修改方案。
限制：
1. 不要换技术栈
2. 不要重建项目
3. 不要一次改多个无关区域
4. 不要删除已经跑通的模型配置、请求客户端和历史保存
修改后必须说明如何验证。
纠偏句

看到跑偏，直接收窄范围。

  • 1这轮只保留刚才的小任务。
  • 2撤回无关改动，不新增功能。
  • 3不改 Vue + Vite 目录结构，不换技术栈。
  • 4重新给出最小修改和验证方式。
纠偏不是否定智能体，而是重新定义本轮任务边界。
24 · 提交质量 让别人能复现

合格提交要包含结果，也要包含协作过程证据。

低水平提交

我做完了。
问题：没人知道模型有没有接通、怎么复现、失败时会不会崩，也没法复盘。

合格提交

LLM 任务台截图 1 张
一次成功返回截图
一次失败提示截图
修改文件和验证方式
一句协作复盘
价值：别人能复现，自己以后能复盘，下一轮也知道从哪里改。
25 · 最终提交卡 下课前 10 分钟

最终提交卡把一次练习变成可复盘资产。

最终提交截图示意
主项目LLM 任务台截图 1 张，能看到配置区、任务区、结果区和历史区。
成功证据至少一次真实模型返回，或课堂统一测试模型返回。
失败证据故意填错 Key 或断网，页面能显示错误，不白屏。
保存证据刷新浏览器后，最近历史还在。
下一轮我下一轮只改：___，不新增登录、数据库或多页面。
26 · 复盘句式 把协作说出来

用一句复盘记住智能体协作闭环。

Done

我今天用干活 AI 完成了一个能连接 LLM 的任务台，并用四个短任务测试它。

Verify

智能体帮我整理和生成结果，我用来源、边界、浏览器和截图验收。

Next

下一轮我想给这个原型补真实业务数据、更多任务模板和更稳定的部署方式。

第一课的及格线：能独立接通一个模型，并用浏览器证明它能工作。
27 · 下一课连接 同一闭环，换一个作品

下一课把这个 LLM 任务台升级成真实工具项目。

0→1

项目 1 开始，在这个“能调用模型”的底座上，继续做 AI 封面、海报、二维码工具站：从任务台升级为可分享的产品原型。

下一课训练路线图
Next module · 同一闭环，换一个作品