A beautiful and interactive web application that deconstructs words into their meaningful parts and explains their etymology. Built with Next.js, React Flow, and powered by AI.
- 🔍 Interactive word analysis
- 🌳 Beautiful visualization of word components using React Flow
- 📚 Detailed etymology and meaning breakdowns
- 🎨 Dark mode
- ⚡ Real-time updates and animations
- 🧠 AI-powered word deconstruction using OpenRouter API
Before you begin, ensure you have:
- Node.js 18+ installed
- An OpenRouter API key (get one at OpenRouter)
- A Google Gemini API key (get one at Google AI Studio)
- Clone the repository:
git clone https://github.com/hyusap/deconstructor.git
cd deconstructor- Install dependencies:
bun install- Set up environment variables:
cp example.env .env.localThen edit .env.local and add your API keys:
# Get your OpenRouter API key from https://openrouter.ai/
OPENROUTER_API_KEY=your_openrouter_api_key_here
# Get your Gemini API key from https://aistudio.google.com/app/apikey
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here- Run the development server:
bun dev- Open http://localhost:3000 with your browser to see the result.
The Word Deconstructor breaks down words into their constituent parts:
- Enter any word in the input field
- The AI analyzes the word's etymology and components
- A beautiful graph visualization shows:
- Individual word parts
- Their origins (Latin, Greek, etc.)
- Meanings of each component
- How components combine to form the full word
- Next.js - React framework
- React Flow - Graph visualization
- Tailwind CSS - Styling
- OpenRouter AI - AI-powered word analysis
- TypeScript - Type safety
- Jotai - State management
Contributions are welcome! Please feel free to submit a Pull Request.