Study Design Diagram Studio WebMCP

Name: Study Design Diagram Studio WebMCP
Author: Black-Swan-Causal-Labs

远程服务

sdds.blackswancausallabs.com科研与教育07 周前更新

代码仓库访问官网

关于 Study Design Diagram Studio WebMCP

Study Design Diagram Studio 是用于创建、审阅和导出流行病学研究设计图的浏览器工作区，适合研究人员与兼容的浏览器 Agent。它提供可编辑的时间线画布，并可通过预定义 WebMCP 工具让 Agent 读取和修改当前设计。

主要功能

01编辑研究设计时间窗口
02拖动或输入日期并撤销
03记录研究细节与来源注释
04导入 JSON 并导出图表
05检查信息完整性

适用场景

01绘制索引事件前后的研究时间线
02审阅研究设计信息是否齐全
03与浏览器 Agent 协作修改画布

MCP 相关

提供 10 个预定义 WebMCP 工具，用于读取、编辑、验证和导出当前研究设计。可通过支持 WebMCP 的浏览器连接，也可配对远程 MCP 桥接；远程配对会经 Cloudflare relay 传送工具参数和结果。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp

一键复制安装命令

Claude CodeTerminal

claude mcp add --transport http black-swan-causal-labs-sdds-webmcp https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp

Cursor.cursor/mcp.json

{"mcpServers":{"black-swan-causal-labs-sdds-webmcp":{"type":"http","url":"https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp"}}}

在 Cursor 中打开

VS Code.vscode/mcp.json

{"servers":{"black-swan-causal-labs-sdds-webmcp":{"type":"http","url":"https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp"}}}

在 VS Code 中打开

Claude Desktopclaude_desktop_config.json

{"mcpServers":{"black-swan-causal-labs-sdds-webmcp":{"type":"http","url":"https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json

{"mcpServers":{"black-swan-causal-labs-sdds-webmcp":{"serverUrl":"https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

全部服务地址

Streamable HTTPhttps://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp需要授权

工具

详细介绍

研究设计图表工作室

由 Black Swan Causal Labs 打造的浏览器工作区，用于创建、审阅和导出流行病学研究设计图表。

在线应用： https://sdds.blackswancausallabs.com

功能

相对于索引事件，模拟洗脱期、纳入期、排除期、协变量评估期和随访期。
通过拖动时间线边缘或输入数值来编辑时间窗口日期，并支持键盘操作和撤销。
记录研究详情、评估规则、来源备注、脚注和缩写。
保存和导入结构化 JSON；导出 SVG、PDF 和可编辑的 PowerPoint 图表。
查看完整性检查清单，并通过 10 个 WebMCP 工具与兼容的浏览器 Agent 协作。

此工作区仅在当前会话中有效。离开前请使用 Save JSON 保存编辑内容。预加载示例根据参考图转录而成，尚未依据其论文进行核实。完整性检查仅确认信息是否存在，不验证方法学有效性或来源准确性。此应用不会从 PDF 中提取信息。

连接 AI Agent

此应用提供十个预定义工具，用于读取、编辑、验证和导出当前研究设计。人工和 Agent 的编辑会使用同一画布和撤销历史。连接方式有两种：

连接方式	要求	设置
原生 WebMCP	支持 WebMCP 的浏览器和 Agent	打开工作室，让 Agent 发现页面工具
远程 MCP 桥接	支持自定义授权标头的 Streamable HTTP MCP 客户端	在工作室中启用临时连接，并使用其 URL 和密钥配置客户端

使用远程 MCP 客户端：

打开研究设计图表工作室，选择 Connect MCP，然后选择 Enable connection。
将 https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp 添加到客户端。将其 Authorization 标头设为完整复制的值，包括 Bearer ；如果客户端接受该格式，也可以使用 Copy MCP config。
保持标签页打开。编辑前，请让 Agent 读取当前研究规范；执行更改需要使用其最新修订版本。
选择 Disconnect 撤销访问权限。关闭或重新加载页面也会结束会话。密钥会在两小时后过期；如需新密钥，请重新连接。

远程桥接已发布在官方 MCP Registry，名称为 io.github.Black-Swan-Causal-Labs/sdds-webmcp。其元数据位于 server.json；详细的连接、会话、开发和部署说明请参阅桥接 README。

仅提供网站 URL 并不能让任意 Agent 使用 WebMCP。原生访问需要浏览器和 Agent 提供支持；远程访问则需要配对和自定义标头支持。目前桥接尚未实现 OAuth 发现机制。

配对是可选的；配对后，研究工具参数和结果会通过 Cloudflare 中继传送给已连接的 Agent 提供方。任何持有临时密钥的人都可以在连接期间调用该画布的工具。加载页面不会创建中继会话；原生 WebMCP 无需通过此中继即可使用；浏览器 Agent 自身的数据处理方式仍然适用。

本地开发

需要 Node.js 22.13 或更高版本以及 npm。首次部署使用的是 Node.js 24。

npm ci
npm run dev

创建并预览生产构建：

npm run build
npm run preview

此应用使用 React、TypeScript、Vite、Tailwind CSS、Zod、jsPDF 和 PptxGenJS。工作室是一个静态应用。其可选远程 MCP 桥接单独运行在 Cloudflare Workers 和 Durable Objects 上；普通手动编辑和原生 WebMCP 均无需配对的中继会话。

Cloudflare 部署

现有的 Cloudflare Pages 项目为 sdds，生产分支为 main，构建输出目录为 dist。

设置	值
自定义域名	`sdds.blackswancausallabs.com`
Pages 主机名	`sdds-1wj.pages.dev`
Wrangler 配置	`wrangler.json`
DNS 记录	CNAME `sdds` → `sdds-1wj.pages.dev`

在有权访问 Cloudflare 账户的检出目录中：

npm ci
npx wrangler login
npm run build
npx wrangler pages deploy dist --project-name sdds --branch main

Wrangler 会在默认浏览器中打开身份验证页面。Pages 项目和自定义域名已配置好；常规重新部署无需重新创建。对于新环境，请创建单独的 Pages 项目，并通过 Cloudflare 的 Pages 控制面板添加其自定义域名。

目前通过 Wrangler 手动部署。推送到此 GitHub 仓库不会自动部署到 Cloudflare。切勿提交 Cloudflare 令牌、.env 文件、.dev.vars 文件或本地 Wrangler 状态。

WebMCP 工具参考

应用会检测 document.modelContext，并在不可用时回退到 navigator.modelContext。不支持 WebMCP 的浏览器仍可进行手动编辑。工具作用于当前页面的内存中研究，并且修改需要提供 expected_revision，以防止基于过期版本进行编辑。

工具	用途
`get_study_spec`	读取当前规范和版本
`update_design_element`	更新一个时间窗口
`add_design_element`	添加一个时间窗口
`remove_design_element`	移除一个时间窗口
`reorder_design_elements`	重新排列时间线行
`update_study_details`	更新研究级元数据
`import_study_spec`	替换当前规范
`clear_study_spec`	开始创建空白设计
`validate_study_spec`	读取完整性检查和待审核项目
`export_schematic`	返回 SVG，但不触发下载

未知日期以 null 表示；未解决的文本保持空白。来源备注应区分有据可查的证据和研究者自行定义的选项。

源代码布局

components/study/：编辑器、时间线和信息面板
components/ui/：可复用的界面组件
lib/study/：架构、验证、时间线布局、导出和 WebMCP 工具
app/globals.css：应用样式
public/：PDF 字体及其许可证
vendor/：附带的样式表及其许可证

许可与联系

第三方组件保留各自的许可证；请参阅 THIRD_PARTY_NOTICES.txt、public/DejaVu-font-license.txt 和 vendor/shadcn-tailwind-4.13.0.LICENSE.md。软件许可证不会改变用户提供的研究内容或第三方参考资料的权利，也不会授予商标权。许可证和声明文件也随已部署的应用一同分发。

Black Swan Causal Labs：https://blackswancausallabs.com · [email protected]

支持 Markdown

登录后评论