Think like a doctor. Progressively decompose a large, messy problem into smaller, tractable parts — guided by an AI agent that holds a doctoral standard at every step.
Super Analysis is a web app that walks you through a structured, doctoral-level analysis workflow. Instead of asking an LLM one big question and getting one big answer, it splits the work into eight focused phases. At each phase the AI produces a structured result, you review and edit it, and only then does the analysis move on — so the reasoning stays grounded and auditable.
It is fully bilingual (English / 中文) and renders dependency structures as Mermaid diagrams.
| # | Phase | What happens |
|---|---|---|
| 1 | Problem Reception | The agent restates and classifies your problem, and identifies the academic domain. |
| 2 | Decomposition | The problem is broken into a hierarchy of components with a Mermaid dependency graph. |
| 3 | Data Requirements | For each component, the agent specifies the data needed (critical → optional). |
| 4 | Data Assessment | You provide data (text, files, links); the agent assesses sufficiency per component. |
| 5 | Evaluation Criteria | A doctoral-grade rubric is generated — and refined against your feedback/rubric. |
| 6 | Analytical Approach | Methodology, sequence, challenges, and fallback approaches are laid out. |
| 7 | Progress Tracking | A synthesized progress report across all components. |
| 8 | Solution Validation | A final quality assessment and verification statement. |
A human-in-the-loop checkpoint sits between every phase: nothing advances until you confirm.
- 🧭 Guided 8-phase workflow with a progress sidebar and per-phase editing.
- 🌐 Bilingual UI — switch between English and 中文; the agent answers in your language.
- 📊 Mermaid diagrams for problem-decomposition dependency graphs.
- 🤖 Gemini 2.5 Flash with strict JSON output and graceful, localized error handling.
- 🎮 Developer cheat menu to jump phases and seed mock data — dev builds only (stripped from production).
- React 19 + TypeScript (strict)
- Vite 6 build tooling
- @google/genai (Gemini)
- Mermaid for diagrams
- Tailwind CSS (via CDN) for styling
Prerequisites: Node.js 18+
# 1. Install dependencies
npm install
# 2. Start the dev server
npm run devThe app runs at http://localhost:5173. Click the 🔑 API Key button and paste
your Gemini key — that's it.
💡 Get an API key for free at Google AI Studio.
This app is a static, client-side SPA, so it uses a bring-your-own-key model:
- Each visitor enters their own Gemini API key via the 🔑 button.
- The key is stored only in that browser (
localStorage) and is sent directly to Google — never to any other server, and never baked into the deployed bundle.
This is deliberate. Vite inlines VITE_* env vars into the shipped JavaScript, so
putting a shared key in .env and deploying it publicly would expose that key to
every visitor (and your quota to abuse). Do not set VITE_GEMINI_API_KEY on a
public deployment.
For local development only, you may set it as a convenience fallback:
# .env (git-ignored) — LOCAL DEV ONLY, never for public deploys
VITE_GEMINI_API_KEY=your_local_dev_key_hereThe model id lives in constants.ts (GEMINI_MODEL_TEXT).
npm run dev # start the Vite dev server
npm run build # type-check (tsc --noEmit) then build for production
npm run typecheck # type-check only
npm run preview # preview the production build├── App.tsx # orchestrates the phases, agent calls & state
├── constants.ts # model id, phase order, localized phase details
├── types.ts # shared types (AppState, Phase, PhaseProps, …)
├── services/
│ ├── geminiService.ts # Gemini client + structured error keys
│ └── apiKey.ts # bring-your-own-key storage (localStorage)
├── i18n/
│ └── translations.ts # single source of truth for EN / 中文 strings
├── components/
│ ├── PhaseStepper.tsx # progress sidebar
│ ├── ApiKeyModal.tsx # enter / manage your Gemini key
│ ├── CheatMenu.tsx # dev-only navigation/mock tools
│ └── phases/ # one component per analysis phase
├── dev/
│ └── mockData.ts # dev-only fixtures for the cheat menu
└── docs/architecture.svg # the diagram above
In a dev build (npm run dev) a 🎮 button appears bottom-right: jump to any phase, seed mock data, or fast-forward to phase 5 with a full data chain. It is gated behind import.meta.env.DEV, so it never ships in npm run build.
- Finish localizing the per-phase component copy through the i18n layer
- Code-split Mermaid to shrink the main bundle
- Persist sessions (resume an analysis later)
- Unit tests for the phase state machine