Explore, stress-test, and get AI feedback on your React components — without writing a single test or storybook file.
- Explore — Renders any component with auto-generated prop controls based on its TypeScript types
- Stress Test — Measures render performance, detects non-determinism, and spots memory leaks via server-side rendering
- AI Feedback — Connects to a local Ollama instance to review component source code and provide suggestions
npx reactoscope path/to/MyComponent.tsxThis starts a dev server and opens the Observatory UI in your browser.
npm install reactoscope --save-devAdd it to your Vite config:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { observatory } from 'reactoscope'
export default defineConfig({
plugins: [react(), ...observatory()],
})Then visit /__observatory?component=path/to/MyComponent.tsx in your browser while the dev server is running.
observatory({
ollamaUrl: 'http://localhost:11434', // default
})| Option | Type | Default | Description |
|---|---|---|---|
ollamaUrl |
string |
http://localhost:11434 |
Base URL for the Ollama API used by the AI feedback panel |
- Node.js >= 22.18.0
- React 19
- TypeScript >= 5.8
Reactoscope is a set of Vite plugins that:
- Schema plugin — Parses your component's TypeScript props at dev time and serves them as JSON, powering the auto-generated prop controls
- Stress plugin — Renders your component server-side in a loop, measuring timing, output determinism, and heap growth
- AI plugin — Proxies requests to a local Ollama instance, injecting your component's source code as context
- UI plugin — Serves the pre-built Reactoscope dashboard at
/__observatory
The CLI wraps all of this into a single command using Vite's createServer API, so it works even in projects that don't use Vite.
The AI panel requires Ollama running locally. Install it, pull a model, and the panel will auto-detect available models:
ollama pull llama3MIT