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)
- 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 OpenRouter API key.
- 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.