Chatbot Vortex

Status: demo — active public demo. Live · Release v1.1.0

Chatbot Vortex is a chat interface for working with multiple AI providers from a single place. The project lets you try the experience in local mode, connect providers with your own API key, and export conversations straight from the browser.

Demo

• Live demo: https://chatbot-vortex.vercel.app/
• Screenshot: Imagen/Chatbot-Vortex.png
• Default mode: offline (works with no API key)
• BYOK: paste your own provider key in Settings to call Gemini, Groq, OpenAI, DeepSeek, or OpenRouter from the browser
• Recommended use today: demos, flow validation, and bring-your-own-key testing

What it offers

• Built with React 19 + TypeScript (Vite, Tailwind CSS v4).
• Multiple providers in a single UI: Gemini, Groq, OpenAI, DeepSeek, OpenRouter, and local mode.
• Persistent in-browser history with export to JSON and Markdown.
• Conversation search by title and content from the sidebar.
• Attachments with basic analysis of images, PDFs, ZIPs, code, CSV, JSON, audio, and video.
• Configurable model, temperature, max tokens, and system prompt.
• Accessibility improvements: keyboard navigation, clearer focus states, and reduced motion when the system requests prefers-reduced-motion.
• Cancel an in-progress response, with visible status and error notices.

Client-facing use cases

This repository can accelerate prototypes for customer-support chat, internal knowledge assistants, file-review flows, and multi-provider model evaluation. The reusable evidence is the interaction layer: offline-first onboarding, BYOK settings, persistent searchable history, attachments, cancellation, error states, and JSON/Markdown export.

It should not be sold as a production multi-user support platform without a backend that protects provider credentials and adds authentication, quotas, audit logs, and server-side observability.

Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS v4
• Lucide React

Quick start

Requirements:

• Node.js 18 or higher

Installation:

git clone https://github.com/jc-morales-dev/Chatbot-Vortex.git
cd Chatbot-Vortex
npm ci
npm run dev

Production build:

npm run build

Available scripts

• npm run dev
• npm run build
• npm run preview
• npm run lint
• npm run typecheck
• npm run test
• npm run test:e2e

Quality

• GitHub Actions CI for lint, typecheck, unit tests, browser E2E, and build
• Live demo: https://chatbot-vortex.vercel.app/
• 14 unit tests (Vitest: src/**/*.test.ts) covering API helpers, chat titles/send guards, export JSON/Markdown, and file utilities
• 5 E2E journeys (Playwright: tests/e2e/*.spec.ts) for offline persistence, BYOK configuration/provider use, cancel/export smoke, and graceful fallback after a provider error
• Public changelog in CHANGELOG.md

Configuration

The app starts in offline mode by default. Current HEAD contains no bundled provider key, so you can try the interface without calling an external API.

If you want to use a real provider:

1. Open the settings button.
2. Choose a provider.
3. Paste your API key.
4. Save and test the connection.

Security

The current version works with your own API key. When you choose a real provider, the key is used directly from the browser.

Historical secret purged; keys are BYOK client-side only.

That's good for:

• demos
• personal use
• quick flow validation

It is not enough for:

• a multi-user product
• enterprise sales
• real quota control, billing, or abuse prevention

If the project evolves into a multi-user commercial version, the logical next step is to set up a backend or proxy that:

• receives requests from the frontend
• protects the keys
• enforces authentication, rate limits, and observability
• optionally stores history outside the browser

Structure

src/
├── components/
├── hooks/
├── types/
├── utils/
└── App.tsx

Current status

This version leaves the project in a much more solid state for demos, technical review, and iteration:

• secure configuration by default
• a more consistent interface
• data export
• stronger baseline accessibility
• clearer handling of errors and timeouts

Recommended next steps

1. Move provider calls to your own backend or proxy that protects the keys.
2. Add user authentication and plans.
3. Store history in a database or IndexedDB, not just localStorage.
4. Add analytics, rate limiting, and an admin panel.
5. Prepare a landing page, pricing, and a more complete public demo.

License

MIT. See the LICENSE file.