RxJS MCP Server

日本語版 README はこちら

npm version npm downloads license Node.js

Release Provenance Trusted Publisher

TypeScript RxJS MCP PRs welcome

⚠️ 这是一个非官方的社区项目，与 RxJS 团队无关。

直接从 Claude 等 AI 助手执行、调试和可视化 RxJS 流。

功能特性

🚀 流执行

执行 RxJS 代码并捕获发射的数据
带有时间戳的时间轴可视化
内存使用情况跟踪
支持所有主要的 RxJS 操作符

📊 大理石图 (Marble Diagrams)

从事件数据生成 ASCII 大理石图
可视化流随时间的变化行为
自动模式检测
清晰的图例和说明

🔍 操作符分析

分析操作符链的性能
检测潜在问题和瓶颈
建议替代方案
按功能对操作符进行分类

🛡️ 内存泄漏检测

识别未取消的订阅
检测缺失的清理模式
针对特定框架的建议 (Angular, React, Vue)
提供正确的清理示例

💡 模式建议

获取经过实战检验的 RxJS 模式
针对特定框架的实现
涵盖常见用例：
- 带退避策略的 HTTP 重试
- 搜索输入联想 (Typeahead)
- WebSocket 重连
- 表单验证
- 状态管理
- 以及更多...

安装

# Install globally
npm install -g @shuji-bonji/rxjs-mcp

# Or use with npx
npx @shuji-bonji/rxjs-mcp

配置

Claude Desktop

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "rxjs": {
      "command": "npx",
      "args": ["@shuji-bonji/rxjs-mcp"]
    }
  }
}

VS Code (配合 Continue/Copilot)

添加到 .vscode/mcp.json：

{
  "mcpServers": {
    "rxjs": {
      "command": "npx",
      "args": ["@shuji-bonji/rxjs-mcp"]
    }
  }
}

Cursor

添加到 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "rxjs": {
      "command": "npx",
      "args": ["@shuji-bonji/rxjs-mcp"]
    }
  }
}

可用工具

execute_stream

执行 RxJS 代码并捕获带有时间轴的流发射数据。

该工具接受一个计算结果为 Observable 的表达式，或者一个以该表达式结尾的代码片段 —— return 是可选的。

// ✅ Trailing expression (v0.2.0+): the last expression is returned implicitly
interval(100).pipe(
  take(5),
  map((x) => x * 2),
);

// ✅ Declaration + trailing reference
const stream$ = interval(100).pipe(
  take(5),
  map((x) => x * 2),
);
stream$;

// ✅ Explicit return (always works)
return interval(100).pipe(
  take(5),
  map((x) => x * 2),
);

generate_marble

从事件数据生成 ASCII 大理石图。

// Input: array of timed events
[
  { time: 0, value: 'A' },
  { time: 50, value: 'B' },
  { time: 100, value: 'C' },
];

// Output: A----B----C--|

analyze_operators

分析 RxJS 操作符链的性能和最佳实践。

// Analyzes chains like:
source$.pipe(
  map((x) => x * 2),
  filter((x) => x > 10),
  switchMap((x) => fetchData(x)),
  retry(3),
);

detect_memory_leak

检测潜在的内存泄漏和缺失的清理逻辑。

// Detects issues like:
- Missing unsubscribe
- No takeUntil operator
- Uncompleted Subjects
- Infinite intervals

suggest_pattern

获取适用于常见用例的生产级模式。

可用模式：

http-retry - 具有重试功能的弹性 HTTP 请求
search-typeahead - 防抖搜索
polling - 带有退避策略的智能轮询
websocket-reconnect - 自动重连的 WebSocket
form-validation - 响应式表单验证
state-management - 简单的状态存储
cache-refresh - 带有刷新策略的缓存
以及更多...

使用示例

在 Claude 中使用

User: "Execute this RxJS stream and show me the output"

Claude: I'll execute that RxJS stream for you.

[Uses execute_stream tool]

## Stream Execution Result
✅ Completed
Execution Time: 523ms
Values Emitted: 5

### Emitted Values
[0, 2, 4, 6, 8]

调试内存泄漏

User: "Check this Angular component for memory leaks"

Claude: I'll analyze your component for potential memory leaks.

[Uses detect_memory_leak tool]

## Memory Leak Analysis
⚠️ Potential leaks detected

1. 🔴 subscription (high severity)
   - Found 3 subscribe() calls but only 1 unsubscribe()
   - Fix: Use takeUntil pattern with destroy$ subject

获取模式

User: "Show me how to implement search with RxJS"

Claude: I'll show you the search typeahead pattern.

[Uses suggest_pattern tool with useCase: 'search-typeahead']

## Search Typeahead with Debounce
[Full implementation with explanation]

安全性

execute_stream 工具在隔离的 Worker 线程中运行用户提供的代码，以防止：

主进程污染
无限循环或定时器导致的资源泄漏
访问敏感的 Node.js API (process, fs 等)

如果执行时间超过配置的超时时间，执行将被强制终止。

开发

# Clone the repository
git clone https://github.com/shuji-bonji/rxjs-mcp-server
cd rxjs-mcp-server

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test              # Unit tests (vitest)
npm run test:mcp      # MCP integration test
npm run test:inspector # MCP Inspector (GUI)

# Run in development
npm run dev

发布

发布流程通过 GitHub Actions 自动化，并使用 Trusted Publisher (OIDC) 发布到 npm —— 不使用静态令牌，且每次发布都带有 npm 来源证明 (provenance attestation)。请参阅 RELEASING.md 获取完整的工作流程（以及初始 npm 设置）。

与其他 MCP 服务器集成

RxJS MCP Server 可以很好地与以下工具配合使用：

Angular MCP - 用于 Angular 项目脚手架
TypeScript MCP - 用于类型检查
ESLint MCP - 用于代码质量检查

未来的 Meta-MCP 集成将允许这些工具之间进行无缝协作。

架构

┌─────────────────┐
│   AI Assistant  │
│   (Claude, etc) │
└────────┬────────┘
         │
    MCP Protocol
         │
┌────────┴────────┐
│  RxJS MCP Server│
├─────────────────┤
│ • execute_stream│
│ • generate_marble│
│ • analyze_operators│
│ • detect_memory_leak│
│ • suggest_pattern│
└─────────────────┘

贡献

欢迎贡献！请随时提交 PR。

许可证

MIT

作者

Shuji Bonji

rxjs-mcp-server