快速上手MCP实战案例——搭建一个万物可视化系统

大模型开发/技术交流

4月29日1917看过

咱们先来聊聊什么是Model Context Protocol（MCP，模型上下文协议）—— 他就是 AI 世界里的 “智能翻译官”，专门解决大模型和外部工具 “鸡同鸭讲” 的难题！

一、用生活场景秒懂 MCP

想象你是个只会说中文的超级翻译官（比如 GPT-4），但老板让你处理英文合同、查股票数据、甚至发邮件。这时候你需要：

知道有哪些工具可用（比如翻译软件、股票 API、邮箱客户端）；
精准调用工具（比如 “翻译第 3 段”“查腾讯股价”“给张三发邮件”）；
安全处理数据（比如合同隐私不能泄露）。

MCP 就是这套规则的 “说明书”：

它规定了翻译官（大模型）和工具（API、数据库）之间的 “对话方式”，比如先报工具名字、再传参数、最后校验结果。
就像 USB-C 接口统一了设备充电标准，MCP 让大模型能像 “即插即用” 一样连接各种工具。

二、配置cursor中的MCP设置

接着，配置appbuilder的MCP服务，apikey可以从这里获取。将对应的APIKEY填入配置中。

  
  
  
  
  
  
   
   
   
   
   
   
    {
   
   
   
   
   
   
   
   
   
   
   
   
      "mcpServers": {
   
   
   
   
   
   
   
   
   
   
   
   
          "appbuilder-app": {
   
   
   
   
   
   
   
   
   
   
   
   
              "url": "http://appbuilder.baidu.com/v2/app/mcp/sse?api_key=bce-v3/ALTAK..."   
   
   
   
   
   
   
   
   
   
   
   
   
          }
   
   
   
   
   
   
   
   
   
   
   
   
      }
   
   
   
   
   
   
   
   
   
   
   
   
    }

配置完成后，就可以看到MCP设置中，这里被点亮了！在Cursor设置页面可看到get_all_apps、create_converstation、run三个Tool。分别是获取应用列表，新建会话，与应用对话这三个功能，现在我们就可以使用这三个功能啦

三、使用cursor来进行使用

它可以列出你的应用列表，应用列表如果想被列出，则需要提前配置你的APKEY的相应权限，提前为这个KEY可以访问和获取到哪些应用来做配置。

我们先来看下这个智能体的功能，主要就是把用户输入内容转换成可视化的HTML代码：

  
  
  
  
  
  
   
   
   
   
   
   
    输入我们的需求：制作一个HTML网页，让我可以拖动word文件进去，然后提取其中的文本内容，并将文本内容传入据可视化HTML生成器。等待该智能体返回HTML代码，然后根据返回的代码直接可以预览这个HTML代码的效果