Framework-agnostic core for TenUI Generative UI library
npm install @tenui/coreFramework-agnostic core for TenUI — a Generative UI library that maps AI tool responses to UI components.
``bash`
yarn add @tenui/core
`typescript
import { createGenerativeUI } from '@tenui/core';
// Define your UI configuration
const ui = createGenerativeUI()
.extract(({ apiResponse }) => {
// Extract tool calls from your API response format
return apiResponse.tools.map(t => ({ tool: t.name, args: t.arguments }));
})
.onTool('create_task')
.component(TaskCard)
.map((args) => ({
title: args.title,
description: args.description
}))
.key((args) => args.taskId)
.end()
.fallback(UnknownTool)
.done();
// Resolve to render nodes
const nodes = ui.resolve({ apiResponse });
// nodes: [{ tool, key, Component, props, rawArgs }]
`
Creates a new builder instance. Optional generic TCtx defines your context type.
Defines how to extract ToolCall[] from your context object.
`ts`
.extract((ctx: MyContext) => [
{ tool: 'name', args: { ... } }
])
Starts a chain to define a component binding for the specified tool.
Sets the component to render (required).
Transforms tool arguments into component props.
`ts`
.map((args, ctx) => ({ title: args.title }))
Generates a stable key for React reconciliation.
`ts`
.key((args) => args.id)
Completes the tool binding and returns to the root builder.
Sets a component to render for unregistered tools.
Finalizes the builder and returns the resolver instance.
`typescript
interface ToolCall {
tool: string;
args: any;
}
interface RenderNode {
tool: string;
key: string;
Component: any;
props: any;
rawArgs: any;
}
`
`bash``
yarn test
MIT