NExS电子表格MCP应用程序
一个MCP应用程序扩展，可实时呈现交互式内容 NExS电子表格 内嵌在Claude Web（以及任何支持MCP应用程序的主机）中。用户给Claude一个已发布的NExS URL，电子表格直接出现在对话中——完全交互式，所有计算都由NExS平台处理。
建于 @modelcontextprotocol/ext-apps v1.0.1。
______________________________________________________________________
运作原理
User gives Claude a platform.nexs.com URL
↓
Claude calls render_nexs_spreadsheet tool
↓
MCP server returns tool result + HTML resource URI
↓
Host (Claude Web) fetches and renders the View
↓
View mounts the NExS URL in a sandboxed iframe服务器本身不进行API调用，只是将用户提供的URL中继到沙盒视图中。NExS iframe直接从以下位置加载 platform.nexs.com.
______________________________________________________________________
项目结构
nexs-mcp-app/
├── package.json
├── tsconfig.json # Type-checking (noEmit), includes src + server + main
├── tsconfig.server.json # Server compilation (NodeNext) → dist/
├── vite.config.ts # Bundles View into single-file HTML via vite-plugin-singlefile
├── main.ts # Entry point — dual transport (HTTP + stdio)
├── server.ts # Tool + resource registration (factory function)
├── spreadsheet.html # View shell (Vite entry point)
├── src/
│ └── spreadsheet.ts # View logic (App class, theme, iframe mount)
└── dist/ # Build output (gitignored)______________________________________________________________________
入门指南
先决条件
- Node.js 18+
- npm 9+
安装
npm install开发（热重载）
npm start
# Starts vite --watch for the View and tsx watch for the server
# MCP endpoint: http://localhost:3001/mcp生产建设+服务
npm run serve
# Compiles TypeScript, bundles the View, then starts the HTTP server
# MCP endpoint: http://localhost:3001/mcp______________________________________________________________________
连接到克劳德
Claude Web（流式HTTP）
- 运行服务器：
npm run serve - 创建隧道：
npx cloudflared tunnel --url http://localhost:3001 - 在克劳德： 设置→ 连接器→ 添加自定义连接器
- 粘贴：
https://.trycloudflare.com/mcp
克劳德桌面/VS代码（stdio）
添加到MCP服务器配置中：
{
"mcpServers": {
"nexs-spreadsheet": {
"command": "node",
"args": ["
/dist/main.js", "--stdio"]
}
}
}使用ext应用程序基本主机进行本地测试
git clone https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps
cd /tmp/mcp-ext-apps/examples/basic-host && npm install && npm start
# Open http://localhost:8080______________________________________________________________________
用法
连接后，问克劳德：
“显示此NExS电子表格：https://platform.nexs.com/your-sheet-id"
克劳德会打电话的 render_nexs_spreadsheet 电子表格在对话中内联显示。
______________________________________________________________________
环境变量
| 变量 | 默认值 | 描述 |
|---|---|---|
PORT | 3001 | 用于流式HTTP传输的HTTP端口 |
______________________________________________________________________
未来工作
- 优雅降级 --使用
getUiCapability为非MCP应用程序客户端注册纯文本回退工具 - 全屏幕模式 —
app.requestDisplayMode({ mode: "fullscreen" })为了更好地编辑电子表格 - 上下文反馈 —
app.updateModelContext()将单元格数据/结果推送到Claude的上下文中 - 电子表格发现 --按名称列出可用NExS应用程序的资源
- 每用户身份验证 --OAuth让不同的用户看到自己的NExS工作区
______________________________________________________________________
先决条件
NExS平台(platform.nexs.com)必须允许从主机的沙盒源嵌入iframe。如果NExS发送 X-Frame-Options: DENY 或限制性 frame-ancestors CSP，该标头需要放宽才能加载嵌入式iframe。