FocusFlow is a lightweight AI productivity assistant that helps creators brainstorm, summarize, and transform content. Powered by Google Gemini, FocusFlow provides structured, creative, and helpful responses for writers, educators, and designers.
- Brainstorm Ideas: Expand questions or concepts into actionable suggestions.
- Summarize Content: Generate concise summaries of your text.
- Transform Text: Rewrite and enhance your content in creative tones.
- Copy & Save: Easily copy responses or save your session as a JSON file.
- Dark/Light Theme: Toggle between light and dark modes for comfortable viewing.
- Responsive UI: Optimized for desktop and mobile devices.
-
Clone the repository:
git clone https://github.com/flame3301/focusflow.git cd focusflow -
Install dependencies:
npm install # or yarn install -
Start the development server:
npm run dev # or yarn dev -
Open http://localhost:5173 in your browser.
npm run build
# or
yarn buildnpm run preview
# or
yarn preview- Select a mode (Brainstorm, Summarize, Transform) from the header.
- Enter your message or content in the input panel.
- View AI-generated responses in the response panel.
- Use the Copy or Save buttons to export your results.
- Toggle theme using the moon/sun icon.
├── src/
│ ├── App.tsx
│ ├── main.tsx
│ ├── index.css
│ ├── components/
│ │ ├── chatPanel.tsx
│ │ ├── header.tsx
│ │ ├── markdownRenderer.tsx
│ │ └── responsePanel.tsx
│ └── contexts/
│ └── themeContext.tsx
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.ts
├── tsconfig.json
└── ...
- API Key: The Google Gemini API key is set in
src/App.tsx. Replace it with your own key for production use. - Styling: Tailwind CSS configuration is in
tailwind.config.js.
MIT