# 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](https://modelcontextprotocol.github.io/ext-apps/api/).
## What are MCP Apps?
MCP Apps extend the [Model Context Protocol](https://modelcontextprotocol.io/) 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
```bash
# 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
```bash
# 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
## References
- [MCP Apps Blog Post](https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/)
- [MCP Apps VS Code Support](https://code.visualstudio.com/blogs/2026/01/26/mcp-apps-support)
- [MCP Apps SDK (ext-apps)](https://github.com/modelcontextprotocol/ext-apps/)
- [MCP Apps API Reference](https://modelcontextprotocol.github.io/ext-apps/api/)
- [MCP Apps Playground](https://github.com/digitarald/mcp-apps-playground)
- [VS Code MCP Developer Guide](https://code.visualstudio.com/docs/copilot/guides/mcp-developer-guide)
