RxJS MCP Server

⚠️ This is an unofficial community project, not affiliated with RxJS team.

Execute, debug, and visualize RxJS streams directly from AI assistants like Claude.

Features

🚀 Stream Execution

• Execute RxJS code and capture emissions
• Timeline visualization with timestamps
• Memory usage tracking
• Support for all major RxJS operators

📊 Marble Diagrams

• Generate ASCII marble diagrams
• Visualize stream behavior over time
• Automatic pattern detection
• Clear legend and explanations

🔍 Operator Analysis

• Analyze operator chains for performance
• Detect potential issues and bottlenecks
• Suggest alternative approaches
• Categorize operators by function

🛡️ Memory Leak Detection

• Identify unsubscribed subscriptions
• Detect missing cleanup patterns
• Framework-specific recommendations (Angular, React, Vue)
• Provide proper cleanup examples

💡 Pattern Suggestions

• Get battle-tested RxJS patterns
• Framework-specific implementations
• Common use cases covered:
  • HTTP retry with backoff
  • Search typeahead
  • WebSocket reconnection
  • Form validation
  • State management
  • And more...

Installation

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

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

Configuration

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

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

VS Code with Continue/Copilot

Add to .vscode/mcp.json:

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

Cursor

Add to ~/.cursor/mcp.json:

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

Available Tools

execute_stream

Execute RxJS code and capture stream emissions with timeline.

// Example usage
const stream$ = interval(100).pipe(
  take(5),
  map(x => x * 2)
);

generate_marble

Generate ASCII marble diagrams from event data.

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

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

analyze_operators

Analyze RxJS operator chains for performance and best practices.

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

detect_memory_leak

Detect potential memory leaks and missing cleanup.

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

suggest_pattern

Get production-ready patterns for common use cases.

Available patterns:

• http-retry - Resilient HTTP with retry
• search-typeahead - Debounced search
• polling - Smart polling with backoff
• websocket-reconnect - Auto-reconnecting WebSocket
• form-validation - Reactive form validation
• state-management - Simple state store
• cache-refresh - Cache with refresh strategy
• And more...

Usage Examples

With 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]

Debugging Memory Leaks

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

Getting Patterns

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]

Security

The execute_stream tool runs user-provided code in an isolated Worker thread to prevent:

• Main process pollution
• Resource leaks from infinite loops or timers
• Access to sensitive Node.js APIs (process, fs, etc.)

Execution is forcefully terminated if it exceeds the configured timeout.

Development

# 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

Integration with Other MCP Servers

RxJS MCP Server works great alongside:

• Angular MCP - For Angular project scaffolding
• TypeScript MCP - For type checking
• ESLint MCP - For code quality

Future Meta-MCP integration will allow seamless coordination between these tools.

Architecture

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

Contributing

Contributions are welcome! Please feel free to submit a PR.

License

MIT

Author

Shuji Bonji

Links

• GitHub Repository
• RxJS Documentation
• Model Context Protocol