How do I define which components are available to the renderer?

Components are defined using a Catalog (via defineCatalog) which specifies props and schemas, and a Registry (via defineRegistry) which maps them to Vue h() render functions.

Can I use this with external state management like Pinia?

Yes, you can create a custom StateStore and pass it to the StateProvider to wire json-render to Pinia, VueUse, or any other state management library.

Is streaming supported for AI-generated interfaces?

Yes, it includes specialized composables like useUIStream and useChatUI for streaming component specifications directly from an API.

Does it support two-way data binding?

Yes, the skill supports two-way binding via the $bindState and $bindItem dynamic prop expressions for seamless state synchronization.

What version of Vue is required for this skill?

This skill is designed for Vue 3, specifically requiring version 3.5.0 or higher along with Zod 4.0.0.

Vue Generative UI Renderer

Name: Vue Generative UI Renderer
Author: vercel-labs

byvercel-labs

•

13,983

•

设计工具

Builds dynamic Vue 3 user interfaces from JSON specifications with integrated state management and event handling.

This skill empowers Claude to build and manage sophisticated Vue 3 applications using the @json-render framework. It enables the conversion of complex JSON schemas into interactive UI component trees, complete with data binding, conditional visibility, and custom action handlers. It is particularly useful for developers implementing Generative UI patterns, building dynamic dashboards from API responses, or creating highly customizable frontend interfaces that can be updated via JSON without redeploying code.

主要功能

01Provides integrated state, action, and visibility providers for complex logic

02Supports dynamic prop expressions like $state, $bindState, and $computed

03Ensures type safety with Zod-backed component catalogs and registries

04Includes built-in streaming composables for real-time AI-generated UI

0513,983 GitHub stars

06Converts JSON specifications into reactive Vue 3 component trees

使用场景

01Developing modular UI systems that require fine-grained visibility and state control

02Creating dynamic forms and dashboards defined by backend JSON configurations

03Building AI-driven Generative UI where components are streamed directly from an LLM

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vercel-labs/json-render vue

For use in Claude.ai and ChatGPT