AI Share Demo

一个用于技术分享的 TypeScript 演示项目，主题是：

• 什么是 MCP
• 什么是 OpenClaw Skills
• 如何把可见浏览器抓取、结构化数据、SQLite 持久化和前端展示串成一条链路

当前已完成

• 项目骨架与 monorepo 基础配置
• 共享玩具商品数据模型
• SQLite 持久化能力
• 商品列表 / 详情 / 统计 API
• 基于可见浏览器的京东玩具热销抓取主链路
• OpenClaw Skill 文档、字段映射与输出模板
• 基于 Vue 3 + Vite + TypeScript + Vue Router + Pinia + Element Plus 的后台前端
• 分享设计文档、实施计划和演讲材料

目录结构

apps/
  frontend/
  mcp-server/
packages/
  shared/
skills/
  jd-toy-collector/
docs/
  plans/
  share/
data/
  sqlite/
  samples/

关键文件

• 设计文档：docs/plans/2026-03-29-ai-share-design.md
• 浏览器 Skill 设计：docs/plans/2026-03-30-jd-browser-skill-design.md
• 浏览器 Skill 实施计划：docs/plans/2026-03-30-jd-browser-skill-implementation.md
• 分享大纲：docs/share/outline.md
• 理论说明：docs/share/theory-notes.md
• MCP 教程：docs/share/tutorial-mcp.md
• Skill 教程：docs/share/tutorial-skill.md
• Demo 讲稿：docs/share/demo-script.md
• 真实抓取演示手册：docs/share/live-scrape-runbook.md
• 共享模型：packages/shared/src/index.ts
• MCP 服务：apps/mcp-server/src/index.ts
• 浏览器抓取：apps/mcp-server/src/integrations/jd/crawl-jd-toys-browser.ts
• 浏览器字段提取：apps/mcp-server/src/integrations/jd/extract-jd-toy-products-from-browser.ts
• 人工接管模块：apps/mcp-server/src/integrations/jd/browser-manual-gate.ts
• 前端入口：apps/frontend/src/main.ts
• Skill 文档：skills/jd-toy-collector/SKILL.md

前端技术栈

当前前端已切换为：

• Vue 3
• Vite
• TypeScript
• Vue Router
• Pinia
• Element Plus

推荐启动顺序

1. 运行测试

npm run test --workspace @ai-share/mcp-server
npm run test:shared

2. 启动 MCP API

npm run dev --workspace @ai-share/mcp-server

默认地址：http://127.0.0.1:3210

3. 启动可见浏览器抓取

npm run crawl:jd --workspace @ai-share/mcp-server -- --db-path D:/code/go/xp/data/sqlite/ai-share.sqlite --limit 5 --manual-timeout-minutes 15

说明：

• 会真实打开 Chrome
• 优先尝试玩具榜单
• 失败时自动退到玩具热销搜索路径
• 如果出现登录或验证码，允许你手动处理后继续
• 终端会持续输出当前页面与人工接管等待日志

4. 启动前端

npm run dev --workspace @ai-share/frontend

5. 查看入库结果

Invoke-RestMethod http://127.0.0.1:3210/api/stats
Invoke-RestMethod "http://127.0.0.1:3210/api/products?limit=10"

分享时建议打开的文档

• docs/share/outline.md
• docs/share/theory-notes.md
• docs/share/tutorial-mcp.md
• docs/share/tutorial-skill.md
• docs/share/demo-script.md
• docs/share/live-scrape-runbook.md

当前数据库文件

• 主数据库：data/sqlite/ai-share.sqlite
• 样例数据：data/samples/jd-toy-sample.json

当前风险说明

• 京东真实页面仍可能触发登录、验证码或风控，需要人工接管。
• 浏览器抓取链路已经切到真实页面驱动，但最终成功率仍依赖你是否能在浏览器中完成验证。
• 当前前端仍存在 Vite 大 chunk 警告，但不影响分享主链路。

明天分享的推荐顺序

1. 启动 MCP API，保留日志窗口

2. 运行可见浏览器抓取命令

3. 如果京东要求登录或验证，就在浏览器中手动处理

4. 等抓取完成后，回到 API 和前端查看总览、列表、详情

5. 结合 Skill 文档解释“浏览器流程 + MCP 持久化 + 前端展示”

6. 介绍什么是MCP，什么是skills，给出标准理论解释，再对应给出生活中容易理解的例子

7. 给出实现MCP和skill的详细教程，要精确到每一个步骤，同时这一步也需要精简

8. 实现一个mcp，具体是经常重复的把固定格式的数据保存到sqlite数据库，数据格式由于下面的第4步决定

9. 实现一个适合openclaw的skills，控制浏览器，到京东商城https://www.jd.com/抓取数据，抓取玩具分类下面抓取到最受欢迎的玩具产品，记录产品的基础信息，包括图片、产品链接、价格、品论分析等数据，然后调用第3步实现的mcp服务持久化存储数据，

10. 最后实现一个美观的前端项目，将来第4步存储的数据做一个前端展示，包括列表、详情、统计分析等展示维度

11. 最后所有任务的简要操作给出readme文档，方便后续我工作

使用 jd-toy-collector，抓取京东玩具热销前5个并入库