实验二：MCP与AI Toolkit深度融合 🌐

"给AI插上翅膀，让它飞得更高更远！" - 通过MCP，我们的AI不再是孤岛，而是连接万物的桥梁。

🎯 实验概述

在第一个实验中，我们学会了使用AI Toolkit的基础功能。现在，我们要让AI代理"长出手脚"，能够操作真实世界的工具！就像给超级英雄配备各种神奇道具一样，MCP将为我们的AI代理提供无限可能。

⏱️ 预计用时： 30分钟 🎓 难度等级： ⭐⭐⭐☆☆ 🛠️ 技术栈： AI Toolkit + MCP + Playwright

📋 学习目标

完成这个实验后，你将能够：

[ ] 深入理解MCP架构：掌握客户端-服务器通信模式
[ ] 熟练使用Microsoft MCP生态：了解官方和社区提供的MCP服务器
[ ] 构建浏览器自动化代理：使用Playwright实现网页操作
[ ] 集成MCP到Agent Builder：在可视化界面中配置MCP工具
[ ] 测试和调试MCP集成：确保工具正常工作
[ ] 部署生产级代理：导出可用于实际工作的AI助手

🧠 MCP深度解析

🔍 MCP是什么？

想象一个场景：你的AI助手需要帮你预订餐厅、查看日程、发送邮件、分析数据...如果没有标准协议，每个功能都需要单独开发接口，就像每个电器都需要不同的插座一样混乱。

MCP就是AI世界的"万能插座"！

🏗️ MCP架构深度剖析

1. 核心组件解析

组件名称	功能描述	实际作用
🤖 MCP客户端	AI应用或代理	发起请求，使用工具
🔧 MCP服务器	工具和资源提供者	响应请求，执行操作
📡 传输层	通信协议实现	Stdio、SSE、WebSocket
🛡️ 安全层	权限和验证机制	确保安全的工具访问

2. 通信流程详解

python

# MCP通信流程示例
class MCPCommunicationFlow:
    """MCP通信流程演示"""
    
    def __init__(self):
        self.client = MCPClient()
        self.server = MCPServer()
    
    async def typical_workflow(self):
        """典型的MCP工作流程"""
        
        # 1. 建立连接
        await self.client.connect_to_server("playwright-server")
        
        # 2. 发现可用工具
        tools = await self.client.list_tools()
        print(f"可用工具: {[tool.name for tool in tools]}")
        
        # 3. 调用工具
        result = await self.client.call_tool(
            "playwright_navigate",
            {"url": "https://github.com"}
        )
        
        # 4. 处理结果
        if result.is_success():
            print(f"操作成功: {result.content}")
        else:
            print(f"操作失败: {result.error}")

🌟 MCP的核心价值

✨ 标准化的力量

传统方式的痛点：

python

# 每个服务都需要单独的集成代码
class TraditionalIntegration:
    def __init__(self):
        self.github_client = GitHubAPI(token="...")
        self.slack_client = SlackAPI(webhook="...")
        self.jira_client = JiraAPI(auth="...")
        
    # 每个服务都有不同的调用方式
    async def create_issue(self, title, description):
        # GitHub Issues
        github_issue = await self.github_client.issues.create({
            "title": title,
            "body": description
        })
        
        # Jira Ticket  
        jira_ticket = await self.jira_client.create_issue({
            "summary": title,
            "description": description,
            "project": "DEV"
        })
        
        # 通知Slack
        await self.slack_client.send_message({
            "text": f"新问题创建: {title}",
            "channel": "#dev-team"
        })

MCP方式的优雅：

python

# 统一的MCP接口
class MCPIntegration:
    def __init__(self):
        self.mcp_client = MCPClient()
    
    async def create_issue(self, title, description):
        # 所有工具都通过相同的方式调用
        results = await asyncio.gather(
            self.mcp_client.call_tool("github_create_issue", {
                "title": title, "body": description
            }),
            self.mcp_client.call_tool("jira_create_ticket", {
                "summary": title, "description": description
            }),
            self.mcp_client.call_tool("slack_send_message", {
                "text": f"新问题创建: {title}", "channel": "#dev-team"
            })
        )
        
        return results

🚀 实战项目：智能浏览器代理

🎯 项目目标

我们将构建一个能够：

🌐 自动化浏览网页
📊 提取页面数据
🖱️ 模拟用户交互
📸 截图保存证据
📝 生成操作报告

的智能浏览器代理！

步骤一：安装Playwright MCP服务器

首先，我们需要安装Microsoft提供的Playwright MCP服务器：

bash

# 安装Playwright MCP服务器
npm install -g @modelcontextprotocol/server-playwright

# 验证安装
npx @modelcontextprotocol/server-playwright --help

🔍 服务器功能预览：

工具名称	功能描述	使用场景
`playwright_navigate`	导航到指定URL	打开网页
`playwright_screenshot`	截取页面截图	记录页面状态
`playwright_click`	点击页面元素	模拟用户操作
`playwright_type`	在输入框中输入文本	填写表单
`playwright_extract`	提取页面内容	数据抓取

步骤二：在AI Toolkit中配置MCP服务器

打开Agent Builder
- 在VS Code中按 Ctrl+Shift+P
- 输入 "AI Toolkit: Agent Builder"
- 选择 "Create New Agent"

配置基础信息

json

{
  "name": "智能浏览器助手",
  "description": "能够自动操作浏览器的AI代理",
  "model": "gpt-4o-mini",
  "temperature": 0.3
}

添加MCP服务器配置

在Agent配置中添加：

json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-playwright"],
      "description": "浏览器自动化工具"
    }
  }
}

步骤三：设计智能对话流程

为我们的代理设计一个友好的对话界面：

json

{
  "systemPrompt": "你是一个专业的浏览器自动化助手。你能够帮助用户:\n\n🌐 浏览任何网站\n📊 提取页面信息\n🖱️ 模拟用户操作\n📸 截图保存记录\n\n请用友好、专业的语气与用户交流，并在执行操作前解释你要做什么。",
  
  "examples": [
    {
      "user": "帮我截图GitHub首页",
      "assistant": "好的！我来帮你截图GitHub首页。我会先导航到GitHub，然后截取整个页面的截图。\n\n让我开始操作..."
    },
    {
      "user": "帮我搜索Python相关的仓库",
      "assistant": "我来帮你在GitHub上搜索Python相关的仓库。我会:\n1. 打开GitHub网站\n2. 在搜索框中输入'Python'\n3. 截图搜索结果\n4. 提取热门仓库信息"
    }
  ]
}

步骤四：实现智能操作流程

让我们的代理具备智能分析和操作能力：

python

# 代理的智能操作逻辑示例
class SmartBrowserAgent:
    """智能浏览器代理"""
    
    def __init__(self):
        self.current_page_url = None
        self.operation_history = []
    
    async def handle_user_request(self, request: str):
        """处理用户请求的智能分析"""
        
        # 分析用户意图
        intent = self.analyze_intent(request)
        
        if intent == "screenshot":
            return await self.take_smart_screenshot(request)
        elif intent == "search":
            return await self.perform_smart_search(request)
        elif intent == "extract":
            return await self.extract_information(request)
        else:
            return await self.general_browse(request)
    
    async def take_smart_screenshot(self, request: str):
        """智能截图功能"""
        
        # 1. 提取目标网站
        url = self.extract_url_from_request(request)
        if not url:
            return "请提供要截图的网站URL"
        
        # 2. 导航到页面
        nav_result = await self.call_mcp_tool(
            "playwright_navigate", 
            {"url": url}
        )
        
        if not nav_result.success:
            return f"无法访问 {url}: {nav_result.error}"
        
        # 3. 等待页面加载
        await asyncio.sleep(2)
        
        # 4. 截图
        screenshot_result = await self.call_mcp_tool(
            "playwright_screenshot",
            {"fullPage": True}
        )
        
        if screenshot_result.success:
            self.operation_history.append({
                "action": "screenshot",
                "url": url,
                "timestamp": datetime.now(),
                "result": "success"
            })
            
            return f"✅ 成功截图 {url}\n📸 截图已保存到本地"
        else:
            return f"❌ 截图失败: {screenshot_result.error}"

步骤五：测试代理功能

现在让我们测试我们的智能浏览器代理：

🧪 测试用例一：GitHub首页截图

用户输入：

帮我截图GitHub首页，我想看看今天的热门项目

预期代理响应：

🌐 我来帮你截图GitHub首页！让我执行以下步骤：

1. 📍 导航到 https://github.com
2. ⏳ 等待页面完全加载
3. 📸 截取整个页面的截图
4. 💾 保存截图到本地

开始操作...

✅ 成功导航到GitHub首页
✅ 页面加载完成
✅ 截图已保存

📊 发现了以下热门项目：
• microsoft/vscode - Visual Studio Code编辑器
• facebook/react - React JavaScript库  
• tensorflow/tensorflow - 机器学习框架

截图文件已保存到: github_homepage_2024_07_26.png

🧪 测试用例二：智能搜索操作

用户输入：

在GitHub上搜索"MCP servers"相关的项目

预期代理响应：

🔍 我来帮你在GitHub上搜索MCP servers相关项目！

执行计划：
1. 🌐 打开GitHub网站
2. 🔍 定位搜索框
3. ⌨️ 输入搜索关键词"MCP servers"
4. 🖱️ 点击搜索按钮
5. 📸 截图搜索结果
6. 📊 提取项目信息

开始搜索...

✅ 已打开GitHub
✅ 找到搜索框
✅ 输入搜索关键词
✅ 执行搜索
✅ 获取搜索结果

🎯 找到了以下相关项目：
1. **modelcontextprotocol/servers**
   ⭐ 234 stars | 🍴 45 forks
   📝 Official MCP server implementations
   
2. **anthropic/mcp-server-git**
   ⭐ 89 stars | 🍴 23 forks  
   📝 Git operations via MCP protocol

3. **microsoft/mcp-toolkit**
   ⭐ 156 stars | 🍴 34 forks
   📝 MCP development toolkit

搜索结果截图已保存到: github_search_mcp_servers.png

步骤六：高级功能实现

🎨 智能表单填写

python

async def smart_form_filling(self, form_data: dict):
    """智能表单填写功能"""
    
    # 1. 分析页面表单结构
    form_elements = await self.call_mcp_tool(
        "playwright_extract",
        {"selector": "form input, form textarea, form select"}
    )
    
    # 2. 智能匹配字段
    field_mapping = self.match_form_fields(form_elements, form_data)
    
    # 3. 逐一填写字段
    for field, value in field_mapping.items():
        await self.call_mcp_tool("playwright_type", {
            "selector": field.selector,
            "text": str(value)
        })
        
        # 添加小延迟，模拟真实用户行为
        await asyncio.sleep(0.5)
    
    # 4. 截图确认
    await self.call_mcp_tool("playwright_screenshot", {
        "fullPage": True
    })
    
    return "✅ 表单填写完成，请检查截图确认信息正确"

📊 智能数据提取

python

async def extract_structured_data(self, extraction_rules: dict):
    """智能结构化数据提取"""
    
    extracted_data = {}
    
    for data_type, rule in extraction_rules.items():
        try:
            # 根据规则提取数据
            result = await self.call_mcp_tool(
                "playwright_extract",
                {"selector": rule["selector"]}
            )
            
            if result.success:
                # 数据清理和格式化
                cleaned_data = self.clean_extracted_data(
                    result.content, 
                    rule.get("format", "text")
                )
                extracted_data[data_type] = cleaned_data
                
        except Exception as e:
            extracted_data[data_type] = f"提取失败: {str(e)}"
    
    return {
        "status": "success",
        "data": extracted_data,
        "timestamp": datetime.now().isoformat()
    }

步骤七：部署和导出

📦 导出代理配置

在Agent Builder中完成配置后，点击"Export Agent"：

json

{
  "agent_config": {
    "name": "智能浏览器助手",
    "version": "1.0.0",
    "model": "gpt-4o-mini",
    "temperature": 0.3,
    "max_tokens": 2000,
    
    "system_prompt": "...",
    
    "mcp_servers": {
      "playwright": {
        "command": "npx",
        "args": ["@modelcontextprotocol/server-playwright"]
      }
    },
    
    "capabilities": [
      "web_browsing",
      "screenshot_capture", 
      "form_interaction",
      "data_extraction"
    ]
  }
}

🚀 生产环境部署

bash

# 1. 创建部署目录
mkdir intelligent-browser-agent
cd intelligent-browser-agent

# 2. 复制代理配置
cp agent_config.json .

# 3. 安装依赖
npm install @modelcontextprotocol/server-playwright

# 4. 创建启动脚本
cat > start_agent.sh << 'EOF'
#!/bin/bash
echo "🚀 启动智能浏览器代理..."
export MCP_SERVER_PLAYWRIGHT=$(which npx)
node agent_runner.js
EOF

chmod +x start_agent.sh

# 5. 启动代理
./start_agent.sh

🎯 实验成果验证

✅ 功能测试清单

完成以下测试来验证你的代理功能：

[ ] 基础浏览：访问任意网站并截图
[ ] 搜索操作：在GitHub上搜索项目
[ ] 数据提取：提取网页标题和链接
[ ] 表单交互：填写简单的搜索表单
[ ] 错误处理：尝试访问无效URL时的处理

📊 性能指标

测试项目	目标性能	实际结果
页面加载时间	< 5秒	__ 秒
截图生成时间	< 3秒	__ 秒
搜索响应时间	< 10秒	__ 秒
错误恢复能力	90%+	__%

🚀 扩展挑战

💡 进阶功能建议

多标签页管理：同时操作多个网页
智能等待机制：根据页面内容动态调整等待时间
数据对比分析：比较不同时间点的页面变化
自动化工作流：定期执行重复性浏览任务

🏆 高级项目挑战

选择一个挑战来进一步提升你的技能：

🎯 挑战A：新闻聚合器

构建一个能够从多个新闻网站收集信息的AI代理

🎯 挑战B：电商价格监控

创建一个能够监控商品价格变化的智能助手

🎯 挑战C：社交媒体分析器

开发一个能够分析社交媒体趋势的工具

💭 总结与反思

通过这个实验，你已经掌握了：

MCP协议的实际应用：了解了如何将外部工具集成到AI代理中
Playwright自动化：学会了使用浏览器自动化工具
Agent Builder使用：熟练掌握了可视化AI代理构建
生产环境部署：具备了部署实用AI工具的能力

🎯 关键收获：

MCP让AI代理具备了"超能力"
标准化协议大大简化了工具集成
AI+自动化=无限可能的工作流优化

💡 思考问题：

还有哪些日常工作可以通过类似的方式自动化？
如何确保自动化操作的安全性和可靠性？
怎样设计更智能的错误处理和恢复机制？

实验二：MCP与AI Toolkit深度融合 🌐 ​

🎯 实验概述 ​

📋 学习目标 ​

🧠 MCP深度解析 ​

🔍 MCP是什么？ ​

🏗️ MCP架构深度剖析 ​

1. 核心组件解析 ​

2. 通信流程详解 ​

🌟 MCP的核心价值 ​

✨ 标准化的力量 ​

🚀 实战项目：智能浏览器代理 ​

🎯 项目目标 ​

步骤一：安装Playwright MCP服务器 ​

步骤二：在AI Toolkit中配置MCP服务器 ​

步骤三：设计智能对话流程 ​

步骤四：实现智能操作流程 ​

步骤五：测试代理功能 ​

🧪 测试用例一：GitHub首页截图 ​

🧪 测试用例二：智能搜索操作 ​

步骤六：高级功能实现 ​

🎨 智能表单填写 ​

📊 智能数据提取 ​

步骤七：部署和导出 ​

📦 导出代理配置 ​

🚀 生产环境部署 ​

🎯 实验成果验证 ​

✅ 功能测试清单 ​

📊 性能指标 ​

🚀 扩展挑战 ​

💡 进阶功能建议 ​

🏆 高级项目挑战 ​

🎯 挑战A：新闻聚合器 ​

🎯 挑战B：电商价格监控 ​

🎯 挑战C：社交媒体分析器 ​

💭 总结与反思 ​

实验二：MCP与AI Toolkit深度融合 🌐

🎯 实验概述

📋 学习目标

🧠 MCP深度解析

🔍 MCP是什么？

🏗️ MCP架构深度剖析

1. 核心组件解析

2. 通信流程详解

🌟 MCP的核心价值

✨ 标准化的力量

🚀 实战项目：智能浏览器代理

🎯 项目目标

步骤一：安装Playwright MCP服务器

步骤二：在AI Toolkit中配置MCP服务器

步骤三：设计智能对话流程

步骤四：实现智能操作流程

步骤五：测试代理功能

🧪 测试用例一：GitHub首页截图

🧪 测试用例二：智能搜索操作

步骤六：高级功能实现

🎨 智能表单填写

📊 智能数据提取

步骤七：部署和导出

📦 导出代理配置

🚀 生产环境部署

🎯 实验成果验证

✅ 功能测试清单

📊 性能指标

🚀 扩展挑战

💡 进阶功能建议

🏆 高级项目挑战

🎯 挑战A：新闻聚合器

🎯 挑战B：电商价格监控

🎯 挑战C：社交媒体分析器

💭 总结与反思