A web application implementing and improving upon the Tree of Thoughts framework for deliberate problem solving with Large Language Models, as described in the research paper by Yao et al.
Paper Reference: Tree of Thoughts: Deliberate Problem Solving with Large Language Models
Authors: Shunyu Yao, Dian Yu, Jeffrey Zhao, Izhak Shafran, Thomas L. Griffiths, Yuan Cao, Karthik Narasimhan
Published: NeurIPS 2023
This project implements the Tree of Thoughts (ToT) framework, which generalizes over the popular Chain of Thought approach to enable language models to perform deliberate decision making by considering multiple reasoning paths and self-evaluating choices. Our implementation extends the original research with a modern, interactive web interface and enhanced visualization capabilities.
Our implementation follows the ToT framework with these key components:
- Thought Generation: Multiple reasoning paths for each problem state
- State Evaluation: Self-assessment of intermediate solutions
- Search Strategy: Breadth-first or depth-first exploration
- Backtracking: Ability to revisit and revise previous decisions
frontend-vite/
├── src/
│ ├── App.tsx # Main application with ToT logic
│ ├── Tree.tsx # Interactive tree visualization
│ ├── PopupWindow.tsx # Node detail exploration
│ └── MathText.tsx # Mathematical expression rendering
Technologies:
- React 18 with TypeScript for type-safe development
- Vite for fast development and optimized builds
- Canvas API for high-performance tree rendering
- WebSocket for real-time communication with backend
backend/
├── main.py # FastAPI server with WebSocket endpoints
├── tree.py # ToT algorithm implementation
├── prompts.py # LLM prompt management
└── prompts.json # Structured prompt templates
Technologies:
- FastAPI for high-performance API endpoints
- Python 3.8+ for LLM integration and tree processing
- WebSocket for real-time bidirectional communication
- Structured Prompts for consistent LLM interactions
- Node.js 18+
- Python 3.8+
- Modern web browser
-
Clone the repository
git clone https://github.com/yourusername/tot.git cd tot -
Setup Backend (FastAPI + Python)
cd backend pip install -r requirements.txt python main.pyBackend will be available at
http://localhost:8000 -
Setup Frontend (React + Vite)
cd frontend-vite npm install npm run devFrontend will be available at
http://localhost:5173
- Dynamic Layout: Auto-sizing nodes with text wrapping
- Real-time Updates: Live tree modifications as thoughts develop
- Node Interaction: Click to explore detailed reasoning paths
- Responsive Scaling: Automatic zoom and pan for optimal viewing
- Glass-morphism Design: Beautiful translucent interfaces
- Smooth Animations: Fluid transitions and micro-interactions
- Responsive Layout: Optimized for all device sizes
- Dark Theme: Professional color scheme with purple-blue gradients
- WebSocket Integration: Instant message delivery and tree updates
- Live Collaboration: Multiple users can explore the same tree
- Message History: Persistent conversation with scrollable chat
- Typing Indicators: Visual feedback for active sessions
# Backend Configuration
BACKEND_PORT=8000
WEBSOCKET_PORT=8000
# Frontend Configuration
VITE_API_URL=ws://localhost:8000/ws
VITE_APP_TITLE=Tree of Thoughts- Tree Layout: Adjust node spacing and sizing in
Tree.tsx - Thinking Modes: Configure Normal, Swift, and Genius modes
- Visual Theme: Modify CSS custom properties for styling
- LLM Integration: Customize prompts in
prompts.json
# Frontend Development
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
# Backend Development
python main.py # Start FastAPI server
python -m pytest # Run tests (if implemented)- TypeScript: Strict mode enabled for type safety
- ESLint: Configured for React/TypeScript best practices
- Modular Design: Separated concerns between UI and logic
- Error Handling: Comprehensive error boundaries and validation
This project is licensed under the MIT License - see the LICENSE file for details.
Implementing the future of AI problem-solving with modern web technologies.