Flowmindmap

The front‑end is built as a single‑page application using React with React Router for navigation between the main index, roadmaps, and shortcuts pages. Global providers such as QueryClientProvider, ThemeProvider, and TooltipProvider wrap the component tree, establishing a consistent data‑fetching, theming, and UI‑feedback layer. Each page imports shared UI primitives from the components/ui library, ensuring a cohesive design system powered by TailwindCSS utilities.

AI generation is orchestrated through src/utils/aiProviderApi.ts. The module selects the appropriate endpoint based on the chosen provider, constructs a request payload that includes a system prompt (“You are a helpful AI assistant that creates detailed mindmaps in JSON format.”), and parses the response into a unified result shape. Error handling is explicit: non‑OK HTTP responses raise descriptive exceptions, and provider‑specific response validation (e.g., Gemini’s candidates[0].content.parts[0].text) guards against malformed data.

The Carousel component demonstrates advanced React patterns: it creates a context (CarouselContext) that exposes the Embla API, scroll controls, and orientation logic. Consumers invoke useCarousel() to access scrollPrev, scrollNext, and state flags (canScrollPrev, canScrollNext). Keyboard navigation is captured via onKeyDownCapture, mapping arrow keys to carousel actions, which improves accessibility.

User configuration for AI providers lives in AIProviderForm.tsx. The form dynamically renders fields based on the selected provider (e.g., API key input for Gemini/Grok, server URL for Ollama/LM Studio) and populates model options from a constant map. This modular UI enables seamless switching between cloud and local AI services without code changes.

The build pipeline leverages Vite (implicit from the React setup) and TypeScript compilation, with linting enforced by ESLint. No backend services are present in the repository; all AI calls are performed client‑side, relying on CORS‑enabled endpoints or local servers.