VSCode扩展工具Copilot MCP使用教程【MCP】

优质文章学习记录

— 3 min read
VSCode扩展工具Copilot MCP使用教程【MCP】
在这里插入图片描述


MCP（Model Context Protocol，模型上下文协议） ，2024年11月底，由 Anthropic 推出的一种开放标准，旨在统一大型语言模型（LLM）与外部数据源和工具之间的通信协议。本文章教你使用VSCode扩展工具Copilot MCP快速上手MCP应用！

1. VSCode中安装Copilot MCP

在这里插入图片描述


Copilot MCP是一个适用于 VSCode 的 MCP Client。

2. Copilot MCP使用

安装之后会出现Coplilot授权，并在左侧菜单中出现MCP Server按钮

在这里插入图片描述

3. Add Server

点击Add Server，MCP Server分为两种建立方式，Process和SSE

在这里插入图片描述


以Process为例，输入必要信息：

在这里插入图片描述


其中Server Name是你给Server起的任意名字，需要注意的是Start Command。
这里我的输入为：

npx -y @modelcontextprotocol/server-filesystem /path

注意path修改为自己的文件路径，并确保你已安装node.js从而可以使用npx命令
这个Command怎么来的呢？
可从来自MCP Server官方社区获得自己想要的Server：

https://github.com/modelcontextprotocol/servers?tab=readme-ov-file
在这里插入图片描述


以Filesystem为例，点进去可查看其调用方式，以NPX为例：

在这里插入图片描述


其要求我们输入npx命令，并附加上文件路径，可以为多个文件路径，显然，Command格式举例如下：

npx -y @modelcontextprotocol/server-filesystem /path

注意path修改为自己的文件路径，并确保你已安装node.js从而可以使用npx命令。
在Start Command中输入以上命令即可。
输入完成后点击 Add Server
成功后列表显示刚刚添加Server，不显示意味着添加失败。

在这里插入图片描述


点开后可查看该Server提供的Tools列表：

在这里插入图片描述

4. 调用Server

准备一个测试文件，我在/path下创建了个mcp_test.txt文件,里面包含一句话：

在这里插入图片描述


之后，在VSCode 右侧Copilot对话框中出入：

@mcp <内容>
在这里插入图片描述

例如：

@mcp 请读取"/root/xxx"下的“mcp_test.txt”中的内容
在这里插入图片描述

发送后得到回应：

在这里插入图片描述

成功！！！

Read more

一八零、AG-UI：构建AI前端交互的统一协议

一八零、AG-UI：构建AI前端交互的统一协议

AG-UI：构建AI前端交互的统一协议 引言 随着人工智能技术的飞速发展，AI Agent已经从概念走向实际应用。然而，在将这些智能体集成到前端应用中时，开发者面临着一个关键挑战：如何实现AI Agent与用户界面之间的高效、标准化交互？ AG-UI（Agent User Interaction Protocol）正是为解决这一痛点而诞生的开源协议。它不仅仅是一个技术规范，更是连接AI智能体与前端应用的桥梁，让开发者能够构建真正智能化的用户体验。它们能够让开发者构建出真正嵌入UI应用、感知上下文、实时协同的智能体，而不仅仅是一个在后台提供文本答案的API服务。 一、AG-UI是什么？ 1.1 核心定义 AG-UI（Agent-User Interaction Protocol） 是由CopilotKit团队提出的开源、轻量级协议，专门用于规范AI Agent与前端用户界面之间的通信流程，是一套开源的Agent与UI界面之间的交互协议。它的核心使命是： 标准化前端应用与AI智能体的连接方式，通过开放协议实现通用的AI驱动系统通信。 1.2 协议定位 在AI生态系统中

前端GraphQL客户端：优雅地获取数据

前端GraphQL客户端：优雅地获取数据 毒舌时刻 前端GraphQL？这不是后端的事吗？ "REST API就够了，为什么要用GraphQL"——结果前端需要多次请求，数据冗余， "GraphQL太复杂了，我学不会"——结果错过了更灵活的数据获取方式， "我直接用fetch请求GraphQL，多简单"——结果缺少缓存、错误处理等功能。 醒醒吧，GraphQL不是后端的专利，前端也需要专业的客户端工具！ 为什么你需要这个？ * 减少网络请求：一次请求获取所有需要的数据 * 数据精确：只获取需要的数据，避免冗余 * 类型安全：自动生成TypeScript类型 * 缓存优化：智能缓存，减少重复请求 * 开发效率：简化数据获取逻辑 反面教材 // 反面教材：直接使用fetch请求GraphQL async function fetchGraphQL(query, variables) { const response = await
Trae Solo+豆包Version1.6+Seedream4.0打造“AI识菜通“

Trae Solo+豆包Version1.6+Seedream4.0打造“AI识菜通“

Trae Solo+豆包Version1.6+Seedream4.0打造"AI识菜通" 摘要 在人工智能技术迅猛发展的今天，大模型正以前所未有的深度与广度渗透进日常生活的各个场景。从智能客服到内容创作，从代码生成到图像理解，AI 正在重塑人与信息、人与服务之间的交互方式。而在餐饮这一高频、高感知的领域，语言障碍与菜单理解困难长期困扰着跨国旅行者、留学生乃至本地食客——面对一张满是陌生文字或模糊排版的菜单，如何快速识别菜品、理解其风味、并准确下单？正是在这一现实痛点驱动下，我们开发了“AI识菜通”——一款融合多模态感知、跨语言理解与生成式视觉的智能点餐助手。 “AI识菜通”的核心目标，是让用户只需上传一张任意语言的菜单图片，即可在数秒内获得结构化、本地化（中文）的菜品列表，每道菜附带精准描述与逼真图像，并支持一键加入购物车、生成可直接向服务员展示的点餐字符串。这一看似简单的流程背后，实则涉及图像识别、多语言翻译、语义理解、图像生成、状态管理与前端交互等多个技术模块的协同。而要让这些模块高效、准确、一致地工作，关键不在于单个模型的性能上限，

从“会聊天”到“会交付”：用 OpenClaw + DeepSeek 做一个可落地的 AI Agent 工程化流水线（Java/Go/Python）

从“会聊天”到“会交付”：用 OpenClaw + DeepSeek 做一个可落地的 AI Agent 工程化流水线（Java/Go/Python） 主品牌：王仕宇（JavaPub） 关键词：OpenClaw、DeepSeek、AI Agent、大模型工程化、AI Coding、面试提效 一、今天的行业信号：Agent 正在从 Demo 走向交付 过去一年，大家都在讨论“AI 会不会替代程序员”。到 2026 年，一个更务实的问题已经出现： 你的 Agent，能不能稳定、可观测、可复用地交付结果？ 这背后不是模型参数竞赛，而是工程化能力竞赛： * 任务编排是否可控（Cron / Heartbeat