@json-render/ink

import { JSONUIProvider, Renderer } from "@json-render/ink";

<JSONUIProvider initialState={{}} handlers={handlers}>
  <Renderer spec={spec} registry={registry} />
</JSONUIProvider>

<StateProvider initialState={object} onStateChange={fn}>
  {children}
</StateProvider>

import { createStateStore } from "@json-render/ink";

const store = createStateStore({ count: 0 });

<StateProvider store={store}>
  {children}
</StateProvider>

// Mutate from anywhere — components re-render automatically:
store.set("/count", 1);

<ActionProvider handlers={Record<string, ActionHandler>} navigate={fn}>
  {children}
</ActionProvider>

<VisibilityProvider>
  {children}
</VisibilityProvider>

<ValidationProvider>
  {children}
</ValidationProvider>

<FocusProvider>
  {children}
</FocusProvider>

import { defineRegistry, type Components } from "@json-render/ink";

const { registry, handlers, executeAction } = defineRegistry(catalog, {
  components: {
    MyWidget: ({ props }) => <Text>{props.label}</Text>,
  } as Components<typeof catalog>,
  actions: {
    submit: async (params, setState, state) => {
      // custom action logic
    },
  },
});

import { createRenderer } from "@json-render/ink";

const UIRenderer = createRenderer(catalog, components);

<UIRenderer spec={spec} state={initialState} />;

const {
  spec,         // Spec | null - current UI state
  isStreaming,  // boolean - true while streaming
  error,        // Error | null
  send,         // (prompt: string, context?: Record<string, unknown>) => Promise<void>
  stop,         // () => void - abort the current stream
  clear,        // () => void - reset spec and error
} = useUIStream({
  api: string,
  onComplete?: (spec: Spec) => void,
  onError?: (error: Error) => void,
  fetch?: (url: string, init?: RequestInit) => Promise<Response>,
  validate?: boolean,
  maxRetries?: number,
});

const { state, get, set, update } = useStateStore();

const value = useStateValue(path: string);

const [value, setValue] = useBoundProp(resolvedValue, bindingPath);

const { execute } = useActions();

const isVisible = useIsVisible(condition?: VisibilityCondition);

const { isActive, id } = useFocus();

useFocusDisable(disabled: boolean);

import { standardComponentDefinitions, standardActionDefinitions } from "@json-render/ink/catalog";
import { schema } from "@json-render/ink/schema";

import { schema, standardComponentDefinitions, standardActionDefinitions } from "@json-render/ink/server";