A beautiful and intuitive web interface for exploring and visualizing your ChromaDB vector database. ChromaDB Viewer allows you to connect to any ChromaDB instance, browse collections, and explore embeddings with a modern, responsive UI featuring stunning gradients, animations, and a polished user experience.
- ✨ Beautiful UI: Modern interface with gradient text, animated backgrounds, and smooth transitions
- 🎨 Visual Design: Translucent panels with backdrop blur, decorative elements, and consistent color scheme
- 🔄 Smooth Animations: Fade-in and slide-up effects for a polished user experience
- 🔍 Enhanced Search: Stylish search input with instant filtering across all data fields
- ⚡ Interactive Data Table: Beautiful table with custom scrollbars and column sorting functionality
- 🔢 Smart Pagination: Elegant pagination controls with gradient highlighting for active page
- 📱 Responsive Design: Optimized layout that works beautifully on all devices
- 🌙 Dark Mode Support: Carefully designed dark theme with proper contrast and readability
- 🔄 Connect to Any ChromaDB: Works with both local and remote ChromaDB instances
- 📊 Embedding Visualization: Toggle view for vector embeddings with formatted display
- Node.js 18.x or later
- A running ChromaDB instance (local or remote)
- Clone the repository:
git clone https://github.com/Huzaifa-Saleem/chroma-viewer.git
cd chroma-viewer- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:3000 in your browser
- Enter your ChromaDB URL in the connection screen (e.g.,
http://localhost:8000) - Browse through your collections
- Select a collection to view its data
- Use the search bar to filter data
- Click on embeddings to expand and view them
To create an optimized production build:
npm run buildTo start the production server:
npm start- Next.js: React framework for server-rendered applications
- TypeScript: For type safety and better developer experience
- TailwindCSS: For responsive and beautiful UI
- ChromaDB Client: For connecting to ChromaDB instances
- Axios: For API requests
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- ChromaDB - The open-source embedding database
- Next.js - The React framework
- TailwindCSS - For the UI components
© 2025 Huzaifa Saleem. All Rights Reserved.