第28期 | MCP与AI Agent：前端自动化的未来

第28期 | MCP与AI Agent前端自动化的未来 今天你将学会理解 MCPModel Context Protocol是什么为什么它对前端开发者很重要了解 AI Agent 工具链的工作原理搭建一个你的 AI 开发 Agent——让 AI 能操作你的开发环境理解 AI Agent 的能力边界和安全原则 核心知识MCP让 AI 从「聊天」到「行动」你用 ChatGPT 或 Claude 时它们只能说话——告诉你怎么做但不会帮你做。MCP 改变了这一点。MCPModel Context Protocol是什么MCP 是 Anthropic 在 2024 年推出的开放协议它定义了 AI 模型如何与外部工具/数据源连接。简单说没有 MCPAI 只能在聊天框里回答你的问题 有了 MCPAI 可以调用工具——读文件、写代码、查数据库、操作浏览器类比MCP 就像 USB 协议——它不关心你插的是什么设备键盘/鼠标/硬盘只定义了「设备如何跟电脑通信」。MCP 不关心具体工具是什么只定义了「AI 如何跟工具通信」。MCP 的核心架构┌─────────────┐ ┌──────────────┐ ┌────────────────┐ │ AI 模型 │ ←→ │ MCP Client │ ←→ │ MCP Server │ │ (Claude等) │ │ (在AI应用内) │ │ (连接具体工具) │ └─────────────┘ └──────────────┘ └────────────────┘ │ │ │ 标准协议通信 │ 调用本地/远程工具 │ │ ↓ ↓ ┌──────────────────────────────────┐ │ 工具能力Tools/Capabilities │ │ - 文件读写 │ │ - Git 操作 │ │ - 数据库查询 │ │ - 浏览器自动化 │ │ - API 调用 │ └──────────────────────────────────┘MCP ServerAI 的「手」MCP Server 是一个连接具体工具的服务端。每个 Server 提供一组Tools工具AI 通过 MCP Client 调用这些工具。前端开发者常用的 MCP ServerMCP Server提供的能力前端用途filesystem读写文件、搜索目录AI 直接操作你的项目代码gitGit 操作commit、diff、logAI 帮你管理版本控制githubGitHub APIPR、Issue、SearchAI 帮你管理 GitHub 项目browser浏览器自动化截图、点击、输入AI 帮你做 UI 测试和调试fetchHTTP 请求AI 帮你调用 API、查文档memory持久化记忆存储AI 记住你的项目约定和偏好配置 MCP Server以 Cursor 为例在~/.cursor/mcp.json中配置{mcpServers:{filesystem:{command:npx,args:[-y,anthropic/mcp-server-filesystem,/path/to/project]},github:{command:npx,args:[-y,anthropic/mcp-server-github],env:{GITHUB_TOKEN:your-token}},browser:{command:npx,args:[-y,anthropic/mcp-server-browser]}}}AI Agent让 AI 自动执行多步骤任务AI Agent AI 模型 MCP 工具链 任务规划Agent 和普通 AI 聊天的核心区别特性普通 AI 聊天AI Agent执行方式一步一步等你的指令自动规划多步骤任务工具使用只能说话不能行动通过 MCP 调用工具实际操作上下文只看你给的上下文主动搜索文件、查文档、调用 API迭代你给指令 → AI 回答 → 循环AI 自主判断下一步做什么举个例子「给项目添加暗黑模式」普通 AI 聊天你需要一步步告诉 AI——“先看 App.tsx” “然后看 tailwind.config” “然后写 ThemeToggle 组件” “然后改 App.tsx”…AI Agent你只说「给项目添加暗黑模式」Agent 自主读 App.tsx 和 tailwind.config 了解现状读现有组件了解项目规范创建 ThemeProvider创建 ThemeToggle 组件修改 App.tsx 引入运行测试验证Git commitAgent 的核心工作流程接收任务 → 规划步骤 → 选择工具 → 执行步骤 → 检查结果 → 调整计划 → 继续执行 → 完成任务搭建你的 AI 开发 AgentStep 1配置 MCP 工具链在你的开发环境中配置必要的 MCP Server// ~/.cursor/mcp.json 或 ~/.claude/mcp.json{mcpServers:{filesystem:{command:npx,args:[-y,anthropic/mcp-server-filesystem,/your/project/path]},github:{command:npx,args:[-y,anthropic/mcp-server-github],env:{GITHUB_TOKEN:xxx}}}}Step 2定义 Agent 规则在项目根目录创建AGENT.md类似 .cursorrules但专门给 Agent 用# Agent 规则 ## 安全边界 - 不要直接推送到主分支先创建 PR - 不要删除已有文件除非明确告诉我 - 不要修改 .env 和密钥文件 - 每次改动前先让我确认 ## 工作流程 - 接到任务后先列出执行计划等我确认 - 每完成一个步骤简报结果 - 遇到不确定的地方停下来问我 ## 代码规范 - 遵循 .cursorrules 中的所有规范 - 新文件必须包含类型定义 - 修改已有文件时只改需要的部分Step 3给 Agent 下任务用自然语言描述任务Agent 会自动规划步骤给博客系统添加评论功能包含 - CommentList 组件展示评论列表支持分页 - CommentForm 组件发表评论支持 Markdown - comments storeZustand 管理支持 CRUD 分页 - API 接口层comments service - 路由配置/blog/:slug/commentsAgent 的执行过程 执行计划 1. 创建 comments serviceAPI 层 2. 创建 comments store状态管理 3. 创建 CommentList 组件 4. 创建 CommentForm 组件 5. 配置路由 6. 集成到博客页面 ✅ 等你确认后开始执行...你确认后Agent 逐个执行每步简报结果。Agent 的能力边界Agent 能做好的任务类型评价创建标准组件列表、表单、详情页✅ 95% 可用Agent 拿到规范后直接生成配置类任务路由、状态、构建配置✅ 90% 可用Agent 理解结构后直接配置Bug 定位和修复给定报错信息✅ 85% 可用Agent 能追踪到根因重构任务提取组件、统一类型✅ 80% 可用需要人确认重构方向Agent 做不好的任务类型原因业务逻辑决策Agent 不知道你的业务规则需要你告诉复杂交互设计拖拽、动画Agent 只能生成基础交互复杂交互需要人写性能优化需要实测验证Agent 能提出优化方案但验证需要人做安全审计Agent 能检查常见问题但深层安全需要专业审计安全原则AI Agent 的红线原则含义实践方式确认优先Agent 不能直接执行有风险的操作AGENT.md 中写「改动前先让我确认」最小权限Agent 只能访问它需要的工具和数据MCP 配置只暴露必要的 Server可回退Agent 的操作必须有回退方式要求 Agent 先创建 Git commit 再修改透明度Agent 的每一步操作都可见要求 Agent 每步简报结果人工兜底关键决策必须人来判断遇到不确定的地方 Agent 停下来问你常见误区误区1Agent 能完全替你开发Agent 是你的助手不是你的替代。核心业务逻辑、交互设计、性能优化——这些决策需要你来做。Agent 做的是「执行你决策的代码编写和配置」。误区2给 Agent 全部权限永远不要让 Agent 有推送到主分支、删除文件、修改密钥的权限。最小权限原则——宁可多确认一步也不要事后后悔。误区3不看 Agent 的执行过程Agent 执行过程中的每一步你都应该关注。特别是它搜索文件、调用 API 的步骤——这些可能暴露敏感信息。 AI协作实战实战场景用 Agent 完成一个完整功能任务给博客添加「文章收藏」功能我给 Agent 的指令给博客系统添加文章收藏功能 - BookmarkButton 组件在文章详情页右上角点击收藏/取消收藏 - bookmarks storeZustand 管理收藏列表 添加/移除 持久化到 localStorage - 修改 BlogDetail 页面集成 BookmarkButton - 收藏状态要在列表页也体现小图标标识已收藏 遵循 AGENT.md 规则先列出执行计划等我确认后逐步执行。Agent 的执行计划 执行计划 1. 创建 bookmarks store (src/features/bookmark/store.ts) - state: bookmarks (Setstring), loading, error - actions: addBookmark, removeBookmark, isBookmarked - persist 到 localStorage 2. 创建 BookmarkButton 组件 (src/features/bookmark/components/BookmarkButton.tsx) - Props: articleId, size - 交互点击切换收藏状态有动画反馈 - 用 Lucide 的 Bookmark/BookmarkCheck 图标 3. 修改 BlogDetail 页面 (src/features/blog/pages/BlogDetail.tsx) - 在文章标题旁添加 BookmarkButton 4. 修改 BlogCard 组件 (src/features/blog/components/BlogCard.tsx) - 如果文章已收藏显示小 bookmark 图标 ✅ 确认后开始执行我确认后Agent 逐步执行并简报✅ Step 1: bookmarks store 创建完成 - persist 配置了 localStorage - Setstring 类型用于快速判断 isBookmarked ✅ Step 2: BookmarkButton 创建完成 - 用了 Lucide 图标 - 点击有 scale 动画反馈 ✅ Step 3: BlogDetail 页面已集成 BookmarkButton - 只改动了一行在标题旁添加组件 ✅ Step 4: BlogCard 已添加收藏标识 - 用了条件渲染isBookmarked 时显示小图标 全部完成请运行项目验证功能是否正常。我的验证✅ 收藏按钮点击正常localStorage 持久化有效✅ 列表页显示收藏标识❌ 列表页刷新后收藏标识消失——因为 bookmarks store 初始化后需要 hydrate追加指令让 Agent 修复列表页刷新后收藏标识消失了。分析原因并修复。 推测bookmarks store 的 persist hydrate 是异步的 列表页在 hydrate 完成前就渲染了。Agent 修复原因确认Zustand persist 的 hydrate 是异步的 组件首次渲染用的是初始空 Set。 修复方案在 bookmarks store 中添加 onRehydrateStorage 回调 确保组件等 hydrate 完成后再判断 isBookmarked。 已修改 store.ts添加了 rehydrated 标志位。 组件可以在 rehydrated 为 true 后才渲染收藏标识。学到了什么Agent 能完成 80-90% 的开发工作但边缘情况如 persist hydrate 异步需要你发现并让它修复。这就是「你决策、AI执行、你验证」的协作循环。 动手练习练习1简单配置你的 MCP 工具链在你的开发环境中至少配置 2 个 MCP Serverfilesystem github验证 AI 能通过 MCP 读取你的项目文件。练习2中等编写你的 AGENT.md根据你的项目特点编写一份 AGENT.md 规则文件包含安全边界至少 3 条红线工作流程Agent 如何跟你协作代码规范链接到 .cursorrules 或直接写在这里练习3挑战用 Agent 完成一个完整功能选你项目中的一个新功能需求用 AI Agent 完成用自然语言描述任务让 Agent 列出执行计划你确认后逐步执行验证功能是否正常记录 Agent 做了什么、你补了什么、效率提升多少 本期要点MCP 是 AI 的 USB 协议让 AI 从「只能说话」变成「能行动」——调用工具、操作文件、管理项目Agent AI MCP 规划自动规划多步骤任务自主选择工具逐步执行并简报结果AGENT.md 是 Agent 的宪法定义安全边界、工作流程和代码规范——让 Agent 按你的规矩做事确认优先 最小权限Agent 不能直接推送主分支、不能删除文件、不能修改密钥你决策、AI执行、你验证Agent 做代码编写和配置你做业务决策和验证 下期预告下一期是模块三的实战——AI驱动开发全流程。你将体验一个完整功能从 0 到 1 用 AI 协作完成的全过程记录 AI 参与度分析效率提升。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交