repack-logs-mcp
Integrates with Webpack (and Rspack) to capture build logs and serve them via MCP tools.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@repack-logs-mcp show me the latest build errors"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
repack-logs-mcp
An MCP (Model Context Protocol) server for tailing Re.Pack/Rspack dev server logs. Enables AI assistants like Claude to query build logs, find errors, and monitor compilation status.
How It Works
This package provides three components:
RepackLogsPlugin - An Rspack/Webpack plugin that writes build logs to a JSON file
MCP Server - Watches the log file and provides tools for AI assistants to query logs
Client Logger - A lightweight logger for React Native apps that sends runtime logs to the MCP server
Related MCP server: log-mcp
Installation
npm install -g repack-logs-mcp
# or use directly with npx
npx repack-logs-mcp /path/to/.repack-logs.jsonSetup
Step 1: Add the Plugin to Your Rspack Config
Add the RepackLogsPlugin to your rspack.config.mjs (or rspack.config.js):
import { RepackLogsPlugin } from 'repack-logs-mcp/plugin';
export default {
// ... your existing config
plugins: [
// ... your existing plugins
new RepackLogsPlugin({
// Path to write logs (default: '.repack-logs.json')
outputPath: '/absolute/path/to/.repack-logs.json',
// Clear logs on each build start (default: true)
clearOnStart: true,
}),
],
};Example with Re.Pack:
import * as Repack from '@callstack/repack';
import { RepackLogsPlugin } from 'repack-logs-mcp/plugin';
export default Repack.defineRspackConfig({
// ... your config
plugins: [
new Repack.RepackPlugin(),
new RepackLogsPlugin({
outputPath: '/Users/yourname/project/.repack-logs.json',
}),
],
});Step 2: Add Runtime Logging (Optional)
To capture runtime logs (console.log from your app), you need to add a small client script that intercepts console calls and sends them to the MCP server.
Step 2a: Create the client file
Create a file called mcp-client.js in your React Native app's root directory (next to index.js):
/**
* MCP Console Capture Client
* Intercepts console.log/warn/error and sends to MCP server
*/
var SERVER_URL = 'http://localhost:9090';
var logBuffer = [];
var flushTimer = null;
var BATCH_INTERVAL = 1000;
var originalConsole = {
log: console.log,
warn: console.warn,
error: console.error,
debug: console.debug,
info: console.info
};
function flushLogs() {
if (flushTimer) {
clearTimeout(flushTimer);
flushTimer = null;
}
if (logBuffer.length === 0) return;
var logs = logBuffer.slice();
logBuffer = [];
fetch(SERVER_URL + '/logs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ logs: logs })
}).catch(function() {});
}
function formatArg(arg) {
if (typeof arg === 'string') return arg;
if (arg instanceof Error) return arg.name + ': ' + arg.message;
try {
return JSON.stringify(arg);
} catch (e) {
return String(arg);
}
}
function createInterceptor(type, original) {
return function() {
var args = Array.prototype.slice.call(arguments);
original.apply(console, args);
var tag = 'console';
var message = args.map(formatArg).join(' ');
if (typeof args[0] === 'string') {
var match = args[0].match(/^\[([^\]]+)\]/);
if (match) tag = match[1];
}
var entry = {
type: type,
message: message,
tag: tag,
timestamp: new Date().toISOString()
};
if (args.length > 1) {
try {
entry.data = args.length === 2 ? args[1] : args.slice(1);
} catch (e) {}
}
logBuffer.push(entry);
if (!flushTimer) {
flushTimer = setTimeout(flushLogs, BATCH_INTERVAL);
}
};
}
function enableConsoleCapture(options) {
options = options || {};
if (options.serverUrl) SERVER_URL = options.serverUrl;
console.log = createInterceptor('info', originalConsole.log);
console.info = createInterceptor('info', originalConsole.info);
console.warn = createInterceptor('warn', originalConsole.warn);
console.error = createInterceptor('error', originalConsole.error);
console.debug = createInterceptor('debug', originalConsole.debug);
}
function disableConsoleCapture() {
console.log = originalConsole.log;
console.info = originalConsole.info;
console.warn = originalConsole.warn;
console.error = originalConsole.error;
console.debug = originalConsole.debug;
}
module.exports = {
enableConsoleCapture: enableConsoleCapture,
disableConsoleCapture: disableConsoleCapture
};Step 2b: Enable capture in your app
Add this to your index.js (before AppRegistry.registerComponent):
// Enable console.log capture for MCP debugging (only in dev)
if (__DEV__) {
try {
const { enableConsoleCapture } = require('./mcp-client');
enableConsoleCapture();
} catch (e) {
// MCP client not available, skip
}
}Step 2c: Check the runtime server port
Run get_status to see which port the runtime server is using:
Runtime Log Server:
Port: 9090
URL: http://localhost:9090If the port is different from 9090 (e.g., 9093), update SERVER_URL in mcp-client.js to match.
That's it! Now ALL your existing console.log calls are automatically sent to the MCP server.
The capture:
Intercepts console.log, console.warn, console.error, console.debug
Extracts tags from
[TagName]patterns (e.g.,console.log('[MyComponent] hello'))Still outputs to Metro console (so you see logs there too)
Batches logs for efficiency (sends every 1 second)
Only runs in development mode
Step 3: Configure the MCP Server
Point the MCP server to the same log file path used in your plugin config.
Tools Provided
Tool | Description |
| Get recent build logs with filters (type, limit, time, issuer, search) |
| Get runtime logs from the React Native app (console.log output) |
| Get only errors and warnings |
| Clear the in-memory buffer |
| Show watcher status, runtime server port, and statistics |
Configuration
The log file path can be set via:
CLI argument (highest priority):
npx repack-logs-mcp /path/to/.repack-logs.jsonEnvironment variable:
REPACK_LOG_FILE=/path/to/.repack-logs.json npx repack-logs-mcpDefault:
.repack-logs.jsonin current directory
Plugin Options
Option | Description | Default |
| Path to the log file |
|
| Clear log file on each build start |
|
Environment Variables (MCP Server)
Variable | Description | Default |
| Path to the build log file |
|
| Maximum logs to keep in memory |
|
| HTTP port for runtime log server |
|
Claude Code Integration
Add to your Claude Code MCP settings (~/.claude/settings.json or project settings):
{
"mcpServers": {
"repack-logs": {
"command": "npx",
"args": ["repack-logs-mcp", "/path/to/your/project/.repack-logs.json"]
}
}
}Then ask Claude things like:
"What are the recent build logs?"
"Show me the runtime logs"
"Are there any build errors?"
"Show me warnings from the last build"
"What's the status of the log watcher?"
Usage Examples
Get recent logs
Tool: get_build_logs
Args: { "limit": 10 }Filter by type
Tool: get_build_logs
Args: { "types": ["error", "warn"], "limit": 20 }Search logs
Tool: get_build_logs
Args: { "search": "Cannot find module" }Get errors only
Tool: get_errors
Args: { "limit": 10 }Get runtime logs
Tool: get_runtime_logs
Args: { "limit": 50 }Filter runtime logs by tag
Tool: get_runtime_logs
Args: { "tag": "MyComponent", "limit": 20 }Search runtime logs
Tool: get_runtime_logs
Args: { "search": "error", "types": ["error", "warn"] }Development
# Install dependencies
npm install
# Build
npm run build
# Test with MCP Inspector
npx @modelcontextprotocol/inspector node dist/index.js .repack-logs.jsonLicense
MIT
Available Tools
5 toolsclear_logsA
Clear all logs from the in-memory buffer
Inputs: no named parameters.
get_build_logsB
Get recent Re.Pack build logs with optional filtering
Inputs: limit, since, types, issuer, +1 more.
get_errorsA
Get only errors and warnings from Re.Pack build logs
Inputs: limit.
get_runtime_logsA
Get runtime logs from the React Native app (console.log output)
Inputs: tag, limit, types, search.
get_statusA
Get the current status of the log watcher and runtime server
Inputs: no named parameters.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 5 tools
Each tool has a clear, distinct purpose: build logs, error/warning filtering, runtime logs, clearing, and status. The overlap between get_build_logs and get_errors is explicitly resolved by the description, so no ambiguity.
All tool names follow a consistent verb_snake_case pattern. Retrieval operations all start with 'get_', and the clear action uses 'clear_', which is predictable and readable.
Five tools is a well-scoped count for a log viewer server, covering the essential operations without unnecessary bloat. Each tool serves a clear purpose in the log lifecycle.
The server covers the core workflows of retrieving build logs, retrieving runtime logs, viewing only errors/warnings, clearing logs, and checking status. No major gaps are apparent for the stated purpose of managing Re.Pack logs.
Maintenance
Related MCP Connectors
MCP server for RiverScript, an AI transcription platform - fetches transcripts shared via a link.
MCP server for AI dialogue using various LLM models via AceDataCloud
Related MCP Servers
- AlicenseNot gradedqualityFmaintenanceAn MCP server that enables programmatic management and monitoring of development servers through a unified interface and interactive TUI. It provides tools for process control, log streaming, and experimental browser automation via Playwright.1MIT
- AlicenseAqualityDmaintenanceMCP server for log file analysis. Gives LLMs the ability to efficiently analyze large log files without loading them into context.7101MIT
- AlicenseNot gradedqualityCmaintenanceRuntime feedback MCP server for AI coding agents. It watches dev server logs, parses errors, and exposes them as MCP tools so AI agents can instantly verify code changes.26 npm3AGPL 3.0
- AlicenseNot gradedqualityDmaintenanceCreates and manages an MCP server integrated with build tools (Rollup, Vite, Webpack, etc.) to enable AI assistants to analyze, inspect, and control the build process.4,045 npm31MIT