Myxler

A modern, client-side AI chat application built with React and Vite. This application allows you to interact with advanced AI models directly from your browser offering a clean, responsive interface.

🌟 Features

• Multi-Provider Support: Chat with top-tier AI models:
• Multi-Provider Support: Chat with top-tier AI models:
  - Claude 3.5 Sonnet (via Anthropic)
  - Llama 3.1 Sonar (via Perplexity)
  - Gemini (via Google Generative Language API)
• Rich Text & Markdown: Full support for Markdown rendering including:
  • Syntax highlighting for code blocks
  • Tables, lists, and headers
  • formatted text (bold, italic, etc.)
• Chat Management:
  • Export History: Save chats as Text (.txt), Markdown (.md), or JSON (.json).
  • Copy & Paste: One-click copy for messages and code blocks.
• Client-Side Architecture: No backend required. All API requests are made directly from your browser.
• Privacy Focused: API keys are stored only in memory and are cleared automatically when you refresh the page.
• Modern UI: Built with a sleek, responsive design using Tailwind CSS and shadcn/ui.

🛠️ Tech Stack

• Framework: React + Vite
• Language: TypeScript
• Styling: Tailwind CSS
• Components: shadcn/ui (Radix UI based)
• Markdown Rendering: react-markdown + react-syntax-highlighter + remark-gfm
• Icons: Lucide React
• State/Data Fetching: TanStack Query

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm, yarn, or bun

Installation

1. Clone the repository

   git clone <repository-url>
   cd myxler

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open the app
   Visit http://localhost:8080 (or the port shown in your terminal).

🔑 Configuration

To start chatting, you will need an API key from one of the supported providers:

1. Click the Settings (gear icon) in the header.
2. Enter your API key for:
   • Anthropic (starts with sk-ant-...)
   • Perplexity (starts with pplx-...)
3. Click Save Keys.

Note: Since this is a client-side app using "dangerous" direct browser access APIs, you might see warnings in the console or network tab regarding CORS if not properly handled by the providers. The app includes the necessary headers (anthropic-dangerous-direct-browser-access) to make this work for experimental/dev use.

⚠️ Security Notice

This application performs API calls directly from your browser to AI providers.

• API Keys: Your keys are never sent to any third-party server other than the respective AI provider (Anthropic or Perplexity).
• Storage: Keys are held in React state (memory) and are lost upon page reload. They are NOT stored in LocalStorage or cookies.

📄 License

This project is open source.