# Spreadsheet MCP App
A streaming spreadsheet [MCP App](https://github.com/modelcontextprotocol/ext-apps) built with [Skybridge](https://docs.skybridge.tech). Claude renders interactive spreadsheets in real-time — cells appear with animations as the model streams its response.
Features:
- **Streaming** — cells render progressively as the model types
- **Sparse addressing** — only populated cells are sent, gaps are automatic
- **Auto-sizing columns** — widths adjust to content
- **Resizable columns** — drag column borders to resize
- **Fullscreen mode** — expand to fill the viewport with sticky headers and infinite scroll
- **Dark mode** — respects system theme
- **Links** — URLs and emails are auto-detected and clickable
## Prerequisites
### Node.js (v22+)
- macOS: `brew install node`
- Linux / other: [nodejs.org/en/download](https://nodejs.org/en/download)
### cloudflared (for tunneling to Claude)
- macOS: `brew install cloudflared`
- Linux / other: [developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/)
## Setup
**1. Install dependencies**
```bash
npm install
```
**2. Start the dev server**
```bash
npm run dev
```
The server runs at `http://localhost:3000`. Skybridge DevTools are available at [http://localhost:3000](http://localhost:3000) for local testing without Claude.
## Connecting to Claude
Tunnel your local server with cloudflared to get a public URL:
```bash
cloudflared tunnel --url http://localhost:3000
```
Then add your tunnel URL with `/mcp` appended (e.g. `https://xxx.trycloudflare.com/mcp`) as a remote MCP server in Claude settings.
## Tool: `spreadsheet`
The server exposes a single tool that Claude uses to render spreadsheets.
**Input format:** CSV string with columns `cell,value,style` — one row per cell.
| Column | Description | Example |
|--------|-------------|---------|
| `cell` | Excel-style address | `A1`, `B2`, `C10` |
| `value` | Text or number | `Revenue`, `$50000` |
| `style` | Optional inline CSS | `font-weight: bold` |
**Example input:**
```
A1,Revenue,font-weight: bold
B1,Q1,font-weight: bold
C1,Q2,font-weight: bold
A2,Sales,
B2,$120000,
C2,$145000,
A3,Costs,
B3,$80000,
C3,$92000,
```
**Try it:** Ask Claude something like *"Make a spreadsheet comparing Q1-Q4 revenue for 3 product lines"*.
## Project Structure
```
spreadsheet-mcp-app-skybridge/
├── server/src/
│ ├── index.ts # Express app with static serving & MCP middleware
│ ├── server.ts # McpServer with tool/widget registration
│ └── middleware.ts # Streamable HTTP transport middleware
├── web/src/
│ ├── helpers.ts # Typed Skybridge hooks (useToolInfo)
│ ├── index.css # Spreadsheet styles, dark mode, sticky headers
│ └── widgets/
│ └── spreadsheet.tsx # React grid component
├── web/vite.config.ts
├── tsconfig.json
└── package.json
```
## Production Build
```bash
npm run build
NODE_ENV=production node dist/server/src/index.js
```
## Built With
- [Skybridge](https://github.com/alpic-ai/skybridge) — full-stack framework for MCP Apps
- [MCP Apps (ext-apps)](https://github.com/modelcontextprotocol/ext-apps) — open standard for interactive UI in MCP
