FlowScope Tracer

Click anything. See everything. Ask your AI why.

FlowScope Tracer is a VS Code extension for FlowScope — a runtime call graph visualizer for TypeScript and JavaScript applications. Trigger any flow in your app, and FlowScope captures the entire call tree, renders it as an interactive D3 graph right inside VS Code, and exposes it to AI agents via a built-in MCP server.

Features

• Trace History sidebar — eye icon in the Activity Bar lists all captured traces, color-coded by duration (blue / amber / red)
• One-click call tree viewer — click any trace to open an interactive D3 call graph in a panel beside your editor
• Hotspot detection — nodes colored by duration: amber (>50 ms), red (>200 ms) so slow calls jump out immediately
• Dual layout — toggle between tree layout and D3 force-directed graph
• Editor toolbar buttons — Show Last Trace and Pick Trace buttons appear on every .ts / .js / .tsx / .jsx file
• Status bar — live trace count; turns green when the MCP server is online
• MCP server integration — connect Claude Code, Cursor, or Copilot to query traces programmatically

Quickstart

1. Install the extension

Search FlowScope Tracer in the VS Code Extensions panel, or:

ext install vihang.flowscope-tracer

2. Instrument your app

npm install flowscope-core flowscope-visualizer

import { tracer } from 'flowscope-core'

const myService = tracer.wrap(myServiceObj, 'my-service')

tracer.start('button:checkout')
await myService.processCheckout(cartId)
tracer.stop()

Traces are automatically sent to the extension over the MCP server at localhost:7892.

3. Start the MCP server

npx flowscope-mcp-server

The status bar item turns green when the server is online. Traces captured by your app will appear in the Trace History sidebar in real time.

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search FlowScope:

MCP Server — Ask your AI about traces

Run the MCP server and add it to your Claude Code / Cursor config:

{
  "mcpServers": {
    "flowscope": {
      "command": "npx",
      "args": ["flowscope-mcp-server"]
    }
  }
}

Then ask your AI:

"Analyze the last checkout trace and identify the slowest call" "Which function took the most time in the auth flow?" "Show me the call tree for the most recent trace"

Available MCP tools: get_last_trace, list_traces, get_trace_by_id, analyze_trace, get_call_tree, search_traces.

Configuration

Requirements

• VS Code 1.85.0 or later
• Node.js 18+ (for the MCP server)
• flowscope-core installed in your project

Links

• GitHub
• npm: flowscope-core
• npm: flowscope-mcp-server
• Open VSX