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

Ask Copilot: "Show me all Azure Storage Accounts in my subscription"
Dashboard appears: An interactive card grid showing storage accounts with location, SKU, tier, and size info
Click a storage account: The dashboard calls get_storage_account and renders a detail panel with properties, endpoints, and a containers table
Manage containers: Create new containers, delete existing ones, or click into a container to browse blobs
Manage blobs: Upload files (drag-and-drop or text), download blobs, preview content inline, or delete blobs
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:

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)

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

Azure Storage MCP Apps Demo