LocalMode
React

Import / Export

React hook for importing and exporting vector data with progress tracking, preview, and cancellation.

Import / Export Hook

See it in action

Try the Knowledge Base block for a working demo of these hooks — its Data tab runs Pinecone/CSV/JSONL import and export against a live in-browser corpus.

useImportExport

Import vectors from Pinecone, ChromaDB, CSV, or JSONL, and export to CSV or JSONL — with progress tracking, preview, and cancellation.

import { useImportExport } from '@localmode/react';
import { createVectorDB } from '@localmode/core';
import { transformers } from '@localmode/transformers';

const db = await createVectorDB({ name: 'docs', dimensions: 384 });
const model = transformers.embedding('Xenova/bge-small-en-v1.5');

function DataMigrator() {
  const {
    importData, parsePreview, exportCSV, exportJSONL,
    isImporting, isParsing, isExporting,
    progress, stats, parseResult, error,
    cancel, reset,
  } = useImportExport({ db, model });

  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const content = await file.text();

    // Preview first
    await parsePreview({ content });
  };

  const handleImport = async (content: string) => {
    await importData({ content, format: 'pinecone' });
  };

  return (
    <div>
      <input type="file" onChange={handleFile} accept=".json,.csv,.jsonl" />

      {isParsing && <p>Parsing...</p>}
      {parseResult && <p>Found {parseResult.records.length} records ({parseResult.format})</p>}

      {isImporting && progress && (
        <p>Importing: {progress.completed}/{progress.total}</p>
      )}
      {stats && <p>Imported {stats.imported}, skipped {stats.skipped}, failed {stats.failed}</p>}

      <button onClick={exportCSV} disabled={isExporting}>Export CSV</button>
      <button onClick={exportJSONL} disabled={isExporting}>Export JSONL</button>

      {isImporting && <button onClick={cancel}>Cancel</button>}
      {error && <p className="text-error">{error.message}</p>}
    </div>
  );
}

Options

Prop

Type

Return Value

Prop

Type

Supported Formats

FormatDetectionDescription
'pinecone'vectors key in JSONPinecone export format ({ id, values, metadata })
'chroma'ids + embeddings arraysChromaDB export format (parallel arrays)
'csv'Comma-separated with headersCSV with id, vector, text, metadata columns
'jsonl'One JSON object per lineJSON Lines with id, vector/embedding, text, metadata

Format is auto-detected if omitted. Pass format explicitly if auto-detection produces wrong results.

Re-embedding Text-Only Records

When importing records that have text but no vectors (e.g., a CSV with only id and text columns), pass an embeddingModel to compute vectors automatically:

const { importData } = useImportExport({
  db,
  model: transformers.embedding('Xenova/bge-small-en-v1.5'),
});

// Records without vectors will be embedded using the model
await importData({ content: csvWithTextOnly });

For full import/export API reference including importFrom(), parseExternalFormat(), exportToCSV(), format specifications, and error handling, see the Core Import/Export guide.

Blocks

AppDescriptionLinks
Knowledge Base (Semantic Search)Export and import vector indexes with useImportExportLive block · Source
Knowledge Base (Data Migrator)Migrate vectors between formats with useImportExportLive block · Source

On this page