spreadsheet-mcp-app
Click on "Install 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-appimport 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.
📊 交互式电子表格 MCP App
一个在 AI 对话中提供可交互电子表格的 MCP App,基于 Skybridge 框架构建。
✨ 特性
📥 智能导入 - 支持 XLSX、CSV 格式
✏️ 实时编辑 - 像 Excel 一样直接修改单元格
📤 轻松导出 - 导出为 CSV
🤖 MCP Apps 支持 - 在 Claude Code Desktop 中弹出交互式表格编辑器
🔒 安全隔离 - iframe 沙箱渲染
🚀 快速开始
本地开发
# 1. 安装依赖
npm install
# 2. 启动开发服务器
npm run dev
# 3. 使用 cloudflared 隧道(可选,用于连接 Claude)
cloudflared tunnel --url http://localhost:3000连接 Claude
使用 cloudflared 创建隧道,然后将隧道 URL 添加到 Claude 的 MCP 配置中:
{
"mcpServers": {
"spreadsheet": {
"url": "https://xxx.trycloudflare.com/mcp"
}
}
}部署到 Vercel
# 1. 安装 Vercel CLI
npm i -g vercel
# 2. 登录
vercel login
# 3. 部署
vercel --prod部署后,MCP 端点地址为:https://your-app.vercel.app/mcp
📖 使用方法
在 Claude Code Desktop 中使用
配置 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.md📄 许可证
MIT License
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/WingkySky/spreadsheet-mcp-app'
If you have feedback or need assistance with the MCP directory API, please join our Discord server