AI导哈

NExS电子表格渲染工具

一个在Claude Web和其他支持MCP Apps的主机中内嵌渲染交互式NExS电子表格的扩展工具。

  • by greg0164
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 greg0164/nexs-mcp-app2

使用说明

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）

  1. 运行服务器： npm run serve
  2. 创建隧道： npx cloudflared tunnel --url http://localhost:3001
  3. 在克劳德： 设置→ 连接器→ 添加自定义连接器
  4. 粘贴： https://<tunnel-id>.trycloudflare.com/mcp

克劳德桌面/VS代码（stdio）

添加到MCP服务器配置中：

{
  "mcpServers": {
    "nexs-spreadsheet": {
      "command": "node",
      "args": ["<path-to-repo>/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。

相关 MCP