Knowledge Graph Demo

Features

Usage Example

import { KnowledgeGraphView } from 'ai-ui-kit';

const graphData = {
  nodes: [
    { id: 'node1', label: 'Node 1', category: 'person', color: '#3b82f6' },
    { id: 'node2', label: 'Node 2', category: 'organization', color: '#10b981' }
  ],
  edges: [
    { id: 'edge1', source: 'node1', target: 'node2', label: 'works at' }
  ]
};

const categories = [
  { id: 'person', name: 'Person', color: '#3b82f6', visible: true },
  { id: 'organization', name: 'Organization', color: '#10b981', visible: true }
];

<KnowledgeGraphView
  data={graphData}
  categories={categories}
  layout={{ name: 'cose', animate: true }}
  onNodeClick={(event) => console.log('Node clicked:', event.target)}
/>