AI-Powered Visual Brainstorming with Interactive Mind Maps
ThinkStorm transforms how you brainstorm by combining an interactive spider-web visualization with structured AI-guided thinking. Watch your ideas expand, connect, and evolve in real-time as you explore topics with Google's Gemini AI.
- Click-to-Expand: Click any node to generate new connected ideas radiating outward
- Visual Connections: Beautiful curved lines connect parent and child ideas
- Smart Positioning: Nodes automatically arrange to avoid overlap
- Camera Panning: View smoothly animates to center on your selected idea
- Typed Ideas: Each idea is categorized (🔴 Problem, 🔵 Method, 🟢 Application, 🟡 Assumption, 🟣 Opportunity)
- Contextual Expansion: AI considers your exploration path when generating new ideas
- Regenerate: Not satisfied? Regenerate subtopics with one click
- Seed → Enter your topic and let AI interpret your thinking objective
- Expand → Click nodes to explore different directions (spider-web exploration)
- Structure → AI clusters your explored ideas into coherent directions
- Synthesize → Get a comprehensive analysis with recommendations and next actions
- Cosmic Background: Animated starfield with nebula effects
- Glowing Connections: Chain visualization with color-coded paths
- Smooth Animations: Powered by Motion (Framer Motion)
- Responsive: Works on desktop and mobile
- Node.js 20+
- Google Gemini API Key
# Clone the repository
git clone https://github.com/yourusername/ThinkStorm.git
cd ThinkStorm
# Install dependencies
npm install
# Start development server
npm run devCreate a .env file in the project root and set your Gemini API key:
GEMINI_API_KEY=your-gemini-api-key-here
PORT=3001
GEMINI_FLASH_MODEL=gemini-3-flash-preview
GEMINI_PRO_MODEL=gemini-3-flash-preview
ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173The key is used by server.js only and is never exposed to the browser. By default,
both generation paths use Flash; set GEMINI_PRO_MODEL to a Pro model such as
gemini-2.5-pro if your account and quota support it. Use ALLOWED_ORIGINS to
restrict which browser origins can spend API quota through the proxy.
┌─────────────────────────────────────────────────────────────────┐
│ ThinkStorm Flow │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌───────────┐ ┌──────────┐ │
│ │ SEED │ → │ EXPAND │ → │ STRUCTURE │ → │SYNTHESIZE│ │
│ │ │ │ │ │ │ │ │ │
│ │ Enter │ │ Click │ │ AI groups │ │ Get full │ │
│ │ topic │ │ nodes │ │ into dirs │ │ analysis │ │
│ └─────────┘ └─────────┘ └───────────┘ └──────────┘ │
│ │
│ Stage 1 Stage 2 Stage 3 Stage 4 │
└─────────────────────────────────────────────────────────────────┘
- Enter: "AI in healthcare"
- AI generates: Root node + 5-7 typed idea nodes (spider-web pattern)
- Click a node like "AI-powered diagnostics" to explore that direction
- New nodes appear around your selection, building the web
- Continue exploring until satisfied with your thinking path
- Structure: AI identifies key directions from your exploration
- Synthesize: Get a comprehensive report with problem statement, analysis, and next actions
ThinkStorm/
├── src/
│ ├── components/
│ │ ├── BrainCanvas.jsx # Main canvas with 4-stage logic
│ │ ├── BrainCanvas.css # Cosmic background & layout
│ │ ├── ThinkNode.jsx # Interactive node component
│ │ ├── ThinkNode.css # Node styling with types
│ │ ├── ConnectionLine.jsx # Animated SVG connections
│ │ ├── FinalOutput.jsx # Synthesis report modal
│ │ └── FinalOutput.css
│ ├── services/
│ │ └── gemini.js # Gemini API with 4 functions:
│ │ # - interpretSeed()
│ │ # - generateIdeaNodes()
│ │ # - clusterIntoDirections()
│ │ # - generateSynthesis()
│ ├── App.jsx
│ └── main.jsx
├── package.json
└── vite.config.js
| Technology | Purpose |
|---|---|
| React 19 | UI components with hooks |
| Vite 7 | Fast dev server & build |
| Motion | Smooth animations (Framer Motion) |
| Google Gen AI SDK | Structured Gemini responses via the backend proxy |
| Express Rate Limit | Basic quota protection for API routes |
Each generated idea is classified into one of five types:
| Type | Icon | Color | Description |
|---|---|---|---|
| Problem | 🔴 | Red | Issues to solve |
| Method | 🔵 | Blue | Approaches or techniques |
| Application | 🟢 | Green | Use cases or implementations |
| Assumption | 🟡 | Yellow | Underlying beliefs to validate |
| Opportunity | 🟣 | Purple | Potential benefits or openings |
The synthesis report includes:
- 🎯 Thinking Objective: What you're trying to understand or solve
- 📋 Problem Statement: Clear definition of the challenge
- 🔑 Key Assumptions: Critical success factors
- 📂 Directions Analysis: Each direction with value, risks, and unknowns
- 📊 Comparison: Most promising direction and combination potential
- ✅ Next Actions: Immediate steps, questions to answer, validation methods
Export as Markdown or copy to clipboard!
# Run development server
npm run dev
# Build for production
npm run build
# Run unit tests
npm test
# Preview production build
npm run previewThis repo includes wrangler.toml for Cloudflare Pages. It builds the Vite app to
dist and serves /api/* through Pages Functions in functions/api/[[path]].js.
Cloudflare settings:
| Setting | Value |
|---|---|
| Build command | npm run build |
| Build output directory | dist |
| Node.js version | 20 or newer |
Set secrets in Cloudflare, not in Git:
npx wrangler pages secret put GEMINI_API_KEY --project-name thinkstormDo not place GEMINI_API_KEY or CLOUDFLARE_API_TOKEN in wrangler.toml,
README files, package scripts, or committed env files. For local deploys, use
npx wrangler login or set CLOUDFLARE_API_TOKEN only in your terminal/session
secret store.
Optional secrets:
npx wrangler pages secret put API_REQUEST_TOKEN --project-name thinkstormLocal Cloudflare testing:
copy .dev.vars.example .dev.vars
npm run cloudflare:devProduction deploy:
npm run cloudflare:deployApache 2.0 - See LICENSE for details.
Built with ⚡ and AI
Transform your thinking with ThinkStorm