Logspace VS Code Extension

View, analyze, and fix bugs from production session logs directly in VS Code with AI-powered assistance through MCP (Model Context Protocol).

Features

🔐 Secure Authentication - OAuth login with JWT tokens stored securely
📊 Visual Log Grid - Browse session logs with video thumbnails, metadata, and quick actions
🤖 AI-Powered Analysis - Deep bug analysis using GitHub Copilot with MCP tools
🔧 Auto MCP Setup - Automatically configures Model Context Protocol server
🎯 One-Click Actions - "Explain" and "Fix" buttons for instant AI assistance
⚡ Real-time Updates - Auto-refresh logs and instant notifications

Quick Start

Install the extension
Open the Logspace sidebar (click the Logspace icon in the activity bar)
Click "🔐 Login to Logspace" in the Welcome view
Enter your server URL and credentials
Click on "Setup MCP Server" in pop-up or run Cmd+Shift+P → "Logspace: Setup MCP Server" to configure MCP for GitHub Copilot

Step 2: Analyze Logs

Option A: Use Quick Action Buttons

Click "Explain" on any log to get AI analysis
Click "Fix" on any log to get code fixes applied automatically

Option B: Use GitHub Copilot Chat Directly

Open Copilot chat and start your prompt with #logspace:

#logspace analyze bug 28

#logspace what happened in log 42? I see errors about undefined properties

#logspace fix the bug in session 15, user can't log in

#logspace show me console errors from log 33

The AI will automatically use MCP tools to fetch and analyze the session data, then search your codebase and apply fixes.

Important: Use #logspace (with hashtag), NOT @logspace. The @ prefix is for chat participants which we don't use.

How It Works: MCP Integration

Logspace provides 6 powerful MCP tools that GitHub Copilot can use automatically:

1. `analyze_session` - Complete Bug Analysis

What it does: Fetches errors, network requests, console logs, user actions, and timeline

When AI uses it: When you mention analyzing, investigating, or debugging a log

Example prompts:

#logspace analyze bug 28
#logspace what caused the error in log 15?
#logspace investigate session 42

2. `fetch_bug_logs` - Raw Log Data

What it does: Gets complete raw log data for detailed inspection

When AI uses it: When it needs full log details or specific data fields

Example prompts:

#logspace show me all data from log 25
#logspace get raw logs for bug 18

3. `get_error_context` - Error Deep Dive

What it does: Gets specific error with related logs/network/actions within 5 seconds before

When AI uses it: When investigating specific errors

Example prompts:

#logspace explain the first error in log 28
#logspace what caused the TypeError in bug 33?
#logspace show me context around the error in session 15

4. `list_network_requests` - Network Analysis

What it does: Lists and filters network requests (by method, status code, URL pattern)

When AI uses it: When you mention API calls, network issues, or failed requests

Example prompts:

#logspace show failed requests from log 28
#logspace what API calls failed in bug 15?
#logspace list all POST requests from session 42

5. `get_console_logs` - Console Output

What it does: Gets console logs with filtering (by type: log/info/warn/error/debug, or search text)

When AI uses it: When investigating console output or warnings

Example prompts:

#logspace show console errors from log 28
#logspace what warnings appeared in bug 15?
#logspace find console logs about "authentication" in session 42

6. `smart_analysis` - AI-Powered Deep Analysis

What it does: AI-powered smart analysis that detects patterns, correlations, and hidden issues. Goes beyond basic analysis to find masked errors, performance bottlenecks, and user frustration indicators.

When AI uses it: When you need intelligent insights and recommendations, or deeper analysis beyond basic errors.

Example prompts:

#logspace smart analysis of bug 28
#logspace deep dive into session 15
#logspace find hidden issues in log 42

Example Workflows

🐛 Bug Investigation

User: "#logspace analyze bug 28, users see infinite loading"

AI will:
1. Run analyze_session(bugId: 28)
2. Find errors about React hooks and missing key props
3. Search codebase for FilterPanel and SideMenuCard components
4. Read the actual component files
5. Explain root cause: improper setState during render

🔧 Auto-Fix Bugs

User: "#logspace fix bug 28"

AI will:
1. Run analyze_session(bugId: 28)
2. Identify the problems
3. Search for affected files in your workspace
4. Apply fixes directly to your code:
   - Add missing key props
   - Move setState calls outside render
   - Fix hook ordering issues

🔍 Investigate Specific Issues

User: "#logspace why did the login fail in log 15?"

AI will:
1. Run analyze_session(bugId: 15)
2. Run list_network_requests(bugId: 15, urlPattern: "login")
3. Find 401 Unauthorized response
4. Show you the exact request/response
5. Suggest authentication fixes

📊 Quick Summary

User: "#logspace summarize bug 42"

AI will:
1. Run analyze_session(bugId: 42)
2. Give you a concise 2-3 sentence summary
3. Tell you severity level
4. Highlight key issues

Best Practices

✅ Good Prompts (Using #logspace)

Start your prompts with #logspace to ensure the AI uses Logspace MCP tools:

#logspace analyze bug 28
#logspace fix the error in log 15
#logspace why did the API call fail in session 42?
#logspace show me what the user was doing before the crash in bug 33
#logspace find all 404 errors in log 28
#logspace what console warnings appeared in session 15?
#logspace investigate the login issue in bug 42

Why use #logspace?

Ensures AI uses your Logspace MCP tools
Faster and more accurate responses
Prevents confusion with other data sources

🎯 The AI Knows When to Use MCP Tools

You don't need to explicitly mention the tool names. Just mention:

Log/bug/session numbers
What you want to investigate
What you want to fix

The AI will automatically:

Use the right MCP tools to fetch data
Analyze the results
Search your codebase
Provide insights or apply fixes

MCP Configuration

The extension automatically creates:

~/Library/Application Support/Code/User/mcp.json (macOS)
%APPDATA%/Code/User/mcp.json (Windows)
~/.config/Code/User/mcp.json (Linux)

To manually reconfigure: Cmd+Shift+P → "Logspace: Setup MCP Server"

Requirements

VS Code >= 1.90.0
Node.js >= 18
GitHub Copilot subscription (for AI features)
Logspace Server running and accessible

Troubleshooting

MCP Tools Not Working?

Step 1: Verify MCP Configuration

The extension should have automatically created an MCP configuration file. To verify:

Run: Cmd+Shift+P → "Logspace: Setup MCP Server"
Check the Output panel: View → Output → Select "Logspace"
Look for confirmation that MCP was configured successfully

The MCP configuration file should contain a "logspace" server entry in this format:

Cursor:

{
	"mcpServers": {
		"logspace": {
			"command": "npx",
			"args": ["-y", "@logspace/mcp-server@latest"],
			"env": {
				"API_BASE_URL": "http://your-server-address",
				"LOG_LEVEL": "info"
			}
		}
	}
}

VS Code:

{
	"servers": {
		"logspace": {
			"command": "npx",
			"args": ["-y", "@logspace/mcp-server@latest"],
			"env": {
				"API_BASE_URL": "http://your-server-address",
				"LOG_LEVEL": "info"
			}
		}
	}
}

If configuration is missing or incorrect:

Run: Cmd+Shift+P → "Logspace: Setup MCP Server" again
Restart VS Code
Check Output panel for any error messages

Step 2: Verify MCP Server Status

Check if the MCP server is recognized by GitHub Copilot:

Open GitHub Copilot Chat
Look at the bottom of the chat window
You should see MCP tools available and started
Try typing #logspace - Copilot should recognize it as context

If MCP server is not working:

Ensure Node.js >= 18 is installed: node --version
Restart VS Code completely
Check View → Output → "GitHub Copilot" for MCP-related errors

Step 3: Verify Authentication

Check if you're logged in to Logspace:

Open the Logspace sidebar (click the Logspace icon in the activity bar)
You should see the logs view, not the login screen
If you see a login prompt, you're not authenticated

If not logged in:

Click "🔐 Login to Logspace" in the sidebar
Complete the authentication process
After login, the extension will automatically update MCP configuration

Step 4: Test GitHub Copilot Integration

Open GitHub Copilot Chat
Type: #logspace test
If MCP is working, Copilot should recognize the logspace context
If not working:
- Restart VS Code completely
- Check: View → Output → Select "GitHub Copilot" from dropdown
- Look for MCP-related errors

Step 5: Check VS Code Version

Ensure you have:

VS Code >= 1.90.0
GitHub Copilot extension enabled and active subscription
Run: Cmd+Shift+P → "GitHub Copilot: Check Status"

Authentication Issues?

Problem: Login button doesn't work

Check your server URL in settings: Cmd+, → Search "logspace.serverUrl"
Default is http://localhost:5002 - update if your server is elsewhere

Verify server is running:

curl http://your-server-address/health
# Should return: {"status":"ok"}

Problem: "Invalid token" or "Unauthorized" errors

Token might be expired - try logging out and back in:
- Cmd+Shift+P → "Logspace: Logout"
- Cmd+Shift+P → "Logspace: Login"
Check server logs for authentication errors

Clear the token file and re-login:

# macOS/Linux
rm ~/Library/Application\ Support/Code/User/.logspace-token
# Windows (PowerShell)
Remove-Item $env:APPDATA\Code\User\.logspace-token

Problem: Can't connect to server

Check if server is accessible:
```
curl -v http://localhost:5002/health
```
Check firewall settings
If using a remote server, ensure it's accessible from your machine
Try with explicit IP instead of localhost

MCP Server Not Starting in Copilot?

Check MCP Server Logs:

Open GitHub Copilot output: View → Output → Select "GitHub Copilot"
Look for lines mentioning "logspace" or "MCP"
Common error patterns:
- Cannot find module: Missing dependencies
- ENOENT: Wrong path in mcp.json
- EACCES: Permission issues

MCP Tools:

analyze_session - Complete bug analysis
fetch_bug_logs - Raw log data retrieval
get_error_context - Error context with timeline
list_network_requests - Network request filtering
get_console_logs - Console log filtering
smart_analysis - AI-powered deep analysis

Logspace

Logspace

Logspace VS Code Extension

Features

Quick Start

Step 1: Install & Login

Step 2: Analyze Logs

How It Works: MCP Integration

1. analyze_session - Complete Bug Analysis

2. fetch_bug_logs - Raw Log Data

3. get_error_context - Error Deep Dive

4. list_network_requests - Network Analysis

5. get_console_logs - Console Output

6. smart_analysis - AI-Powered Deep Analysis

Example Workflows

🐛 Bug Investigation

🔧 Auto-Fix Bugs

🔍 Investigate Specific Issues

📊 Quick Summary

Best Practices

✅ Good Prompts (Using #logspace)

🎯 The AI Knows When to Use MCP Tools

MCP Configuration

Requirements

Troubleshooting

MCP Tools Not Working?

Authentication Issues?

MCP Server Not Starting in Copilot?

1. `analyze_session` - Complete Bug Analysis

2. `fetch_bug_logs` - Raw Log Data

3. `get_error_context` - Error Deep Dive

4. `list_network_requests` - Network Analysis

5. `get_console_logs` - Console Output

6. `smart_analysis` - AI-Powered Deep Analysis