电子表格MCP应用程序
特征：
- 流媒体 --单元随着模型类型的变化而逐渐渲染
- 稀疏寻址 --只发送填充的单元格，间隙是自动的
- 自动调整列的大小 --宽度根据内容进行调整
- 可调整列大小 --拖动列边框以调整大小
- 全屏幕模式 --展开以用粘性标题和无限滚动填充视口
- 深色模式 --尊重系统主题
- 链接 --URL和电子邮件会自动检测并可点击
先决条件
Node.js（v22+）
- macOS：
brew install node - Linux/其他：
cloudflared（用于通往克劳德的隧道）
- macOS：
brew install cloudflared - Linux/其他：
设置
1.安装依赖项
npm install2.启动开发服务器
npm run dev服务器运行在 http://localhost:3000.Skybridge DevTools可在以下网址获得 http://localhost:3000 在没有克劳德的情况下进行本地测试。
连接到克劳德
使用cloudflared隧道连接本地服务器以获取公共URL：
cloudflared tunnel --url http://localhost:3000然后添加您的隧道URL /mcp 附加（例如。 https://xxx.trycloudflare.com/mcp)在Claude设置中作为远程MCP服务器。
工具： spreadsheet
服务器公开了Claude用于呈现电子表格的单个工具。
输入格式： 带列的CSV字符串 cell,value,style --每个单元格一行。
| 列 | 说明 | 示例 |
|---|---|---|
cell | Excel样式地址 | A1, B2, C10 |
value | 文本或数字 | Revenue, $50000 |
style | 可选内联CSS | font-weight: bold |
示例输入：
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,试试看： 问克劳德类似的问题 *“制作一个电子表格，比较3个产品线的Q1至Q4收入”*.
项目结构
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生产建设
npm run build
NODE_ENV=production node dist/server/src/index.js构建于
- 天桥 --MCP应用程序的全栈框架
- MCP应用程序（ext应用程序） --MCP中交互式UI的开放标准