@sridhar-mani/chromadb-ui NPM

ChromaDB UI

A React UI library for ChromaDB that provides a complete interface for managing ChromaDB collections, including connection management, collection operations, and data visualization.

Features

Connection management with ChromaDB server
Collection creation and deletion
Collection listing and management
Support for custom embedding functions
Built with Tailwind CSS for modern, responsive design
TypeScript support
Zero-config setup with default embedding function

Installation

npm install chromadb-ui
# or
yarn add chromadb-ui

Requirements

1. Required Peer Dependencies

The following packages are required as peer dependencies:

npm install chromadb @xenova/transformers chromadb-default-embed

2. Tailwind CSS Configuration

This library uses Tailwind CSS utility classes. Your project must have Tailwind CSS installed and configured:

Install Tailwind in your project if you haven't already:

npm install -D tailwindcss
npx tailwindcss init

Configure your tailwind.config.js to include the chromadb-ui components:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/chromadb-ui/**/*.{js,jsx,ts,tsx}" // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Tailwind CSS in your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

Basic Usage

import { ChromaDBUI } from 'chromadb-ui';

function App() {
  return (
    <div>
      <ChromaDBUI />
    </div>
  );
}

With Custom Configuration

import { ChromaDBUI } from 'chromadb-ui';

function App() {
  return (
    <div>
      <ChromaDBUI
        defaultConfig={{
          serverUrl: 'http://localhost:8000',
          tenant: 'default_tenant',
          database: 'default_database'
        }}
      />
    </div>
  );
}

Individual Components Usage

You can also use individual components from the library:

import { 
  ChromaDBProvider, 
  ConnectionPanel, 
  CollectionsPanel 
} from 'chromadb-ui';

function App() {
  return (
    <ChromaDBProvider>
      <div className="p-6">
        <ConnectionPanel />
        <CollectionsPanel />
      </div>
    </ChromaDBProvider>
  );
}

API Reference

ChromaDBUI Props

Prop	Type	Description	Default
defaultConfig	ChromaDBConfig	Initial configuration for ChromaDB connection	undefined

ChromaDBConfig Interface

interface ChromaDBConfig {
  serverUrl: string;
  tenant?: string;
  database?: string;
}

ChromaDBProvider Context

The ChromaDBProvider context provides the following values:

interface ChromaDBContextType {
  client: ChromaClient | null;
  collections: string[];
  loading: boolean;
  error: string | null;
  connected: boolean;
  currentConfig: ConnectionConfig | null;
  embeddingFunction: any;
  connect: (config: ConnectionConfig) => Promise<void>;
  disconnect: () => void;
  createCollection: (params: CreateCollectionParams) => Promise<void>;
  deleteCollection: (name: string) => Promise<void>;
  refreshCollections: () => Promise<void>;
}

Development

Clone the repository

git clone https://github.com/yourusername/chromadb-ui.git
cd chromadb-ui

Install dependencies

npm install

Build

npm run build

Local Testing

To test the library locally:

Link the package:

npm link

In your test project:

npm link chromadb-ui

Make changes to the library
Rebuild the library:

npm run build

Changes will be reflected in your test project automatically.

Troubleshooting

Common Issues

Connection Issues
- Ensure ChromaDB server is running and accessible
- Check the server URL in your configuration
- Verify network connectivity
- Also ensure to set cors for the url of chromadb
Styling Issues
- Verify Tailwind CSS is properly configured
- Check if the content array in tailwind.config.js includes the chromadb-ui path
Build Issues
- Ensure all peer dependencies are installed
- Check TypeScript version compatibility