前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >我把AI接上了Figma、WhatsApp、浏览器……然后它开始自己动起来了!

我把AI接上了Figma、WhatsApp、浏览器……然后它开始自己动起来了!

作者头像
前端达人
发布于 2025-04-24 06:28:44
发布于 2025-04-24 06:28:44
2050
举报
文章被收录于专栏:前端达人前端达人

大家好,你有没有幻想过这样一幕:

你家的 AI 助手,突然接过你的手机,自己发了条微信。 紧接着,它点开了 Chrome,滑动了几下网页,做了个表单提交。

然后它打开了 Figma,开始画 UI 界面。 最后,它还用自己的声音给人打了个电话,说:“你好,我想点一份披萨。”

我没疯。

我只是在玩一套神奇的开源协议,名字叫——MCP:Modular Command Protocol。

它不是什么大模型,也不是聊天机器人,它是一个你可以插工具给 AI 用的“万能插座”。

一、MCP 是什么?不是“协议”,胜似“操作系统”

🔍 定义拆解:

Modular:模块化指令 Context:可所处的数据背景和运行环境 Protocol:一套统一通信规则,让工具链和 AI 模型进行结构化对话

你可以把 MCP 理解为 AI 世界里的「Bash + API + ChatPrompt」的融合体:

  • 每一个 MCP module 就是一个“功能插件”,比如发 WhatsApp 消息、调数据库、下单购物
  • 每一个 MCP server 提供的是“调用这些插件”的接口网关
  • 每一个 AI Agent(如 GPT、Claude、AutoGPT)通过统一语义协议调用这些模块,实现实际任务执行

🧠 为什么它不是传统 API?

传统 API 面向人类工程师设计,追求结构、权限、安全。

MCP 面向 AI 模型设计,追求“自然语言可理解 + 自动完成任务”。 它把「操作指令」作为第一类对象,从输入 prompt 到执行指令,整个链路实现了闭环。

二、MCP 的本质优势:打通 AI 与“现实世界”的数据/控制链

过去,AI 很聪明,但干不了事。

比如:

  • 它知道你想发一条微信,但不会点按钮
  • 它能总结网页内容,但不会自己去爬
  • 它知道数据库里有你要的数据,但不知道怎么连

MCP 正是在填这条“操作能力鸿沟”。

✅ 原因是三大设计哲学:

  1. 指令即模块(Command-as-a-Module) 每个 MCP 接口就是一个独立的任务单元,描述清晰、参数自带 schema。
  2. 自然语言驱动(NLU-native) 每个模块都支持自然语言 prompt 转命令映射,不需要硬编码 API 调用。
  3. 标准化上下文(Memory & Session Ready) 支持 AI 保持上下文调用一系列模块完成链式任务,比如「发消息 → 获取回复 → 存储回复内容」。

三、 🚀 推荐上手项目(全开源,附 GitHub 地址)

下面是目前最火的 MCP 实践项目,每一个都可 clone 运行,适合你边学边做。

① WhatsApp MCP:做一个“能发语音”的 AI 聊天助手

🧩 功能:AI 通过 WhatsApp 发图、语音、视频,还能说话(接入 ElevenLabs) 💡 用途:做 AI 客服机器人 / 微信自动消息系统 📎 地址:github.com/maldevel/whatsapp-mcp(⭐3.3k)

② IDE 里嵌入 RAG 搜索:开发神器级联动

🧩 功能:在 IDE(如 Cursor)中直接搜索网页、文档,再结合本地代码做总结 💡 用途:开发时实时检索 Stack Overflow、官网文档、项目 README 📎 地址:社区已封装:Cursor Dev MCP Server

③ Ableton MCP:一句 prompt 自动作曲

🧩 功能:输入“Lo-Fi Chill背景音乐”,AI 自动生成音乐放入 DAW 💡 用途:做播客配乐/短视频 BGM/音乐自动创作实验 📎 地址:github.com/amontg/Ableton-MCP(⭐1.3k)

④ Figma MCP:AI 帮你自动画界面

🧩 功能:只需文字描述,AI 自动操作 Figma 生成 UI wireframe 💡 用途:搭建产品原型/UI demo 的快速方案 📎 地址:github.com/figma-plugin-helper/figma-mcp(⭐2.9k)

⑤ GroundX MCP:上传文档直接问问题

🧩 功能:支持 PDF/图表输入,AI 能回答文档中的问题 💡 用途:投标书分析、政策文件总结、合同审核 📎 地址:github.com/groundx-ai/groundx-mcp

⑥ ElevenLabs MCP:AI“开口说话”、接电话都能做

🧩 功能:接入 ElevenLabs 实现文本转语音、语音识别,甚至能打电话 💡 用途:做语音播报助手、语音点餐机器人 📎 地址:github.com/elevenlabs/elevenlabs-mcp(⭐539)

⑦ Firecrawl MCP:爬网站 + 自动提数,一句话搞定

🧩 功能:爬站、提取、聚合、摘要全流程自动完成 💡 用途:市场调研、竞品分析、数据洞察、SEO报告 📎 地址:github.com/firecrawl/firecrawl-mcp(⭐2.5k)

⑧ Supabase MCP:AI 控制数据库,像说话一样简单

🧩 功能:AI 能建表、查表、写数据,全程无须写 SQL 💡 用途:做个“无后端”的数据管理面板 📎 地址:github.com/supabase-community/supabase-mcp(⭐1.2k)

⑨ Browserbase MCP:AI 在网页上像“人”一样操作

🧩 功能:用 headless 浏览器模拟点击、滑动、表单提交等操作 💡 用途:自动抢票、网页测试、AI 网页助手 📎 地址:github.com/stagehand/browserbase-mcp(⭐840)

🔟 FastAPI MCP:让你的 API 自动转为 MCP 模块

🧩 功能:你写的接口,AI 也能一键调用,不需要额外集成逻辑 💡 用途:打造属于自己的 AI Agent 工具链,构建自动化流程 📎 地址:github.com/tadata-dev/fastapi-mcp(⭐2.5k)

1️⃣1️⃣ GitHub 官方 MCP Server:AI DevOps 从这里开始

🧩 功能:AI 能自动拉取项目、修改代码、提交 PR、触发 CI/CD 💡 用途:搭建 GitHub AI 助理 / 代码自动修复系统 📎 地址:github.com/github/github-mcp-server(⭐11.3k)

🎯 初学者快速入门路线

想动手做一个 MCP 项目?跟着这套“3步走”搞起来:

  1. 挑一个模块试跑:建议从 WhatsApp MCP / Firecrawl MCP 开始,容易看见效果
  2. 改 prompt 玩起来:写不同的提示词,观察 AI 行为变化,理解 MCP 调用流程
  3. 接入你自己的工具链:比如你写了个前端小工具,也能写成 MCP 模块供 AI 使用!

📦 结束

你会想用 MCP 实现什么神奇功能?欢迎留言告诉我!

如果你已经搭建了自己的 MCP 模块,也欢迎投稿给我们分享~ 👇

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-04-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、MCP 是什么?不是“协议”,胜似“操作系统”
    • 🔍 定义拆解:
    • 🧠 为什么它不是传统 API?
  • 二、MCP 的本质优势:打通 AI 与“现实世界”的数据/控制链
    • ✅ 原因是三大设计哲学:
  • 三、 🚀 推荐上手项目(全开源,附 GitHub 地址)
    • ① WhatsApp MCP:做一个“能发语音”的 AI 聊天助手
    • ② IDE 里嵌入 RAG 搜索:开发神器级联动
    • ③ Ableton MCP:一句 prompt 自动作曲
    • ④ Figma MCP:AI 帮你自动画界面
    • ⑤ GroundX MCP:上传文档直接问问题
    • ⑥ ElevenLabs MCP:AI“开口说话”、接电话都能做
    • ⑦ Firecrawl MCP:爬网站 + 自动提数,一句话搞定
    • ⑧ Supabase MCP:AI 控制数据库,像说话一样简单
    • ⑨ Browserbase MCP:AI 在网页上像“人”一样操作
    • 🔟 FastAPI MCP:让你的 API 自动转为 MCP 模块
    • 1️⃣1️⃣ GitHub 官方 MCP Server:AI DevOps 从这里开始
  • 🎯 初学者快速入门路线
  • 📦 结束
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档