IdeaCyclone.mp4
Built with the bleeding-edge stack: React 19, Tailwind v4, and D3.js.
Seamlessly supports DeepSeek, Gemini, OpenAI, and more.
IdeaCyclone is more than just a mind mapping tool; it's a Showcase of Modern Web Development and an AI-Native Productivity Tool.
- ⚛️ Bleeding-Edge Tech Stack: A production-ready example of React 19 (leveraging new hooks like
useOptimistic) and Tailwind CSS v4 (zero-config engine). Perfect for developers looking to study the latest frontend trends. - 🤖 Model Agnostic: Don't get locked in. Switch instantly between DeepSeek R1 for reasoning, Gemini 3.0 Flash for speed, or GPT-4o for quality.
- 🧠 Concept Fusion: Unlike traditional tools that just record thoughts, IdeaCyclone actively "thinks" with you by finding hidden connections between seemingly unrelated nodes.
- ⚡ Zero-Friction UI: Mobile-first design with smart auto-layout powered by D3.js. Focus on thinking, not formatting.
IdeaCyclone supports a wide range of LLMs through various providers. You can switch models in the Settings panel.
| Provider | Model Name | Description | ID |
|---|---|---|---|
| Gemini 3.0 Flash | Latest flagship model | gemini-3.0-flash |
|
| Gemini 2.5 Flash | Standard fast model | gemini-2.5-flash |
|
| Gemini 2.5 Flash Lite | Lightweight fast model | gemini-2.5-flash-lite |
|
| OpenAI | GPT-4o | High intelligence flagship | gpt-4o |
| OpenAI | GPT-4o mini | Cost-effective small model | gpt-4o-mini |
| DeepSeek | DeepSeek V3 | Strong open-weights model | deepseek-chat |
| DeepSeek | DeepSeek R1 (Reasoner) | Optimized for reasoning | deepseek-reasoner |
| Zhipu AI | GLM-4 Flash | Fast Chinese/English model | glm-4-flash |
| Moonshot | Moonshot V1 (8k) | Kimi wrapper | moonshot-v1-8k |
| Aliyun | Qwen Max | Qwen flagship | qwen-max |
| Groq | Llama 3.3 70B | Ultra-fast inference | llama-3.3-70b-versatile |
| OpenRouter | Mistral Devstral 2 | Experimental Mistral model | mistralai/devstral-2512:free |
| OpenRouter | Xiaomi MiMo V2 | Mobile optimized | xiaomi/mimo-v2-flash:free |
| GitHub | Llama 4 Scout | GitHub Models service | Llama-4-Scout-17B-16E-Instruct |
- Active AI Partner: Switch expert personas (Logical Architect, Creative Director, etc.) to get tailored suggestions.
- Concept Fusion: Select multiple nodes to have AI analyze connections and generate innovative syntheses.
- Smart Auto-Layout: The canvas automatically arranges itself using force-directed algorithms.
- Professional Export: Export your mind maps to JSON, Markdown, or high-quality PNG/SVG.
- Node.js (v18+)
- npm, yarn, or pnpm
- An API Key (Google Gemini, DeepSeek, or OpenAI)
-
Clone the repository
git clone [https://github.com/YOUR_USERNAME/ideacyclone.git](https://github.com/YOUR_USERNAME/ideacyclone.git) cd ideacyclone -
Install dependencies
npm install
-
Configure Environment Create a
.env.localfile in the root directory and add your API Key:VITE_GEMINI_API_KEY=your_api_key_here
-
Run Locally
npm run dev
Open
http://localhost:5173to see the app.
- Frontend: React 19, TypeScript, Vite
- Styling: Tailwind CSS v4
- Visualization: D3.js, React Flow
- AI Integration: Google GenAI SDK, OpenAI Compatible SDK
- Icons: Lucide React
Contributions are welcome! Whether it's fixing a bug, improving the docs, or adding a new "Expert Persona".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ by Yuho | AI & Design