Combine browser and server logs into a single LLM-friendly format. Feed it into Claude Code so it can understand your app's behavior.
Warning
This is an early prototype that got killed by Cluade Code itself after a few weeks. It now supports starting servers from within itself and tapping into CLI outputs.
| Package | Description |
|---|---|
| CLI Tool for capturing logs from your development server and browser. | |
| Browser script for capturing logs from the browser. | |
| Core library that starts the server and writes the logs. |
Hypothesis: allowing agents like Claude Code to tail through simple, informative, and well-structured logs will improve their ability to debug their own changes and iterate on them.
Inspired by Armin Ronacher's talk: https://www.youtube.com/watch?v=nfOVgz_omlU.
-
Install the CLI and the browser script (if you want to get browser logs as well):
npm install -S @llmtail/cli @llmtail/browser
or if you use
pnpm:pnpm add @llmtail/cli @llmtail/browser
-
Update your dev script to use
llmtail:llmtail start -o ./my.log -- <your-dev-command>
For example, if you use Next.js, change your
package.jsondev script to:"dev": "llmtail start -o ./my.log -- next dev --turbopack"
This will start a server that captures console output and writes it to a log file.
-
(Optional, but recommended) Add the browser script to your app (depending on your setup, you might need to adjust the code):
A nicer option is to add the script to the
<head>of your HTML file so that logs are captured from the very beginning:<head> <script src="https://unpkg.com/@llmtail/browser@latest/global"></script> <script>LLMTail.patchConsole();</script> </head>
Another option is to import the script in your entry file (e.g.
index.tsxorApp.tsx), but this will only capture logs after the app is loaded:import { patchConsole } from "@llmtail/browser"; if (process.env.NODE_ENV !== 'production') { patchConsole(); }
-
Add a prompt to your
CLAUDE.mdor use a different way to provide instructions (I am still working on the right prompt, it definitely should be rewritten):## Debugging When running a development server, both server and browser logs are aggregated into a single file located at `./my.log`. After each change, use `tail` to view a unified log file available at `./my.log`. Combine `tail` with `grep` to filter logs by keywords, such as `error` or `info`. To debug your changes, add `console.log` statements in your code, and then use `tail` with `grep` to view your own logs.
- Support port configuration
- Allow configuring the log format and filter out the noise
- Add a custom
tailutility to better select logs (e.g. after a specific timestamp, or filter by log level) - Multi-process support (run
llmtailfor many processes and merge logs) - Support framework-specific logs and integrations for better context and DX (priority: React, Next.js, Vite)
- Provide frictionless setup for users (auto-append to
CLAUDE.md, better CLI UX, etc.) - Better README