✨ Ditto - The UI That Builds Itself

A generative AI-powered application that creates interactive UI components on the fly based on natural language prompts. Built with React, TypeScript, and the Tambo AI SDK.

Live Demo: ditto-theta.vercel.app

---

Features

AI-Powered Component Generation

Describe what you need in plain English, and Ditto generates fully functional, styled components:

• Dashboard - Analytics with metrics and charts
• Task Tracker - Kanban board with drag-and-drop
• Notes Panel - Sticky notes with drag-to-workflow transformation
• ⏱Timer - Countdown timer and stopwatch with beautiful digit animations
• Focus Mode - Guided breathing exercises with visual feedback
• Readiness Score - Visual assessment gauge for project/startup readiness
• Pitch Generator - Structured business pitch deck content
• Task Prioritizer - AI-powered task ranking by impact
• 📈 LiveChart - Real-time cryptocurrency & stock price charts

Authentication

• Google Sign-In - Secure OAuth authentication
• Guest Mode - Continue as guest without signing up
• User Profile - Avatar display and logout functionality

Premium Design System

• Visual Realism: Multi-layered shadows, glassmorphism, and depth effects
• Smooth Animations: Powered by Framer Motion
• Dark/Light Themes: Toggle with Alt + T
• Fully Responsive: Works beautifully on mobile, tablet, and desktop

Keyboard Shortcuts

Shortcut	Action
⌘/Ctrl + K or /	Focus input
Alt + T	Toggle theme
Esc	Blur input

---

Tech Stack

Technology	Purpose
React 19	UI Framework
TypeScript	Type Safety
Vite	Build Tool & Dev Server
Tambo AI	Generative UI SDK
Firebase	Authentication
Framer Motion	Animations
Lucide React	Icons
Recharts	Data Visualization
CoinGecko API	Live Crypto Prices (Free)
Zod	Schema Validation

---

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• A Tambo AI API key
• A Firebase project (free tier)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/ditto.git
   cd ditto

2. Install dependencies

   npm install

3. Set up Firebase (for authentication)

   • Go to Firebase Console
   • Create a new project
   • Go to Authentication → Sign-in method
   • Enable Google and Anonymous providers
   • Go to Project Settings → Copy your config values

4. Set up environment variables

   Create a .env file in the root directory:

   # Tambo AI
   VITE_TAMBO_API_KEY=your_tambo_api_key
   
   # Firebase
   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id

5. Start the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:5173

---

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

---

Project Structure

ditto/
├── src/
│   ├── components/         # UI Components
│   │   ├── Dashboard.tsx
│   │   ├── TaskTracker.tsx
│   │   ├── NotesPanel.tsx
│   │   ├── Timer.tsx
│   │   ├── FocusMode.tsx
│   │   ├── ReadinessScore.tsx
│   │   ├── PitchGenerator.tsx
│   │   ├── TaskPrioritizer.tsx
│   │   ├── LiveChart.tsx      # Real-time price charts
│   │   └── LoginScreen.tsx    # Authentication UI
│   ├── contexts/
│   │   └── AuthContext.tsx    # Authentication state
│   ├── firebase/
│   │   ├── config.ts          # Firebase initialization
│   │   └── auth.ts            # Auth functions
│   ├── tambo/
│   │   └── registry.tsx    # Component registry for AI
│   ├── App.tsx             # Main application
│   ├── App.css             # Global styles
│   └── index.css           # Design tokens & variables
├── public/
├── .env                    # Environment variables (create this)
└── package.json

---

Usage Examples

Try these prompts in the app:

• "Create a task tracker for my job applications"
• "I need a 5-minute timer for meditation"
• "Help me relax with a breathing exercise"
• "Analyze if my startup idea is ready for funding"
• "Generate a pitch for my food delivery app"
• "Prioritize my tasks for today"
• "Show me live Bitcoin chart" 📈
• "Display Ethereum price" 📈
• "Show Tesla stock price" 📈 (simulated)

---

Deployment

This project is deployed on Vercel. To deploy your own instance:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel settings:
   • VITE_TAMBO_API_KEY
   • VITE_FIREBASE_API_KEY
   • VITE_FIREBASE_AUTH_DOMAIN
   • VITE_FIREBASE_PROJECT_ID
   • VITE_FIREBASE_STORAGE_BUCKET
   • VITE_FIREBASE_MESSAGING_SENDER_ID
   • VITE_FIREBASE_APP_ID
4. Deploy!

---

Live Data APIs

Data Type	API	Cost	Status
Crypto (BTC, ETH, SOL)	CoinGecko	Free	✅ Live
Stocks (TSLA, AAPL, etc.)	Simulated	Free	📊 Simulated

---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

License

This project is open source and available under the MIT License.

---

Made with ❤️ by Bharath Kumar and Mithilesh