Ink

Turns JSON specifications into live terminal UIs using React Ink under the hood. You get a catalog of standard components (Box, Text, Select, Table, Spinner, etc.) that you define in JSON with data binding, visibility conditions, and event handlers. Built for rendering AI-generated terminal interfaces, so it includes streaming support via useUIStream and server-side prompt generation from your component catalog. The architecture is clean: flat element maps, JSON Pointer state paths, and two-way binding through $bindState expressions instead of component props. Useful when you want LLMs to generate interactive CLIs without writing React components directly.

skills.sh installs: 169
GitHub stars: 28.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add google-labs-code/design.md --skill ink --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/ink

Ink terminal renderer that converts JSON specs into interactive terminal component trees with standard components, data binding, visibility, actions, and dynamic props.

Quick Start

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/ink/schema";
import {
  standardComponentDefinitions,
  standardActionDefinitions,
} from "@json-render/ink/catalog";
import { defineRegistry, Renderer, type Components } from "@json-render/ink";
import { z } from "zod";

// Create catalog with standard + custom components
const catalog = defineCatalog(schema, {
  components: {
    ...standardComponentDefinitions,
    CustomWidget: {
      props: z.object({ title: z.string() }),
      slots: [],
      description: "Custom widget",
    },
  },
  actions: standardActionDefinitions,
});

// Register only custom components (standard ones are built-in)
const { registry } = defineRegistry(catalog, {
  components: {
    CustomWidget: ({ props }) => <Text>{props.title}</Text>,
  } as Components<typeof catalog>,
});

SKILL.md on GitHub