Remix

Make your own version of Misco AI

Edit the prompt below and generate a customized version in seconds.

Original by Lukas de Kleijn

Describe your app

Build a modern, sleek AI web application named "Misco AI" using React, Tailwind CSS, and Lucide icons. The design must feature a dark theme (inspired by ChatGPT/Claude) with `#0b0f17` background, emerald primary accents (`#10b981`), and smooth transitions.

Key Architecture & Features:

1. Layout & Navigation:
   - Sidebar: Collapsible sidebar for chat history with a "New Chat" button and dynamic past items.
   - Main View: Dynamic header with sidebar toggle, welcome screen with starter prompt cards, and a auto-scrolling message list.
   - Bottom Dock: Fixed input bar with attachment icon, text input (supporting Enter key to send), active mode indicator, and a send button.

2. Three Distinct Modes (Switchable Chips under Input):
   - Chat Mode: Generates dynamic text responses in Dutch using free, public open-source LLM endpoints (with graceful fallback handling so it never hangs).
   - Image Mode: Fetches high-quality dynamic images based on the user prompt (using free image APIs like Unsplash Source or Picsum). Display a square 36x36px download icon button at the bottom-right of the generated image.
   - Video Mode: Displays an interactive custom video player preview. Include a matching square 36x36px download icon button next to/below the player.

3. UI Details & Download Buttons:
   - All media download action buttons MUST be strictly square (36x36px), styled with rounded corners (`rounded-lg`), using emerald accent colors, containing only a Lucide `Download` icon (no text).
   - Add clear loading indicators (spinners) during state transitions.
   - Fully responsive for desktop and mobile views.

Free to use. No credit card required.