Community编程与开发github.com

vercel-labs/react

用于 json-render 的 React 渲染器,可将 JSON 规范转换为 React 组件。适用于 @json-render/react、从 JSON 构建 React UI、创建组件目录或渲染 AI 生成的规范。

react 是什么?

vercel-labs/react 是一个专为 json-render 设计的 React 渲染器,核心功能是将 JSON 格式的 UI 规范动态转换为可渲染的 React 组件。它使得开发者能够以声明式的方式定义界面,从而实现更灵活的 UI 自动生成,特别适合与 AI 代理协作,因为 AI 可以输出结构化的 JSON 而不是直接编写 JSX。该工具支持从 JSON 中解析组件树,包括组件属性(props)、嵌套子组件和样式定义,然后通过 json-render 引擎将其映射到实际的 React 组件。它适用于 @json-render/react 生态,常用于构建动态组件目录、配置驱动的 UI、以及将 AI 生成的界面规范转化为真实界面。支持的平台包括任何使用 React 的开发环境,如 Cursor、Claude Code 等,但需要安装 @json-render/react 包。使用时需要提供符合 json-render 协议的 JSON 规范,并定义组件映射关系。

兼容平台~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/react

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

react 是做什么的?

用于 json-render 的 React 渲染器,可将 JSON 规范转换为 React 组件。适用于 @json-render/react、从 JSON 构建 React UI、创建组件目录或渲染 AI 生成的规范。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

vercel-labs/core

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

vercel-labs/react-native

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.

vercel-labs/react-pdf

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.

vercel-labs/react-three-fiber

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.

vercel-labs/remotion

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

vercel-labs/shadcn

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.

vercel-labs/zustand

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

相关技能