A sleek, modern web application that brings together the power of AI chat, speech-to-text, and image generation in one seamless experience. Built with Next.js, TypeScript, and Tailwind CSS for optimal performance and user experience.
Built with the tools and technologies:
- Model Selection: Choose from multiple powerful AI models via Groq API:
- GPT-OSS 120B (Default) - OpenAI's powerful open-source model
- Llama 3.3 70B Versatile - Meta's versatile large language model
- Kimi K2 Instruct - MoonshotAI's instruction-following model
- Groq Compound Mini - Groq's efficient compound model
- Speech-to-Text: Voice input support using Whisper large-v3-turbo model
- Real-time Conversations: Engage in natural, flowing conversations with advanced AI models
- Markdown Support: Rich text formatting with full markdown rendering support
- Code Highlighting: Beautiful syntax highlighting for code blocks
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- One-Click Generation: Create stunning AI-generated images with simple prompts
- Multiple Models: Support for various image generation models via Replicate
- High-Quality Output: Powered by state-of-the-art image generation models
- Instant Results: Fast processing and display of generated images
- Voice Input: Click-to-record microphone button for hands-free text input
- Real-time Transcription: Powered by Groq's Whisper large-v3-turbo model
- Seamless Integration: Transcribed text automatically appears in chat input
- Dark/Light Mode: Seamless theme switching for comfortable viewing
- Clean Interface: Minimalist design focusing on functionality and aesthetics
- Smooth Animations: Polished interactions and transitions
- Accessible: Built with accessibility best practices in mind
Make sure you have the following installed on your system:
- Node.js v18.0.0 or higher (Download here)
- npm or yarn package manager
- Git for version control
-
Clone the repository
❯ git clone https://github.com/cidopenup/app0.git ❯ cd app0 -
Install dependencies
❯ npm install # or ❯ yarn install -
Set up environment variables
Create a
.env.localfile in the root directory:# On Windows ❯ echo. > .env.local # On macOS/Linux ❯ touch .env.local
-
Configure your API keys
Add the following to your
.env.localfile:# Groq API Key (for AI Chat and Speech-to-Text) # Get your API key from https://console.groq.com/keys GROQ_API_KEY=your_groq_api_key_here # Replicate API Token (for Image Generation) # Get your API token from https://replicate.com/account/api-tokens REPLICATE_API_TOKEN=your_replicate_api_key_here
🔑 Getting API Keys:
- Groq: Sign up at console.groq.com and create an API key
- Replicate: Sign up at replicate.com and get your API token
- Replace the placeholder values with your actual API keys
Start the development server:
npm run dev
# or
yarn dev🎉 That's it! Open http://localhost:3000 in your browser to start using App0.
- Multi-model Support: Switch between different AI models in real-time
- Conversation History: Full conversation context maintained across messages
- Voice Input: Click the microphone button to speak your queries
- Smart Formatting: Automatic markdown rendering with syntax highlighting
- Copy Messages: Easy copy functionality for both user and AI messages
- One-Click Recording: Simple microphone button interface
- Real-time Processing: Instant transcription using Whisper large-v3-turbo
- Visual Feedback: Clear recording and processing states
- Seamless Integration: Transcribed text appears directly in the input field
- Multiple Models: Support for Flux, SDXL, and other state-of-the-art models
- Instant Preview: Generated images appear immediately
- High Quality: Professional-grade image output
app0/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ ├── chat/ # Chat page
│ ├── image/ # Image generation page
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── chat.tsx # Main chat component
│ └── image-generation.tsx
├── lib/ # Utility functions
├── hooks/ # Custom React hooks
└── styles/ # Global styles