loading…
Search for a command to run...
loading…
Provides an interactive dashboard within VS Code Copilot to manage Azure Storage accounts, containers, and blobs through a rich UI. It enables users to visualiz
Provides an interactive dashboard within VS Code Copilot to manage Azure Storage accounts, containers, and blobs through a rich UI. It enables users to visualize storage resources, perform CRUD operations, and generate SAS tokens using the Model Context Protocol.
An interactive MCP Apps demo that renders an Azure Storage dashboard directly inside VS Code Copilot chat. Browse storage accounts, manage containers and blobs, and generate SAS tokens -- all within a rich UI powered by the MCP Apps Extension.
MCP Apps extend the Model Context Protocol by letting MCP tools return interactive UI components (HTML/CSS/JS) that render directly in the conversation. Instead of plain text responses, tools can display dashboards, forms, visualizations, and multi-step workflows -- all while keeping the AI model informed of user actions.
get_storage_account and renders a detail panel with properties, endpoints, and a containers tablegenerate_sas_token and displays the token and full URL with copy buttonsAll interactions happen within the embedded UI -- the agent orchestrates tool calls behind the scenes.
AZURE_SUBSCRIPTION_ID environment variable setDefaultAzureCredential)# 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
Registers ten tools and one UI resource using @modelcontextprotocol/ext-apps/server:
| Tool | Description | Has UI? |
|---|---|---|
list_storage_accounts |
Lists all accounts in subscription | Yes (dashboard) |
get_storage_account |
Returns detailed account info | No (consumed by dashboard UI) |
list_containers |
Lists blob containers in an account | No (consumed by dashboard UI) |
create_container |
Creates a new blob container | No (consumed by dashboard UI) |
delete_container |
Deletes a blob container | No (consumed by dashboard UI) |
list_blobs |
Lists blobs in a container | No (consumed by dashboard UI) |
upload_blob |
Uploads content as a blob | No (consumed by dashboard UI) |
download_blob |
Downloads blob content | No (consumed by dashboard UI) |
delete_blob |
Deletes a blob | No (consumed by dashboard UI) |
generate_sas_token |
Generates a SAS token for a container | No (consumed by dashboard UI) |
Uses the App class from @modelcontextprotocol/ext-apps to:
ontoolresultapp.callServerTool() for all CRUD operations (get details, list/create/delete containers, list/upload/download/delete blobs, generate SAS)onhostcontextchangedmcp-app.html + src/mcp-app.ts + src/mcp-app.css into a single self-contained HTML file in dist/server.ts, main.ts) to dist/text/html;profile=mcp-app resourceДобавь это в claude_desktop_config.json и перезапусти Claude Desktop.
{
"mcpServers": {
"azure-storage-mcp-apps-demo": {
"command": "npx",
"args": []
}
}
}