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