Thoughtcast - Voice to Tweet

Transform your voice notes into polished, on-brand tweets ready for social media posting.

🚀 Features

🎤 Voice Recording

• Real-time speech recognition using Web Speech API
• Visual feedback with animated waveforms during recording
• Continuous recording with interim results
• Cross-browser compatibility (Chrome, Edge, Safari)

🤖 AI-Powered Tweet Generation

• 6 different tweet styles generated from your voice notes
• Professional, Casual, Engaging, Thread-worthy, Quote-style, and Question-based variations
• Character count tracking to stay within Twitter's 280-character limit
• Hashtag suggestions and optimization

📝 Thought History

• Automatic saving of all voice notes to local storage
• Persistent history across browser sessions
• Easy browsing with timestamps and status indicators
• One-click loading of previous thoughts
• Delete functionality for managing your history
• Smart storage management (keeps last 50 thoughts)

🎨 Beautiful UI/UX

• Glass morphism design with backdrop blur effects
• Responsive layout optimized for mobile and desktop
• Smooth animations and micro-interactions
• Intuitive navigation with sticky navbar
• Toast notifications for user feedback

🛠️ Tech Stack

• Framework: Next.js 13.5.1 with App Router
• Language: TypeScript
• Styling: Tailwind CSS with custom animations
• UI Components: Radix UI primitives with shadcn/ui
• Icons: Lucide React
• AI Integration: OpenAI GPT-3.5-turbo API
• Speech Recognition: Web Speech API
• Storage: Browser Local Storage
• Notifications: Sonner toast library

📋 Prerequisites

Before running this project, make sure you have:

• Node.js (version 18 or higher)
• npm or yarn package manager
• OpenAI API Key (Get one here)
• Modern browser with Web Speech API support (Chrome, Edge, Safari)

🚀 Getting Started

1. Clone the Repository

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

2. Install Dependencies

npm install
# or
yarn install

3. Run the Development Server

npm run dev
# or
yarn dev

4. Open Your Browser

Navigate to http://localhost:3000 to see the application.

5. Add Your OpenAI API Key

1. Click on the API key input field in the app
2. Enter your OpenAI API key (starts with sk-)
3. The key is securely stored in your browser's local storage

🎯 How to Use

Recording Voice Notes

1. Click the microphone button to start recording
2. Speak naturally - the app will transcribe in real-time
3. Click again to stop recording
4. Edit the transcript if needed in the text area

Generating Tweets

1. Enter your OpenAI API key in the designated field
2. Click "Generate Tweet Options" after recording
3. Choose from 6 different styles:
   • Professional: Formal, business-like tone
   • Casual: Friendly, conversational tone
   • Engaging: Interactive with questions
   • Thread-worthy: Designed to start conversations
   • Quote-style: Formatted as inspirational quotes
   • Question-based: Ends with thought-provoking questions

Managing History

1. Click the History button in the navbar
2. Browse your saved thoughts with timestamps
3. Click any thought to reload it
4. Hover and click the trash icon to delete thoughts

🔧 Configuration

Environment Variables

The app uses client-side API calls, so no server-side environment variables are needed. Your OpenAI API key is stored securely in your browser's local storage.

Customization

You can customize the app by modifying:

• Tailwind config (tailwind.config.ts) for styling
• Component styles in app/globals.css
• Tweet generation prompts in app/api/generate-tweets/route.ts

📱 Browser Compatibility

Fully Supported

• Chrome (desktop & mobile)
• Edge (desktop & mobile)
• Safari (desktop & mobile)

Limited Support

• Firefox: No Web Speech API support (manual text input only)

🔒 Privacy & Security

• Local-first approach: All data stored in your browser
• No server storage: Voice notes never leave your device
• Secure API calls: Direct browser-to-OpenAI communication
• No tracking: No analytics or user tracking implemented

🚀 Deployment

Deploy to Vercel (Recommended)

1. Push to GitHub
2. Connect to Vercel
3. Deploy automatically

npm run build
npm run start

Deploy to Netlify

npm run build
# Upload the 'out' folder to Netlify

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Tailwind CSS for styling
• Maintain responsive design
• Add proper error handling
• Write descriptive commit messages

🐛 Troubleshooting

Common Issues

Speech Recognition Not Working

• Ensure you're using a supported browser (Chrome, Edge, Safari)
• Check microphone permissions
• Try refreshing the page

API Key Issues

• Verify your OpenAI API key is correct
• Check your OpenAI account has sufficient credits
• Ensure the key has proper permissions

Build Errors

# Clear Next.js cache
rm -rf .next
npm run dev

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• OpenAI for the GPT API
• Vercel for Next.js framework
• Radix UI for accessible components
• Tailwind CSS for styling system
• Lucide for beautiful icons

📞 Support

If you have questions or need help:

• Open an issue on GitHub
• Check the troubleshooting section above
• Review the documentation in this README

---

Made with ❤️ by the Thoughtcast team

Transform your thoughts into tweets, one voice note at a time! 🎤✨