AgentLens — LLM Output Viewer

A standalone React web application designed to upload, organize, and diff complex JSON outputs generated by LLMs or AI agents. AgentLens provides a highly readable, structured UI for exploring data and a powerful tree-based diff engine for tracking changes across versions.

Features

• Dynamic JSON Uploads: Easily upload JSON files via a drag-and-drop or file-picker modal.
• Run Versioning: Group uploads into "Runs" and track multiple versions within each run. Easily step backward or forward through time.
• Tree-Based Diff Engine: See exactly what changed between two versions with a side-by-side, paragraph-wrapping diff view.
  • Automatically pairs up added and removed array items for side-by-side "Changed" comparisons.
  • Intelligent, deep diffing that highlights precise differences.
• Custom Renderers: Built-in visual renderers for specific data schemas (e.g., SWOT, PESTLE, Patient Journeys, Insight Rows).
• Fallback Generic Tree: Any unrecognized JSON schema is gracefully handled by a clean, collapsible generic tree view.
• Zero Configuration Deploy: Built on Vite, so it deploys instantly to platforms like Vercel with no extra configuration files needed.

Tech Stack

• Framework: React + Vite (Vanilla JSX)
• Styling: Vanilla CSS (CSS Variables, Flexbox/Grid, Dark Mode aesthetics)
• Storage: localStorage (designed to be easily swappable to a real backend database)

Running Locally

1. Install Dependencies Make sure you have Node.js installed, then run:

   npm install

2. Start the Development Server

   npm run dev

   Open your browser and navigate to http://localhost:5173.

Architecture & Storage

All data fetching and saving is encapsulated inside src/lib/storage.js. Currently, the app uses your browser's localStorage to save runs and versions. This means your data remains safely on your device.

If you wish to add a cloud database (like Supabase, Firebase, or Vercel Postgres) so multiple users can share the same runs, you only need to update the API calls inside src/lib/storage.js. The rest of the React application will continue to work perfectly without modification.

Deployment (Vercel)

Deploying to Vercel is seamless because Vite is natively supported.

Via Vercel Dashboard:

1. Go to Vercel and create a new project.
2. Import this GitHub repository.
3. Click Deploy. Vercel will automatically detect Vite and configure the build settings (npm run build, dist/).

Via Vercel CLI: Run the following command in your terminal and follow the prompts:

npx vercel

Contributing

• New Renderers: If you want to add a custom layout for a specific JSON section, create a new component in src/components/ and register its key in src/lib/schema.js.
• Diff Engine Adjustments: The diff logic lives entirely in src/lib/diff.js.

---

AgentLens provides clarity to your complex agent outputs.