Skip to main content
Monocle gives you full observability in production — traces, logs, exceptions, performance. But what about when you’re developing locally? Monocle Studio is a lightweight companion built for local development. One command, and you get a focused dashboard showing what’s happening inside your app as you code. No setup, no external services — it just works.
Monocle Studio
Think of it as browser DevTools, but for your backend. Every HTTP request, every database query, every log — visible in real-time as you develop.
  • See the full trace waterfall for every request
  • Spot slow queries before they become production issues
  • Browse structured logs with stack traces and JSON attributes
  • Catch exceptions before they ever reach your users
  • Connect your AI coding assistant via MCP to query your traces

​
How it works

Your app uses the same Monocle agent as in production. In development, the agent automatically sends telemetry to Monocle Studio instead of the cloud. Studio receives it, stores it locally, and serves a dashboard — all on a single port (localhost:4200). Data persists between restarts so you can review past sessions.

​
Features

Traces & Requests

HTTP requests with full span waterfall, timing, and attributes

Logs

Structured logs with severity filtering, JSON viewer, and stack traces

Exceptions

Exceptions with stack traces, grouped by type

Database Queries

SQL queries with duration and statement preview

Background Jobs

Job execution, queue name, duration, and success/failure tracking

CLI Commands

Traces for CLI scripts and scheduled tasks with custom spans

MCP Server

Let Claude Code or Cursor query your local traces and logs

Real-time

New data appears instantly — no manual refresh needed

​
Quick start

1

Install

npm install -D @monocle.sh/studio @monocle.sh/cli
2

That's it

Dev mode activates automatically when NODE_ENV=development (the default in AdonisJS during node ace serve). No extra config needed — the agent detects it and sends data to Monocle Studio instead of the cloud.
You can also force it explicitly with dev: true in your config if needed.
3

Add a script to your package.json

{
  "scripts": {
    "studio": "monocle dev"
  }
}
4

Start Monocle Studio

npm run studio
This starts the Studio server on http://localhost:4200.
5

Start your app

node ace serve --hmr
Make some requests, then open http://localhost:4200 to see your traces, logs, and exceptions.

​
CLI options

monocle dev                     # Start on default port 4200
monocle dev --port 3000         # Custom port
monocle dev --host localhost    # Bind to localhost only
monocle dev --open              # Open browser automatically
monocle dev --clean             # Clear all stored data before starting
monocle dev --db-path ./my.db   # Custom database path

​
Data storage

Monocle Studio stores data locally at ~/.config/monocle/studio.db. Data persists between restarts — use monocle dev --clean to start fresh.