Vector Field

The Vector Field component displays vector embeddings used in AI/ML applications. This is a read-only field that shows a preview of the embedding values and dimensionality.

Basic Usage

Basic Vector Display

Different Dimensions

High Dimensional Vector

Field Schema

interface VectorFieldSchema {
  type: 'vector';
  name: string;                  // Field name/ID
  label?: string;                // Field label
  value?: number[];              // Vector array
  readonly: true;                // Always read-only
  className?: string;            // Additional CSS classes
  
  // Vector Options
  dimensions?: number;           // Vector dimensionality
}

Display Format

Vectors are displayed with a preview:

[0.1234, -0.5678, 0.9012...] (768D)

Shows:

First 3 values (formatted to 4 decimal places)
Total dimensionality in parentheses

Common Embedding Dimensions

Different AI models use different embedding sizes:

OpenAI text-embedding-3-small: 512, 1536, or 3072 dimensions (configurable)
OpenAI text-embedding-3-large: 256, 1024, or 3072 dimensions (configurable)
OpenAI text-embedding-ada-002: 1536 dimensions (fixed)
Sentence Transformers (BERT): 768 dimensions
OpenAI CLIP: 512 dimensions
Word2Vec: 100-300 dimensions
Custom Models: Variable dimensions

Data Format

Vectors are stored as arrays of floating-point numbers:

// Example embedding
const embedding: number[] = [
  0.1234, -0.5678, 0.9012, 0.3456, -0.7890,
  // ... 763 more values for 768D embedding
];

Cell Renderer

In tables/grids, displays compact preview:

import { VectorCellRenderer } from '@object-ui/fields';

// Renders: [0.1234, -0.5678, 0.9012...] (768D)

Vector Operations

Common operations with vector fields (performed on backend):

Similarity Search

// Find similar vectors using cosine similarity
const findSimilar = async (queryVector: number[], limit: number = 10) => {
  return await db.raw(`
    SELECT 
      id,
      1 - (embedding <=> $1) as similarity
    FROM documents
    ORDER BY embedding <=> $1
    LIMIT $2
  `, [queryVector, limit]);
};

Distance Metrics

Cosine Similarity: Measures angle between vectors
Euclidean Distance: Straight-line distance
Dot Product: Inner product of vectors

Use Cases

Semantic Search: Find similar documents, products, or content
Recommendation Systems: Product recommendations, content suggestions
Text Analysis: Document clustering, topic modeling
Image Search: Similar image finding, visual search
Anomaly Detection: Identify outliers in data
AI Applications: Any machine learning feature vectors

Backend Implementation

Example vector storage and search:

// PostgreSQL with pgvector extension
import { Client } from 'pg';

// Create table with vector column
const createTable = async () => {
  await db.raw(`
    CREATE TABLE IF NOT EXISTS documents (
      id SERIAL PRIMARY KEY,
      content TEXT,
      embedding vector(768)
    );
    
    CREATE INDEX ON documents 
    USING ivfflat (embedding vector_cosine_ops);
  `);
};

// Generate embedding (using OpenAI)
const generateEmbedding = async (text: string): Promise<number[]> => {
  const response = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: text
  });
  return response.data[0].embedding;
};

// Store document with embedding
const storeDocument = async (content: string) => {
  const embedding = await generateEmbedding(content);
  return db.insert('documents', {
    content,
    embedding
  });
};

// Search similar documents
const searchSimilar = async (query: string, limit = 10) => {
  const queryEmbedding = await generateEmbedding(query);
  return db.raw(`
    SELECT 
      id,
      content,
      1 - (embedding <=> $1::vector) as similarity
    FROM documents
    ORDER BY embedding <=> $1::vector
    LIMIT $2
  `, [queryEmbedding, limit]);
};

Database Support

Vector storage is supported by:

PostgreSQL: pgvector extension
Pinecone: Specialized vector database
Weaviate: Vector search engine
Milvus: Open-source vector database
Qdrant: Vector similarity search engine
Chroma: AI-native embedding database

Performance Considerations

Indexing: Use approximate nearest neighbor (ANN) indices
Quantization: Consider dimension reduction for storage
Batch Operations: Generate embeddings in batches
Caching: Cache frequently used embeddings
Async Generation: Generate embeddings asynchronously

Example: Semantic Search

// 1. Generate embedding for user query
const query = "Find documentation about authentication";
const queryEmbedding = await generateEmbedding(query);

// 2. Search for similar documents
const results = await db.raw(`
  SELECT 
    id,
    title,
    content,
    1 - (embedding <=> $1::vector) as similarity
  FROM documents
  WHERE 1 - (embedding <=> $1::vector) > 0.7
  ORDER BY embedding <=> $1::vector
  LIMIT 10
`, [queryEmbedding]);

// 3. Display results with similarity scores
results.forEach(doc => {
  console.log(`${doc.title} (${(doc.similarity * 100).toFixed(1)}% match)`);
});

Vector Field

Basic Vector Display

High Dimensional Vector

On this page