Compare commits

...
Author SHA1 Message Date
Chris Tate 112496c202 fix schema import to use server-safe subpath
- `@json-render/react` barrel-imports React contexts that call `createContext`, which crashes in Next.js App Router API routes (RSC runtime strips `createContext`)
- Updated all docs, READMEs, examples, and skills to import `schema` from `@json-render/react/schema` instead of `@json-render/react`
- For combined imports, split into separate `schema` (subpath) and client API (main entry) lines

Fixes #123
2026-02-24 00:51:25 -06:00
15 changed files with 22 additions and 19 deletions
+4 -3
View File
@@ -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";
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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, {
+2 -2
View File
@@ -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> }
+1 -1
View File
@@ -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, {
+1 -1
View File
@@ -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, {
+1 -1
View File
@@ -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, {
+1 -1
View File
@@ -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, {
+1 -1
View File
@@ -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";
/**
+3 -2
View File
@@ -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, {
+2 -1
View File
@@ -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