Azure存储MCP应用程序演示
一个交互式MCP Apps演示，直接在VS Code Copilot聊天中呈现Azure存储仪表板。浏览存储帐户、管理容器和blob以及生成SAS令牌——所有这些都在由 MCP应用程序扩展.
什么是MCP应用程序？
MCP应用程序扩展 模型上下文协议 让MCP工具返回 交互式UI组件 （HTML/CSS/JS）直接在对话中呈现。工具可以显示仪表板、表单、可视化和多步骤工作流，而不是纯文本响应，同时让人工智能模型了解用户操作。
演示流程
- 询问副驾驶： “显示我订阅中的所有Azure存储帐户”
- 仪表板出现： 一个交互式卡片网格，显示存储帐户的位置、SKU、级别和大小信息
- 单击存储帐户： 仪表板呼叫
get_storage_account并呈现一个包含属性、端点和容器表的详细面板 - 管理容器： 创建新容器、删除现有容器或单击容器以浏览blob
- 管理blob： 上传文件（拖放或文本）、下载blob、内联预览内容或删除blob
- 生成SAS令牌： 表单模式允许您选择权限和到期时间；UI调用
generate_sas_token并使用复制按钮显示令牌和完整URL
所有交互都发生在嵌入式UI中——代理在幕后协调工具调用。
先决条件
- Node.js 18+
- VS Code 使用GitHub Copilot（Copilot聊天）
- 您的VS代码版本支持MCP应用程序（建议VS代码内部人员）
- Azure 订阅 随着
AZURE_SUBSCRIPTION_ID环境变量集 - Azure命令行界面 已登录（或由支持的其他凭据源
DefaultAzureCredential)
快速开始
# Install dependencies
npm install
# Build (type-check + bundle UI + compile server)
npm run build
# Configure the MCP server in VS Code (see .vscode/mcp.json example below)
# Then open this folder in VS Code and use Copilot chat发展
# Watch mode: auto-rebuilds UI and restarts server on changes
npm run dev
# Run HTTP server for testing (port 3001)
npm run serve
# Run stdio server directly
npm run serve:stdio项目结构
├── mcp-app.html # UI entry point (bundled by Vite)
├── src/
│ ├── mcp-app.ts # Client-side dashboard logic (App class)
│ └── mcp-app.css # Azure-themed styling
├── server.ts # MCP server: 10 tools + 1 UI resource
├── main.ts # Entry point: stdio + HTTP transports
├── dist/ # Build output (bundled HTML + compiled JS)
├── package.json
├── tsconfig.json # Type checking config
├── tsconfig.server.json # Server compilation config
└── vite.config.ts # Vite + singlefile bundler建筑
MCP服务器（Server.ts）
使用注册10个工具和1个UI资源 @modelcontextprotocol/ext-apps/server:
| 工具 | 描述 | 有用户界面吗？ |
|---|---|---|
list_storage_accounts | 列出订阅中的所有帐户 | 是（仪表板） |
get_storage_account | 返回详细的帐户信息 | 否（由仪表板UI使用） |
list_containers | 列出帐户中的blob容器 | 否（由仪表板UI使用） |
create_container | 创建新的blob容器 | 否（由仪表板UI使用） |
delete_container | 删除blob容器 | 否（由仪表板UI使用） |
list_blobs | 列出容器中的blob | 否（由仪表板UI使用） |
upload_blob | 以blob形式上传内容 | 否（由仪表板UI使用） |
download_blob | 下载blob内容 | 否（由仪表板UI消耗） |
delete_blob | 删除blob | 否（由仪表板UI使用） |
generate_sas_token | 为容器生成SAS令牌 | 否（由仪表板UI使用） |
仪表板用户界面（src/mcp-app.ts）
使用 App 类从 @modelcontextprotocol/ext-apps 致：
- 通过以下方式接收初始工具结果
ontoolresult - 在视图（帐户）之间导航→ 容器→ blobs）与面包屑导航
- 通过以下方式调用服务器工具
app.callServerTool()用于所有CRUD操作（获取详细信息、列出/创建/删除容器、列出/上传/下载/删除blob、生成SAS） - 显示用于创建容器、上传blob、生成SAS令牌、确认删除和blob内容预览的模式对话框
- 通过以下方式应用主机主题
onhostcontextchanged
构建管道
- Vite+Vite插件单文件 捆绑包
mcp-app.html+src/mcp-app.ts+src/mcp-app.css在中转换为单个自包含的HTML文件dist/ - TypeScript 编译服务器文件(
server.ts,main.ts)todist/ - MCP服务器读取并提供捆绑的HTML作为
text/html;profile=mcp-app资源