Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@spreadsheet-mcp-app import this CSV and show as a spreadsheet"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
一个在 AI 对话中提供可交互电子表格的 MCP App，基于 Skybridge 框架构建。
📥 智能导入 - 支持 XLSX、CSV 格式
✏️ 实时编辑 - 像 Excel 一样直接修改单元格
📤 轻松导出 - 导出为 CSV
🤖 MCP Apps 支持 - 在 Claude Code Desktop 中弹出交互式表格编辑器
🔒 安全隔离 - iframe 沙箱渲染
Related MCP server: Excel MCP Server
# 1. 安装依赖
npm install
# 2. 启动开发服务器
npm run dev
# 3. 使用 cloudflared 隧道（可选，用于连接 Claude）
cloudflared tunnel --url http://localhost:3000使用 cloudflared 创建隧道，然后将隧道 URL 添加到 Claude 的 MCP 配置中：
{
"mcpServers": {
"spreadsheet": {
"url": "https://xxx.trycloudflare.com/mcp"
}
}
}# 1. 安装 Vercel CLI
npm i -g vercel
# 2. 登录
vercel login
# 3. 部署
vercel --prod部署后，MCP 端点地址为：https://your-app.vercel.app/mcp
配置 MCP Server：
{
"mcpServers": {
"spreadsheet": {
"url": "https://your-app.vercel.app/mcp"
}
}
}在对话中：
上传 Excel/CSV 文件
查看交互式表格
编辑数据
导出数据
spreadsheet - 将数据展示为交互式电子表格
import_spreadsheet - 导入 Excel/CSV 文件并显示为表格
前端: React 19 + jspreadsheet-ce
框架: Skybridge（MCP Apps 全栈框架）
后端: Express 5 + MCP SDK
Excel 处理: SheetJS (xlsx)
部署: Vercel / 任意 Node.js 服务器
spreadsheet-mcp-app/
├── server/
│ ├── src/
│ │ ├── index.ts # Express 应用入口
│ │ ├── server.ts # Skybridge McpServer + widget 注册
│ │ └── middleware.ts # MCP 传输中间件
│ └── utils/
│ └── excel-parser.ts # Excel/CSV 解析器
├── web/
│ ├── src/
│ │ ├── helpers.ts # 类型安全的 Skybridge hooks
│ │ ├── index.css # Widget 样式
│ │ └── widgets/
│ │ └── spreadsheet.tsx # 电子表格 React 组件
│ └── vite.config.ts # Vite 构建配置
├── package.json
├── tsconfig.json
└── README.mdMIT License
This server cannot be deployed
Open, inspect, filter, edit and convert xlsx and csv files from your AI chat. Processing is local.
Connect AI assistants to Google Sheets through controlled tools for reading and updating rows.
The all-in-one data stack for agents. Upload files, run SQL, evolve tables, and render charts.
AI access to Quadratic spreadsheets: open files, run Python/SQL, query connected databases.
