使用Playwright、MCP和Semantic Kernel在4步构建一个能够浏览互联网的AI应用

作者


在深入实践之前，我们先来理解 MCP 的概念。我参考了许多博客和视频（文末会附上链接），但对我来说，最简单的理解方式是：就像 REST 为 Web API 交互提供了标准化方式一样，Model Context Protocol (MCP) 由 Anthropic 提出，旨在为 LLM（大语言模型） 与外部服务之间的交互提供标准化协议。



为什么 MCP 让 AI 集成更简单？


每当我开发 AI 应用，并想为 AI Agent 添加新工具或功能时，通常都需要实现自定义集成。举个例子：

  • 如果我希望 AI 应用连接到 AI Search，我必须定义一个连接器，使其能够与 AI Search 的向量存储交互。

  • 如果我想添加网页搜索功能，那就需要额外创建一个专门处理搜索的连接器。


虽然 LangChain、Semantic Kernel、AutoGen 等 AI 框架提供了一些开箱即用的能力和通用连接器，但它们在不同应用场景下的扩展性并不总是理想的。


MCP 如何简化这一切？


有了 MCP，我再也不用为这些集成细节烦恼了。MCP Server 的开发者们已经提前创建好了这些连接器，并提供了一种标准化的访问方式。


我只需要通过 MCP 客户端（如 Claude Desktop App、Cursor、Chainlit 等）连接到 MCP 服务，直接调用工具（Tool Calling），而无需关心具体的集成过程。这不是很酷吗？


现在，让我们来看一个实际用例


我想用 .NET 开发一个 LLM 应用，它的功能是：

  1. 打开新闻网站

  2. 点击第一条新闻链接

  3. 总结文章内容



第一步：设置Semantic Kernel  



var builder = Kernel.CreateBuilder();builder.AddAzureOpenAIChatCompletion("GPT4ov1", "https://<AzureOpenAI>.openai.azure.com", "<REPLACE_WITH_KEY>>");Kernel kernel = builder.Build();



第二步：在 .NET 应用中安装官方 C# MCP 并设置 MCP 客户端  



public static async Task<IMcpClient> GetMCPClientForPlaywright()        {            McpClientOptions options = new()            {                ClientInfo = new() { Name = "Playwright", Version = "1.0.0" }            };            var config = new McpServerConfig            {                Id = "Playwright",                Name = "Playwright",                TransportType = "stdio",                TransportOptions = new Dictionary<string, string>                {                    ["command"] = "npx",                    ["arguments"] = "-y @playwright/mcp@latest",                }            };            var mcpClient = await McpClientFactory.CreateAsync(                config,                options                );            return mcpClient;}


我们可以通过从服务器打印出可用的工具来验证您的客户端是否设置正确：

var mcpClient = await GetMCPClientForPlaywright();await foreach (var tool in mcpClient.ListToolsAsync()){    Console.WriteLine($"{tool.Name} ({tool.Description})");}



第三步：将 MCP 功能转换为 KernelFunctions  



在 Semantic Kernel 中，工具或插件通常被封装为 KernelFunctions。因此，在使用 MCP 时，我们需要 额外 进行一步转换，将 MCP 提供的功能封装为 KernelFunctions，以便在 Semantic Kernel 中使用。


如何转换？


Semantic Kernel 官方提供了一个 扩展方法 来实现此转换，但它 无法与最新版本的 .NET MCP 正常兼容（至少在我尝试时是这样）。


因此，我对其进行了扩展，使其能够适配最新的 .NET MCP 版本。具体实现代码，我会在 代码参考 部分分享。


这样，我们就可以在 Semantic Kernel 内部 直接调用 MCP 功能，使其与其他插件、AI Agent 无缝集成。


var KernelFunctions = await mcpClient.MapToFunctionsAsync();kernel.Plugins.AddFromFunctions("Browser", KernelFunctions);




第四步：发送第一个消息  




// Enable automatic function callingvar executionSettings = new OpenAIPromptExecutionSettings{    Temperature = 0,    FunctionChoiceBehavior = FunctionChoiceBehavior.Auto()};// promptvar prompt = "Summarize AI news for me related to MCP on bing news. Open first link and summarize content";var result = await kernel.InvokePromptAsync(prompt, new(executionSettings)).ConfigureAwait(false);Console.WriteLine($"\n\n{prompt}\n{result}");


结果演示：



MCP 确实彻底改变了我们将外部服务与 LLM 集成的方式。凭借其无缝界面和日益普及的采用，不难想象未来每项主要服务都会提供与 MCP 兼容的层，从而解锁强大而直观的 AI 交互。构建 AI 应用程序从未如此简单。



https://github.com/akshaykokane/semantic-kernel-playwright-mcp

https://ai.gopubby.com/build-an-ai-app-that-can-browse-the-internet-using-microsofts-playwright-mcp-server-semantic-d7b41de1dcb9









（文：PyTorch研习社）

欢迎分享

发表评论