Skip to content

KnowledgeBaseManager

KnowledgeBaseManager provides a complete administration interface for managing knowledge base stores and their documents. It supports listing stores, viewing documents, uploading new documents, deleting documents, and managing ground truth information.

Import

import { KnowledgeBaseManager } from "@modernpath/agent-ui-react";

Props

Name Type Required Default Description
backendUrl string Yes -- Base URL of the KB Admin API (e.g., "https://api.example.com"). All API requests are sent to endpoints under this URL.
getAccessToken () => Promise<string> No -- Async function that returns an access token. When provided, the token is included as a Bearer token in the Authorization header of all API requests.
getAuthorizationHeader () => Promise<string> No -- Async function that returns the full Authorization header value. Use this for custom authorization schemes. Takes precedence over getAccessToken if both are provided.

Authentication

Provide either getAccessToken (for Bearer token auth) or getAuthorizationHeader (for custom auth schemes), but not both. If neither is provided, requests are sent without authentication.

Types

KnowledgeBaseStore

interface KnowledgeBaseStore {
  /** Unique store identifier */
  id: string;

  /** Display name of the store */
  name: string;

  /** Optional description */
  description?: string;

  /** Number of documents in the store */
  documentCount: number;

  /** Store creation timestamp */
  createdAt: string;

  /** Last modification timestamp */
  updatedAt: string;
}

KnowledgeBaseDocument

interface KnowledgeBaseDocument {
  /** Unique document identifier */
  id: string;

  /** Document file name */
  name: string;

  /** MIME type */
  mimeType: string;

  /** File size in bytes */
  sizeBytes: number;

  /** Document metadata */
  metadata: KnowledgeBaseDocumentMetadata;

  /** Ground truth information (if configured) */
  groundTruth?: KnowledgeBaseGroundTruthInfo;

  /** Upload timestamp */
  createdAt: string;
}

KnowledgeBaseDocumentMetadata

interface KnowledgeBaseDocumentMetadata {
  /** Original file name */
  originalName: string;

  /** Source of the document (e.g., "upload", "sharepoint", "url") */
  source: string;

  /** Custom metadata key-value pairs */
  custom?: Record<string, string>;
}

KnowledgeBaseGroundTruthInfo

interface KnowledgeBaseGroundTruthInfo {
  /** Whether ground truth is configured for this document */
  enabled: boolean;

  /** Number of ground truth Q&A pairs */
  pairsCount: number;

  /** Last ground truth update timestamp */
  updatedAt?: string;
}

Features

Store List

The left panel displays all knowledge base stores with their name, document count, and timestamps. Clicking a store loads its documents in the right panel.

Document List

The right panel shows documents in the selected store as a table with columns:

  • Name -- document file name with MIME type icon
  • Size -- human-readable file size
  • Source -- source badge (upload, SharePoint, URL)
  • Ground Truth -- indicator showing if ground truth is configured
  • Uploaded -- relative upload timestamp
  • Actions -- delete button

Document Upload

A file upload area at the top of the document list allows administrators to drag-and-drop or browse for files. Supported file types include PDF, TXT, HTML, DOCX, and other document formats.

Ground Truth Management

For each document, administrators can view and manage ground truth Q&A pairs. Ground truth data is used for evaluation and testing of the RAG pipeline.

Delete Confirmation

Deleting a document or store requires confirmation via a dialog to prevent accidental data loss.

Usage

Basic Knowledge Base Manager

import { KnowledgeBaseManager } from "@modernpath/agent-ui-react";

function AdminPage() {
  return (
    <KnowledgeBaseManager
      backendUrl="https://api.example.com"
      getAccessToken={async () => {
        const response = await fetch("/auth/token");
        const data = await response.json();
        return data.accessToken;
      }}
    />
  );
}

With Custom Authorization

import { KnowledgeBaseManager } from "@modernpath/agent-ui-react";

function AdminWithCustomAuth() {
  return (
    <KnowledgeBaseManager
      backendUrl="https://api.example.com"
      getAuthorizationHeader={async () => {
        const apiKey = await getApiKey();
        return `ApiKey ${apiKey}`;
      }}
    />
  );
}

Embedded in a Dashboard

import { KnowledgeBaseManager } from "@modernpath/agent-ui-react";

function Dashboard() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 24 }}>
      <nav>{/* Navigation sidebar */}</nav>
      <main>
        <h1>Knowledge Base Administration</h1>
        <KnowledgeBaseManager
          backendUrl={process.env.REACT_APP_API_URL!}
          getAccessToken={async () => localStorage.getItem("token")!}
        />
      </main>
    </div>
  );
}

API Endpoints

The component communicates with the following endpoints on the backendUrl:

Method Endpoint Description
GET /kb/stores List all knowledge base stores
GET /kb/stores/:storeId/documents List documents in a store
POST /kb/stores/:storeId/documents Upload a document (multipart)
DELETE /kb/stores/:storeId/documents/:docId Delete a document
GET /kb/stores/:storeId/documents/:docId/ground-truth Get ground truth for a document
PUT /kb/stores/:storeId/documents/:docId/ground-truth Update ground truth for a document

These endpoints are served by the KBAdminService in the backend framework.