mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-03 04:18:15 +08:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
112496c202 |
@@ -32,7 +32,7 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
@@ -124,7 +124,7 @@ function Dashboard({ spec }) {
|
||||
|
||||
```tsx
|
||||
import { defineRegistry, Renderer } from "@json-render/react";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
|
||||
// Flat spec format (root key + elements map)
|
||||
const spec = {
|
||||
@@ -152,7 +152,8 @@ const { registry } = defineRegistry(catalog, { components });
|
||||
|
||||
```tsx
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema, defineRegistry, Renderer } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { defineRegistry, Renderer } from "@json-render/react";
|
||||
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
|
||||
import { shadcnComponents } from "@json-render/shadcn";
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ A2UI uses an adjacency list model - a flat list of components with ID references
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
// A2UI BoundValue schema
|
||||
|
||||
@@ -90,7 +90,7 @@ Define a catalog matching the Adaptive Cards element types:
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
// Common Adaptive Cards properties
|
||||
|
||||
@@ -151,7 +151,7 @@ Create a catalog for UI components that agents can render:
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const aguiCatalog = defineCatalog(schema, {
|
||||
|
||||
@@ -11,7 +11,7 @@ Creates a type-safe catalog definition with schema validation.
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
|
||||
function defineCatalog<T extends ZodType>(
|
||||
s: T,
|
||||
@@ -119,7 +119,7 @@ The schema for flat UI element trees. This is exported from @json-render/react.
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
|
||||
// schema defines:
|
||||
// - Spec shape: { root: string, elements: Record<string, UIElement> }
|
||||
|
||||
@@ -19,7 +19,7 @@ A catalog is the vocabulary for your UI. While the [schema](/docs/schemas) defin
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react'; // or '@json-render/react-native'
|
||||
import { schema } from '@json-render/react/schema'; // or '@json-render/react-native/schema'
|
||||
import { z } from 'zod';
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -100,7 +100,7 @@ Create components that map to OpenAPI data types:
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const openapiCatalog = defineCatalog(schema, {
|
||||
|
||||
@@ -23,7 +23,7 @@ A catalog declares what AI can use: components with typed props, actions with ty
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -12,7 +12,7 @@ Create a catalog that defines what components AI can use:
|
||||
```typescript
|
||||
// lib/catalog.ts
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -133,7 +133,7 @@ Actions are declared in your [catalog](/docs/catalog). The `@json-render/react`
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -67,7 +67,7 @@ Define custom validators in your catalog's `functions` field. The catalog itself
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react'; // or '@json-render/react-native'
|
||||
import { schema } from '@json-render/react/schema'; // or '@json-render/react-native/schema'
|
||||
import { z } from 'zod';
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
/**
|
||||
|
||||
@@ -14,7 +14,7 @@ npm install @json-render/react @json-render/core zod
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
export const catalog = defineCatalog(schema, {
|
||||
@@ -409,7 +409,8 @@ const systemPrompt = catalog.prompt();
|
||||
|
||||
```tsx
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema, defineRegistry, Renderer } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { defineRegistry, Renderer } from "@json-render/react";
|
||||
import { z } from "zod";
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -28,7 +28,8 @@ function App({ spec }) {
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema, defineRegistry } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { defineRegistry } from "@json-render/react";
|
||||
import { z } from "zod";
|
||||
|
||||
// Create catalog with props schemas
|
||||
|
||||
Reference in New Issue
Block a user