RxJS MCP Server

Hier geht es zum japanischen README

npm version npm downloads license Node.js

Release Provenance Trusted Publisher

TypeScript RxJS MCP PRs welcome

⚠️ Dies ist ein inoffizielles Community-Projekt und steht in keiner Verbindung zum RxJS-Team.

Führe RxJS-Streams direkt von KI-Assistenten wie Claude aus, debugge und visualisiere sie.

Funktionen

🚀 Stream-Ausführung

Führe RxJS-Code aus und erfasse Emissionen
Zeitstrahl-Visualisierung mit Zeitstempeln
Überwachung der Speicherauslastung
Unterstützung für alle wichtigen RxJS-Operatoren

📊 Marble-Diagramme

Generiere ASCII-Marble-Diagramme
Visualisiere das Stream-Verhalten über die Zeit
Automatische Mustererkennung
Klare Legende und Erklärungen

🔍 Operator-Analyse

Analysiere Operator-Ketten auf Performance
Erkenne potenzielle Probleme und Engpässe
Schlage alternative Ansätze vor
Kategorisiere Operatoren nach Funktion

🛡️ Erkennung von Speicherlecks

Identifiziere nicht abonnierte Subscriptions
Erkenne fehlende Bereinigungsmuster
Framework-spezifische Empfehlungen (Angular, React, Vue)
Bereitstellung korrekter Bereinigungsbeispiele

💡 Muster-Vorschläge

Erhalte bewährte RxJS-Muster
Framework-spezifische Implementierungen
Abgedeckte Anwendungsfälle:
- HTTP-Retry mit Backoff
- Such-Typeahead
- WebSocket-Wiederverbindung
- Formularvalidierung
- Zustandsverwaltung
- Und mehr...

Installation

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

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

Konfiguration

Claude Desktop

Füge dies zu ~/Library/Application Support/Claude/claude_desktop_config.json hinzu:

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

VS Code mit Continue/Copilot

Füge dies zu .vscode/mcp.json hinzu:

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

Cursor

Füge dies zu ~/.cursor/mcp.json hinzu:

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

Verfügbare Tools

execute_stream

Führe RxJS-Code aus und erfasse Stream-Emissionen mit Zeitstrahl.

Das Tool akzeptiert entweder einen Ausdruck, der zu einem Observable ausgewertet wird, oder ein Snippet, das mit einem solchen Ausdruck endet — return ist optional.

// ✅ 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

Generiere ASCII-Marble-Diagramme aus Ereignisdaten.

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

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

analyze_operators

Analysiere RxJS-Operator-Ketten auf Performance und Best Practices.

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

detect_memory_leak

Erkenne potenzielle Speicherlecks und fehlende Bereinigungen.

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

suggest_pattern

Erhalte produktionsreife Muster für häufige Anwendungsfälle.

Verfügbare Muster:

http-retry - Resilientes HTTP mit Retry
search-typeahead - Debounced-Suche
polling - Intelligentes Polling mit Backoff
websocket-reconnect - Automatisch wiederverbindendes WebSocket
form-validation - Reaktive Formularvalidierung
state-management - Einfacher State-Store
cache-refresh - Cache mit Refresh-Strategie
Und mehr...

Anwendungsbeispiele

Mit 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 von Speicherlecks

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

Muster abrufen

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]

Sicherheit

Das execute_stream-Tool führt vom Benutzer bereitgestellten Code in einem isolierten Worker-Thread aus, um Folgendes zu verhindern:

Verschmutzung des Hauptprozesses
Ressourcenlecks durch Endlosschleifen oder Timer
Zugriff auf sensible Node.js-APIs (process, fs, etc.)

Die Ausführung wird zwangsweise beendet, wenn das konfigurierte Zeitlimit überschritten wird.

Entwicklung

# 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

Release

Releases werden über GitHub Actions automatisiert und mittels Trusted Publisher (OIDC) auf npm veröffentlicht — es werden keine statischen Token verwendet, und jedes Release trägt eine npm-Provenienz-Attestierung. Siehe RELEASING.md für den vollständigen Workflow (und die anfängliche npm-Einrichtung).

Integration mit anderen MCP-Servern

Der RxJS MCP Server funktioniert hervorragend zusammen mit:

Angular MCP - Für das Scaffolding von Angular-Projekten
TypeScript MCP - Für die Typüberprüfung
ESLint MCP - Für Codequalität

Zukünftige Meta-MCP-Integrationen werden eine nahtlose Koordination zwischen diesen Tools ermöglichen.

Architektur

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

Mitwirken

Beiträge sind willkommen! Bitte reiche gerne einen PR ein.

Lizenz

MIT

Autor

Shuji Bonji

rxjs-mcp-server