Azure Storage MCP Apps Demo

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.

What are MCP Apps?

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.

Demo Flow

1. Ask Copilot: "Show me all Azure Storage Accounts in my subscription"
2. Dashboard appears: An interactive card grid showing storage accounts with location, SKU, tier, and size info
3. Click a storage account: The dashboard calls get_storage_account and renders a detail panel with properties, endpoints, and a containers table
4. Manage containers: Create new containers, delete existing ones, or click into a container to browse blobs
5. Manage blobs: Upload files (drag-and-drop or text), download blobs, preview content inline, or delete blobs
6. Generate SAS tokens: A form modal lets you select permissions and expiry; the UI calls generate_sas_token and displays the token and full URL with copy buttons

All interactions happen within the embedded UI -- the agent orchestrates tool calls behind the scenes.

Prerequisites

• Node.js 18+
• VS Code with GitHub Copilot (Copilot Chat)
• MCP Apps support in your VS Code version (VS Code Insiders recommended)
• Azure subscription with the AZURE_SUBSCRIPTION_ID environment variable set
• Azure CLI logged in (or another credential source supported by DefaultAzureCredential)

Quick Start

# 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

Development

# 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

Project Structure

├── 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

Architecture

MCP Server (server.ts)

Registers ten tools and one UI resource using @modelcontextprotocol/ext-apps/server:

Dashboard UI (src/mcp-app.ts)

Uses the App class from @modelcontextprotocol/ext-apps to:

• Receive initial tool results via ontoolresult
• Navigate between views (accounts → containers → blobs) with breadcrumb navigation
• Call server tools via app.callServerTool() for all CRUD operations (get details, list/create/delete containers, list/upload/download/delete blobs, generate SAS)
• Display modal dialogs for create container, upload blob, generate SAS token, confirm delete, and blob content preview
• Apply host theming via onhostcontextchanged

Build Pipeline

• Vite + vite-plugin-singlefile bundles mcp-app.html + src/mcp-app.ts + src/mcp-app.css into a single self-contained HTML file in dist/
• TypeScript compiles server files (server.ts, main.ts) to dist/
• The MCP server reads and serves the bundled HTML as a text/html;profile=mcp-app resource

References

• MCP Apps Blog Post
• MCP Apps VS Code Support
• MCP Apps SDK (ext-apps)
• MCP Apps API Reference
• MCP Apps Playground
• VS Code MCP Developer Guide