人工智能AI 应用前端MCP 服务【免费下载链接】json-renderThe Generative UI framework项目地址https://gitcode.com/GitHub_Trending/js/json-render点击查看免费下载导读json-render/devtools-solid是 json-render 生成式 UI 框架Generative UI framework为 SolidJS 提供的 DevTools 适配器一个开箱即用的JsonRenderDevtools /组件。本文从安装、最小接入、全部 Props 参考讲到面板的 Spec / State / Actions / Stream / Catalog 五大标签页与 DOM 拾取器Picker的实际用法并深入packages/devtools-solid/src/index.tsx等源码说明它如何在 SolidJS 的细粒度响应式体系下完成事件采集、状态联调与生产构建零开销。读完你可以在自己的 SolidJS 应用中快速集成、调试 AI 流式生成的 UI并按需调整停靠位置、快捷键与内存缓冲。一、背景框架无关的 DevTools 核心与适配器分层json-render 的 DevTools 采用「框架无关核心 各框架薄适配器」的两层设计json-render/devtoolspackages/devtools/README.md是纯 TypeScript 实现的框架无关核心提供 Shadow DOM 隔离的面板 UI、事件存储event store、DOM 拾取器与流式 tap 工具。它自身不依赖任何 UI 框架绝大多数用户不会直接 import 它。json-render/devtools-solid则是 SolidJS 适配器把核心能力封装成一个null渲染、零 UI 输出的挂载型组件你只需放进组件树即可。同层的适配器还包括json-render/devtools-react、json-render/devtools-vue、json-render/devtools-svelte。从packages/devtools-solid/package.json可以看到该包依赖json-render/core、json-render/devtools、json-render/solid三个 workspace 包说明它在运行时同时桥接「核心面板逻辑」与「Solid 渲染器的状态/动作上下文」。二、安装与前提npm install json-render/devtools json-render/devtools-solidPeer dependencysolid-js^1.9。安装时若版本不匹配包管理器会给出 peer 冲突提示请确保项目中的solid-js不低于 1.9.0package.json 中声明为solid-js: ^1.9.0。json-render/devtools会被json-render/devtools-solid自动引入显式安装是为了让 npm 正确解析依赖树同时你也能直接使用其暴露的底层 API如服务端流式 tap。使用时还需要json-render/solid渲染器与json-render/core目录、Registry、状态模型。Solid 渲染器的完整安装方式见 packages/solid/README.mdnpm install json-render/core json-render/solid zod其中solid-js ^1.9.0与zod ^4.0.0为 peer 依赖。说明zod用于为 Catalog 中的组件 props 与 actions 定义 schema是定义 Catalog 的必要依赖。三、最小接入三步把 DevTools 放进 Solid 应用1. 定义 Catalog组件与动作清单// catalog.ts import { defineCatalog } from json-render/core; import { schema } from json-render/solid/schema; import { z } from zod; export const catalog defineCatalog(schema, { components: { Card: { props: z.object({ title: z.string(), description: z.string().nullable(), }), description: A card container, }, Button: { props: z.object({ label: z.string(), action: z.string(), }), description: A clickable button, }, }, actions: { submit: { description: Submit the form }, cancel: { description: Cancel and close }, }, });2. 创建 Registry组件实现// registry.tsx import { defineRegistry } from json-render/solid; import { catalog } from ./catalog; export const { registry } defineRegistry(catalog, { components: { Card: (renderProps) ( div classcard h3{renderProps.element.props.title as string}/h3 {renderProps.children} /div ), Button: (renderProps) ( button onClick{() renderProps.emit(press)} {renderProps.element.props.label as string} /button ), }, actions: { submit: async () {}, cancel: async () {}, }, });3. 在 JSONUIProvider 内放置JsonRenderDevtools /import { JsonRenderDevtools } from json-render/devtools-solid; import { JSONUIProvider, Renderer } from json-render/solid; import { registry } from ./registry; import { catalog } from ./catalog; export function App(props: { spec: () any }) { return ( JSONUIProvider registry{registry} Renderer spec{props.spec()} registry{registry} / JsonRenderDevtools spec{props.spec()} catalog{catalog} messages{messages()} // AI SDK 消息数组用于 Stream 标签页 / /JSONUIProvider ); }组件放置位置没有限制只要是JSONUIProvider内即可它本身不渲染任何 DOM。JSONUIProvider是 Solid 渲染器提供的合并 Provider内部串联了StateProvider、VisibilityProvider、ValidationProvider与ActionProvider见 packages/solid/README.md。默认行为浮动开关出现在页面右下角点击展开/收起面板。快捷键Ctrl/CmdShiftJ切换面板开关。生产构建零成本组件在 production 下 tree-shake 为null不会被打包进产物。四、Props 完整参考与源码逐一对应以下 Props 定义直接来自 packages/devtools-solid/src/index.tsx 的JsonRenderDevtoolsProps接口Prop类型默认值说明specSpec \| null—当前要检查的 UI Spec。多渲染器场景下由面板内部按需读取最新值catalogCatalog \| null—组件/动作目录用于 Catalog 标签页与拾取器解析messagesChatLikeMessage[]—AI SDK 风格的流式消息数组parts结构用于 Stream 标签页采集补丁事件initialOpenbooleanfalse面板初始是否展开positionPanelPositionbottom-right面板停靠与开关位置见下文「布局与停靠」hotkeystring \| falsemodshiftj切换面板的快捷键传false关闭快捷键bufferSizenumber500事件存储ring buffer最大保留事件数超出丢弃最旧事件reserveSpacebooleantrue面板展开时是否通过bodypadding 为面板预留空间allowDockTogglebooleantrue是否显示工具栏按钮允许用户切换底部/右侧停靠选择持久化到 localStorageonEvent(evt: DevtoolsEvent) void—事件回调每当有新事件入队时触发参数为最新一条事件messages的类型为宽松的聊天消息结构parts?: Array{ type, text?, data? }与json-render/core的 Spec、Catalog 类型对齐。若你的消息对象结构略有差异只要parts字段兼容即可被scanMessageParts处理。五、面板功能五大标签页与拾取器组件挂载时通过createPanel注册以下标签页源码第 137 行tabs: [specTab(), stateTab(), actionsTab(), streamTab(), catalogTab()]面板 UI 由json-render/devtools用原生 DOM Shadow DOM 隔离实现Spec规范树以树形展示当前 Spec 的元素结构root、elements、state支持在多个生成之间切换。多渲染器宿主如每条助手消息产生一个 Spec 的聊天应用可通过getSpecs提供每代 Spec 列表Spec 标签页会显示生成切换器见 packages/devtools/src/panel/types.ts 的SpecEntry。State状态实时查看/修改渲染器状态。面板通过适配器适配的StateStore读取getSnapshot状态以 JSON Pointer 路径扁平化展示。Actions动作展示动作分发生命周期——dispatch 与 settle 成对出现含执行耗时durationMs与结果/错误。Stream流采集 AI 流式消息中的 UI 补丁事件观察 Spec 如何逐步生成。Catalog目录展示当前注册的组件与动作清单及其 schema 说明。另外还有拾取器Picker点击页面上任意由 json-render 渲染的元素通过data-jr-key属性反查其在 Spec 中的 key并联动高亮 Spec 树中的对应节点。拾取器与 Spec 标签页通过createSelectionBus共享选中项选中后调用highlightElement高亮 DOM其 DOM 几何计算逻辑含display: contents包裹元素的边界回退计算见 packages/devtools/src/picker.ts。六、运行机制与源码原理1. 生产环境守卫isProduction()短路组件函数体第一行即if (isProduction()) return null;。isProduction实现于 packages/devtools/src/prod-guard.ts当process.env.NODE_ENV production时返回true且用typeof process ! undefined守卫了浏览器无process的场景。配合打包器的常量折叠与 tree-shaking生产构建中整个组件及其引用的面板、事件存储等模块都会被剔除。该行为有单元测试覆盖packages/devtools/src/prod-guard.test.ts分别验证了非 production、production、NODE_ENV未定义三种情况。2. 事件存储带上限的环形缓冲面板内部createEventStore({ bufferSize })创建事件存储默认 500 条见 packages/devtools/src/event-store.ts。它提供push、snapshot、subscribe、clear、size五个方法push超过缓冲上限时丢弃最旧事件snapshot返回全新数组保证调用方可安全当作不可变数据。所有标签页都订阅同一事件存储事件到达时同步刷新。3. 动作采集核心包的 Action Observer组件在挂载时调用registerActionObserver({ onDispatch, onSettle })来自json-render/core实现见 packages/core/src/action-observer.ts。Solid 渲染器的ActionProvider会在每次动作执行前后调用notifyActionDispatch/notifyActionSettleDevTools 借此拿到dispatch 事件动作id、名称name、参数params、触发时间atsettle 事件配对id、是否成功ok、耗时durationMs、结果result或错误信息error。观察器以模块级 pub/sub 实现且每个观察器回调被 try/catch 包裹DevTools 的异常不会中断动作执行。组件卸载时通过onCleanup反注册。4. 流式事件采集scanMessagePartscreateEffect监听props.messages对每条消息的parts调用scanMessageParts扫描源码第 113–119 行。seenParts用WeakSet记录已处理对象保证重复渲染时同一部分不会被重复计入事件流。这是 Stream 标签页数据来源用于观察 AI 逐步 patch 出 UI 的过程。5. 与渲染器联动markDevtoolsActive与data-jr-key挂载时调用markDevtoolsActive()实现于 packages/core/src/devtools-flag.ts这是一个模块级计数器DevTools 挂载期间计数 0Solid 渲染器检测到isDevtoolsActive()为真后会给每个渲染的元素包装节点打上data-jr-key属性拾取器正是靠它把点击的 DOM 节点映射回 Spec key见 packages/devtools/src/picker.ts 中DEVTOOLS_KEY_ATTR的定义。未挂载 DevTools 时计数器为 0渲染器行为与之前完全一致——纯 opt-in 机制。6. Solid 适配层桥接 State 上下文组件通过useStateStore()来自json-render/solid实现在 packages/solid/src/contexts/state.tsx获取StateContextValue将其包装为StateStore接口get/set/update/getSnapshot/subscribe交给面板核心实现 State 标签页与渲染器状态的实时同步。注意在 Solid 中读取可变状态要放在 JSX 表达式、createMemo或createEffect内Hook 返回的是 accessor详见 packages/solid/README.md 的「Differences from json-render/react」一节。7. 生命周期管理onMount中创建面板句柄handle、订阅选中总线onCleanup中依次执行选中订阅反注册、markDevtoolsActive释放、handle.destroy()面板从 DOM 移除并清理。整套生命周期完全遵循 Solid 的组件模型无需手动管理。七、布局与停靠position、reserveSpace 与 allowDockToggleposition接受三种值定义见 packages/devtools/src/panel/types.ts值面板停靠浮动开关位置适用场景bottom-right默认底部抽屉右下角常规文档流布局bottom-left底部抽屉左下角宿主应用右下角已有内容right右侧全高面板右上角使用100vh/position: fixed; bottom: 0的 app-shell 布局避免与底部固定元素冲突两个联动选项reserveSpace默认true面板展开时通过body的 padding 为面板预留空间内容会被推开。对height: 100vh、position: fixed; bottom: 0这类 CSS 无法自适应的布局面板实际是覆盖overlay效果此时可改传false保持纯覆盖或让固定元素使用bottom: var(--jr-devtools-offset-bottom, 0)/right: var(--jr-devtools-offset-right, 0)这两个 CSS 自定义属性自行避让。false模式下这两个变量依然会在:root上发布供应用按需消费。allowDockToggle默认true显示工具栏按钮让用户实时切换底部/右侧停靠选择持久化到 localStoragekey 为__jr_devtools_dock且一旦设置会覆盖初始position。传false则严格锁定position工具栏不渲染该按钮适合布局只兼容一种停靠方式的宿主。八、自定义事件监听与常见问题监听事件传onEvent即可拿到事件流的最新一条JsonRenderDevtools spec{spec()} catalog{catalog} messages{messages()} onEvent{(evt) { if (evt.kind action-settled !evt.ok) { console.warn(action failed, evt.name, evt.error); } }} /DevtoolsEvent类型含action-dispatched、action-settled等事件类型由json-render/devtools定义json-render/devtools-solid会原样 re-export源码末尾export type { DevtoolsEvent }。常见问题与建议生产构建后组件消失这是预期行为——isProduction()返回true时组件渲染null且被 tree-shake确保线上零体积、零副作用。快捷键不生效检查hotkey是否被显式传为false或是否与其他应用快捷键冲突。语法为modshiftjmod在 macOS 上是 Cmd、其余平台是 Ctrl。面板遮挡底部固定元素将position改为right或把固定元素的bottom/right接上--jr-devtools-offset-bottom/--jr-devtools-offset-right变量。内存占用长会话产生海量事件时调小bufferSize以控制事件存储体积默认 500 已足够日常调试。九、Licensejson-render/devtools-solid以 Apache-2.0 协议开源见 package.json。总结json-render/devtools-solid以极低的接入成本一个组件、三行 JSX为 SolidJS 生成式 UI 应用带来完整的调试体验Spec 树检查、状态实时编辑、动作耗时追踪、AI 流式生成过程回放与 DOM 拾取联动。其背后是「框架无关核心 适配器」的架构——json-render/devtools提供纯 TS 面板与事件存储json-render/devtools-solid负责桥接 Solid 的状态上下文与动作观察器并在生产环境自动无痕退出。无论是调试 AI 聊天 UI 的逐步生成还是排查状态绑定与动作执行问题这套工具链都能让你直接「看见」渲染器内部发生了什么。赞分享人工智能AI 应用前端MCP 服务【免费下载链接】json-renderThe Generative UI framework项目地址https://gitcode.com/GitHub_Trending/js/json-render点击查看免费下载相关推荐json-render SolidJS 调试实战json-render/devtools-solid 检查器面板接入指南json render SolidJS 调试实战json render/devtools solid 检查器面板接入指南 导读本文围绕 skills/de人工智能AI 应用前端MCP 服务在 Vue 3 应用中接入 json-render DevToolsjson-render/devtools-vue 完整接入与源码解析在 Vue 3 应用中接入 json render DevToolsjson render/devtools vue 完整接入与源码解析 json ren人工智能AI 应用前端MCP 服务json-render Devtools 的 Svelte 5 适配器json-render/devtools-svelte 接入指南与源码剖析json render Devtools 的 Svelte 5 适配器json render/devtools svelte 接入指南与源码剖析 json人工智能AI 应用前端MCP 服务上一篇5分钟上手intentraceLinux系统调用追踪工具安装与快速开始完整教程下一篇Azure-Sentinel恶意软件检测基于行为的威胁识别创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考