This repository represents the original concept of ThinkFirst.
We are actively developing a new commercial platform that offers a distinct set of features and capabilities separate from this open-source version.
👉 Want early access to the new ThinkFirst? Join the Waitlist here
The Problem: Most AI tools create a "Copy-Paste Trap" — outsourcing the struggle of thinking to a machine. The Solution: ThinkFirst flips the interaction using the "Brain First -> AI -> Brain Last" methodology:
- 🛑 My Brain First: You formulate your own thesis or rough ideas before touching the AI.
- 🤖 AI's Turn: The AI acts as a Socratic Coach. It critiques, structures, and offers counter-arguments, but refuses to generate the final text.
- 📝 My Brain Last: You synthesize the feedback and write the final work yourself.
"Don't let AI steal your 'Aha!' moment."
Switch between specialized coaching modes tailored to your cognitive needs:
| Persona | Function | Best For |
|---|---|---|
| 🧠 General Coach | Balanced guidance & feedback. | General inquiry. |
| 🛡️ Devil's Advocate | Ruthlessly logical critique. | Strengthening weak arguments. |
| 🏗️ The Architect | Structures scattered thoughts. | Outlining essays or projects. |
| ❓ Socratic Expander | Pushes for deeper "Why" & "How". | Breaking through writer's block. |
| 🔗 Analogy Maker | Explains via metaphors. | Understanding complex abstract concepts. |
- Powered by Gemini 2.5 Flash: Leveraging Google's model for high-speed, low-latency reasoning.
- Multi-Modal Playground: Upload diagrams or notes; the AI "sees" and critiques them.
- Dual Modes:
- Search: Grounds answers with real-time Google Search data.
- Think: Enhanced reasoning depth for complex logic puzzles.
- Privacy First: API keys are stored locally in your browser (
localStorage). No backend tracking.
This project is engineered with a focus on performance and modern web standards.
- Frontend: React 18 (ESM) + Vite
- Styling: Tailwind CSS +
clsx+tailwind-merge - Motion: Framer Motion for fluid UI interactions.
- AI SDK:
@google/genai - Icons: Lucide React
- Node.js (v18+)
- A Google Gemini API Key (Get one here)
-
Clone the repository
git clone https://github.com/Ryan-Guo123/ThinkFirst cd ThinkFirst -
Install dependencies
yarn install
-
Run the development server
npm run dev
-
Configure API Key
- Open the app in your browser (usually
http://localhost:3000/). - Click Start Thinking
- Click the Key Icon in the sidebar.
- Paste your Gemini API Key.
- Open the app in your browser (usually
ThinkFirst/
├── components/
│ ├── Playground.tsx # Main chat interface & Markdown rendering
│ ├── Header.tsx # Navigation header
│ ├── Hero.tsx # Landing page hero section
│ ├── Section.tsx # Reusable section layout
│ ├── CodeBlock.tsx # Code display component
│ ├── Button.tsx # Button component
│ └── ui/ # Animated UI components
├── services/
│ └── geminiService.ts # Gemini SDK implementation & stream handling
├── lib/
│ └── utils.ts # Utility functions
├── constants.ts # System Instructions (Prompts) & Persona definitions
├── types.ts # TypeScript type definitions
├── App.tsx # Main app component & routing
├── index.tsx # Application entry point
├── index.html # HTML template
├── vite.config.ts # Vite configuration
└── package.json # Dependencies & scripts
We are looking for contributions to expand the "Thinking" capabilities:
- Prompt Engineering: Refine existing personas in
constants.ts. - UI/UX: Improve the thinking flow visualization.
- Integrations: Connect with Notion or Obsidian.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Distributed under the MIT License. See LICENSE for more information.