import { useState } from 'react'; import { Play, Database, Search, Layers } from 'lucide-react'; export default function TechnicalDemo() { const [activeTab, setActiveTab] = useState('overview'); const codeExamples = { python: `import chromadb # Initialize client client = chromadb.Client() # Create collection collection = client.create_collection("documents") # Add documents with embeddings collection.add( documents=["doc1", "doc2", "doc3"], embeddings=[[1.1, 2.3], [4.5, 6.9], [7.1, 8.2]], ids=["id1", "id2", "id3"] ) # Search results = collection.query( query_embeddings=[[1.1, 2.3]], n_results=2 )`, javascript: `const { ChromaClient } = require('chromadb'); // Initialize client const client = new ChromaClient(); // Create collection const collection = await client.createCollection("documents"); // Add documents await collection.add({ ids: ["id1", "id2", "id3"], embeddings: [[1.1, 2.3], [4.5, 6.9], [7.1, 8.2]], documents: ["doc1", "doc2", "doc3"] }); // Search const results = await collection.query({ queryEmbeddings: [[1.1, 2.3]], nResults: 2 });` }; return (

See Chroma in Action

Experience the simplicity and power of Chroma vector database through our interactive demo

{activeTab === 'overview' && (

Easy Setup

Get started in minutes with simple API

Fast Search

Sub-100ms query latency at scale

Multi-modal

Support for text, images, and more

)} {activeTab === 'code' && ( 
                  {codeExamples.python}
)} {activeTab === 'performance' && (

Query Performance

1M vectors < 50ms
10M vectors < 100ms
100M vectors < 200ms

Scalability

Horizontal scaling ✓
Auto-sharding ✓
Replication ✓
)}
); }