Generative UI Data Table (generative-ui/table-catalog.tsx)

OpenIntelligentUI · apps/app/src/components/generative-ui/table-catalog.tsx · typescript · MIT
ai, ui, fw:zod, fw:react, tag:catalog

A2UI catalog component that renders AI-generated tables with a Zod schema validating title, columns, rows, and source provenance. Reuse when assistants need to emit tabular data safely.

// Source: https://github.com/CopilotKit/OpenIntelligentUI | License: MIT | Copyright Atai Barkai
// Provided via justclaw.it.com; keep this notice with the code.
"use client";

import { createCatalog } from "@copilotkit/a2ui-renderer";
import { z } from "zod";

export const TableProps = z.object({
  title: z.string().max(300),
  columns: z.array(z.string().max(200)).min(1).max(12),
  rows: z.array(z.array(z.string().max(2000)).max(12)).max(200),
  source: z
    .string()
    .max(1000)
    .describe(
      "Data provenance: user-provided, calculated, sourced, or explicitly illustrative.",
    ),
});

export function DataTable({ props }: { props: z.infer<typeof TableProps> }) {
  const parsed = TableProps.safeParse(props);
  if (
    !parsed.success ||
    parsed.data.rows.some((row) => ro

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key