人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载Plan 是 ZCode 仓库引入的 ai-elements 组件库中用于展示 AI 生成执行计划的 React 组件它以可折叠卡片的形式承载多步骤工作流、任务拆解与实施策略并通过 Context 传递的isStreaming状态配合 Shimmer 微光动画呈现流式加载效果。本文将以 plan.md 为核心脉络结合 plan.tsx 实现 与仓库内的使用场景完整讲解该组件的安装方式、全部 Props 定义、组合原理与源码级实现细节帮助读者在自己的 AI 应用界面中快速落地同款计划展示交互。Plan 组件是什么Plan 是一个可折叠的计划组件专门用于展示 AI 生成的执行计划内置流式streaming支持与微光shimmer动画。它适合呈现多步骤工作流multi-step workflows任务拆解task breakdowns实施策略implementation strategies其核心价值在于AI 正在生成计划时标题与描述区域会以 shimmer 动画提示内容仍在产出中生成完成后用户可以通过头部触发器折叠/展开完整计划正文避免长计划占据过多界面空间。该组件属于 ZCode 引入的 ai-elements 技能体系。SKILL.md 说明ai-elements 是构建在 shadcn/ui 之上的组件库与自定义 registry用于加速 AI 原生应用界面开发ZCode 将其以本地化技能形式集成组件源码位于 packages/ui/src/components/ai-elements/来源与许可Apache-2.0版权归 Vercel, Inc.记录在仓库根目录的 THIRD-PARTY-NOTICES.md。安装与前置条件参考 SKILL.md使用 Plan 组件前需确认环境满足Node.js 18 或更高版本一个已安装AI SDK的Next.js项目项目内已安装shadcn/ui若未安装执行安装命令时会自动安装。安装 Plan 组件使用 AI Elements CLInpx ai-elementslatest add plan根据项目的packageManager配置也可以将npx替换为pnpm dlx或bunx --bun效果一致。CLI 会把组件代码下载并集成到项目目录默认落在/components/ai-elements/或你在 shadcn components 设置中配置的目录。由于组件代码直接进入你的代码库而非隐藏的库依赖安装后即可像普通 React 组件一样导入使用也可以直接打开组件文件查看实现或做定制修改。组件架构一个复合组件家族Plan 不是单一组件而是一个由 8 个组件组成的复合家族通过 PlanContext 共享isStreaming状态组件基座职责PlanCollapsibleradix-ui包一层Card根容器创建 ContextPlanHeaderCardHeader头部区域标题/描述与触发器并排PlanTitleCardTitle计划标题流式时显示 shimmerPlanDescriptionCardDescription计划描述流式时显示 shimmerPlanTriggerCollapsibleTrigger内的Button展开/折叠按钮带 chevron 图标PlanContentCollapsibleContent内的CardContent可折叠的正文区域PlanFooterCardFooter底部操作区PlanActionCardAction底部动作按钮位从 源码 可以看到Plan的实现结构export const Plan ({ className, isStreaming false, children, ...props }: PlanProps) { const contextValue useMemo(() ({ isStreaming }), [isStreaming]); return ( PlanContext.Provider value{contextValue} Collapsible asChild>use client; import { Plan, PlanAction, PlanContent, PlanDescription, PlanFooter, PlanHeader, PlanTitle, PlanTrigger, } from /components/ai-elements/plan; import { Button } from /components/ui/button; import { FileText } from lucide-react; const Example () ( Plan defaultOpen{false} PlanHeader div div classNamemb-4 flex items-center gap-2 FileText classNamesize-4 / PlanTitleRewrite AI Elements to SolidJS/PlanTitle /div PlanDescription Rewrite the AI Elements component library from React to SolidJS while maintaining compatibility with existing React-based shadcn/ui components using solid-js/compat, updating all 29 components and their test suite. /PlanDescription /div PlanTrigger / /PlanHeader PlanContent div classNamespace-y-4 text-sm div h3 classNamemb-2 font-semiboldOverview/h3 p This plan outlines the migration strategy for converting the AI Elements library from React to SolidJS, ensuring compatibility and maintaining existing functionality. /p /div div h3 classNamemb-2 font-semiboldKey Steps/h3 ul classNamelist-inside list-disc space-y-1 liSet up SolidJS project structure/li liInstall solid-js/compat for React compatibility/li liMigrate components one by one/li liUpdate test suite for each component/li liVerify compatibility with shadcn/ui/li /ul /div /div /PlanContent PlanFooter classNamejustify-end PlanAction Button sizesm Build kbd classNamefont-mono⌘↩/kbd /Button /PlanAction /PlanFooter /Plan ); export default Example;组合要点Plan defaultOpen{false}让计划默认折叠头部仅显示标题与描述摘要PlanHeader内先放标题/描述块再放PlanTriggerPlanHeader的样式flex items-start justify-between会保证两者左右对齐PlanContent放入完整计划正文只有展开时才可见PlanFooterPlanAction承载执行计划类操作按钮如示例中的Build快捷键提示。若需要默认展开将defaultOpen改为true即可。源码级原理流式状态、微光动画与折叠动画Context 驱动的流式状态isStreaming是整个流式体验的开关PlanTitle 与 PlanDescription 均通过usePlan()读取该值。仓库内 ZCode 本地化的实现中对应的Shimmer包裹逻辑被注释保留见 plan.tsx 中的注释行可直接取消注释恢复上游的 shimmer 效果。Shimmer 微光动画shimmer 效果由 shimmer.tsx 提供其实现要点使用motion/react的motion组件动画在backgroundPosition上从100% center过渡到0% centerease: linear且repeat: Infinity无限循环通过background-clip: texttext-transparent让渐变只作用于文字本身dynamicSpread由(children?.length ?? 0) * spread计算spread默认2duration默认2秒即光带宽度随文本长度自动缩放组件经memo包裹以减少不必要的重渲染动画所用的 motion 组件在模块级缓存motionComponentCache避免渲染期间反复创建。值得注意的细节ZCode 在本地化时处理了一个主题变量兼容问题——当前主题未定义 ai-elements 默认依赖的--color-muted-foreground会导致 background-image 整条失效并配合text-transparent让文字完全不可见修复方式是保留上游 token 作为第一优先级同时回退到项目稳定存在的--color-foreground-subtle。折叠动画与滚动性能PlanContent依赖的 collapsible.tsx 实现了细粒度的动画控制外层用animate-collapsible-down/up处理高度变化内层 div 通过data-[stateopen]:animate-infade-in-0处理透明度淡入data-[stateclosed]时配合animation-fill-mode: forwards保持结束状态。源码注释还记录了一次性能修复大会话 trace 显示折叠动画层仅设置 duration/ease 时浏览器会默认transition-property: all而动画化scrollbar-color拖拽窗口时触发非合成动画因此显式禁用 CSS transition只保留 animate-in/out 关键帧动画——这说明折叠动画层针对长内容场景做了专门的滚动性能优化。无障碍设计PlanTrigger 渲染为sizeicon、variantghost的Button内置ChevronsUpDownIcon图标并附带span classNamesr-onlyToggle plan/span供屏幕阅读器读取键盘导航与焦点管理由 radix-ui 的CollapsibleTrigger原生承担。组件还通过data-slot如plan、plan-header、plan-title暴露稳定的选择器钩子便于测试与样式定位。ZCode 中的实际应用场景Plan 组件所属的 ai-elements 已被 ZCode 实际运用于 Agent 界面。仓库中 plan-guidance.tsx 展示了计划类信息如何与 ai-elements 家族组件MessageResponse、ToolOutput、ToolLayout组合渲染该渲染器会从工具调用的output、input、raw等字段中递归提取计划指南的 Markdown 文本依次尝试text/content/output键名再通过MessageResponse以左边框引用的形式展示作为 ZCode 中计划模式/计划指南工具调用的可视化载体。此外整个 ai-elements 技能.agents/skills/ai-elements与组件源码packages/ui/src/components/ai-elements/均注明派生自 vercel/ai-elements版权归 Vercel, Inc.遵循 Apache-2.0 许可完整许可与来源记录见 THIRD-PARTY-NOTICES.md其中列出了ai-elements (Apache-2.0)对应的组件目录与技能目录两条条目。自定义与常见问题修改组件样式安装后组件代码即属于你的项目可像修改自己的代码一样调整 Tailwind 类。例如去掉 Card 的圆角删除Plan外层Card的rounded-xl类即可PlanTitle/PlanDescription的children必须为字符串类型定义为string这是 shimmer 按文本长度计算光带的前提。组件未生效确认当前工作目录是项目根目录package.json所在处确认components.jsonshadcn 风格配置设置正确使用最新版 CLInpx ai-elementslatest。组件无样式项目需按 shadcn/uiTailwind 4规范配置——globals.css需导入 Tailwind 并包含 shadcn/ui 基础样式。主题切换失效停留在浅色模式应用需使用与 shadcn/ui、ai-elements 一致的data-theme系统默认在html上切换data-theme属性并确保tailwind.config.js使用class或data-选择器。module not found确认组件文件存在且tsconfig.json为/配置了 paths 别名{ compilerOptions: { baseUrl: ., paths: { /*: [./*] } } }小结Plan 组件以Collapsible 折叠能力 Card 卡片容器 Context 流式状态 Shimmer 微光动画四层组合为 AI 执行计划提供了完整的展示方案折叠状态下保持界面清爽流式状态下通过微光动画反馈生成进度展开后呈现完整步骤。其全部 Props 均透传至底层 shadcn/ui 与 radix-ui 原语既保持了开箱即用的体验又保留了逐级定制的自由度。若要在自己的 AI 应用中实现同款计划展示参照上文安装命令、示例脚本 与 组件源码 即可快速落地。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐Comp AI CRM 中的 AI Elements Plan 组件构建可折叠、支持流式渲染的 AI 执行计划展示方案Comp AI CRM 中的 AI Elements Plan 组件构建可折叠、支持流式渲染的 AI 执行计划展示方案 Plan 是 AI Elements后端前端CRM人工智能AI AgentZCode 中的 AI Elements Sandbox 组件用可折叠容器展示 AI 生成代码与执行输出ZCode 中的 AI Elements Sandbox 组件用可折叠容器展示 AI 生成代码与执行输出 本文围绕 ZCode 仓库内置的 AI ElemenLoco 框架 Mailer 实战指南基于后台 Worker 的 Rust 邮件发送、SMTP 配置与测试Loco 框架 Mailer 实战指南基于后台 Worker 的 Rust 邮件发送、SMTP 配置与测试 本篇技术指南围绕 LocoRust 全栈框架的人工智能大模型代码智能体AI Agent桌面应用后端前端CLI插件系统上一篇不会把手机搞变砖的安卓去预装工具Universal Android Debloater 使用指南下一篇SSDB 容器镜像优化多阶段构建与瘦身创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ZCode 中的 AI 执行计划组件 Plan：基于 ai-elements 的可折叠流式计划展示方案
人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载Plan 是 ZCode 仓库引入的 ai-elements 组件库中用于展示 AI 生成执行计划的 React 组件它以可折叠卡片的形式承载多步骤工作流、任务拆解与实施策略并通过 Context 传递的isStreaming状态配合 Shimmer 微光动画呈现流式加载效果。本文将以 plan.md 为核心脉络结合 plan.tsx 实现 与仓库内的使用场景完整讲解该组件的安装方式、全部 Props 定义、组合原理与源码级实现细节帮助读者在自己的 AI 应用界面中快速落地同款计划展示交互。Plan 组件是什么Plan 是一个可折叠的计划组件专门用于展示 AI 生成的执行计划内置流式streaming支持与微光shimmer动画。它适合呈现多步骤工作流multi-step workflows任务拆解task breakdowns实施策略implementation strategies其核心价值在于AI 正在生成计划时标题与描述区域会以 shimmer 动画提示内容仍在产出中生成完成后用户可以通过头部触发器折叠/展开完整计划正文避免长计划占据过多界面空间。该组件属于 ZCode 引入的 ai-elements 技能体系。SKILL.md 说明ai-elements 是构建在 shadcn/ui 之上的组件库与自定义 registry用于加速 AI 原生应用界面开发ZCode 将其以本地化技能形式集成组件源码位于 packages/ui/src/components/ai-elements/来源与许可Apache-2.0版权归 Vercel, Inc.记录在仓库根目录的 THIRD-PARTY-NOTICES.md。安装与前置条件参考 SKILL.md使用 Plan 组件前需确认环境满足Node.js 18 或更高版本一个已安装AI SDK的Next.js项目项目内已安装shadcn/ui若未安装执行安装命令时会自动安装。安装 Plan 组件使用 AI Elements CLInpx ai-elementslatest add plan根据项目的packageManager配置也可以将npx替换为pnpm dlx或bunx --bun效果一致。CLI 会把组件代码下载并集成到项目目录默认落在/components/ai-elements/或你在 shadcn components 设置中配置的目录。由于组件代码直接进入你的代码库而非隐藏的库依赖安装后即可像普通 React 组件一样导入使用也可以直接打开组件文件查看实现或做定制修改。组件架构一个复合组件家族Plan 不是单一组件而是一个由 8 个组件组成的复合家族通过 PlanContext 共享isStreaming状态组件基座职责PlanCollapsibleradix-ui包一层Card根容器创建 ContextPlanHeaderCardHeader头部区域标题/描述与触发器并排PlanTitleCardTitle计划标题流式时显示 shimmerPlanDescriptionCardDescription计划描述流式时显示 shimmerPlanTriggerCollapsibleTrigger内的Button展开/折叠按钮带 chevron 图标PlanContentCollapsibleContent内的CardContent可折叠的正文区域PlanFooterCardFooter底部操作区PlanActionCardAction底部动作按钮位从 源码 可以看到Plan的实现结构export const Plan ({ className, isStreaming false, children, ...props }: PlanProps) { const contextValue useMemo(() ({ isStreaming }), [isStreaming]); return ( PlanContext.Provider value{contextValue} Collapsible asChild>use client; import { Plan, PlanAction, PlanContent, PlanDescription, PlanFooter, PlanHeader, PlanTitle, PlanTrigger, } from /components/ai-elements/plan; import { Button } from /components/ui/button; import { FileText } from lucide-react; const Example () ( Plan defaultOpen{false} PlanHeader div div classNamemb-4 flex items-center gap-2 FileText classNamesize-4 / PlanTitleRewrite AI Elements to SolidJS/PlanTitle /div PlanDescription Rewrite the AI Elements component library from React to SolidJS while maintaining compatibility with existing React-based shadcn/ui components using solid-js/compat, updating all 29 components and their test suite. /PlanDescription /div PlanTrigger / /PlanHeader PlanContent div classNamespace-y-4 text-sm div h3 classNamemb-2 font-semiboldOverview/h3 p This plan outlines the migration strategy for converting the AI Elements library from React to SolidJS, ensuring compatibility and maintaining existing functionality. /p /div div h3 classNamemb-2 font-semiboldKey Steps/h3 ul classNamelist-inside list-disc space-y-1 liSet up SolidJS project structure/li liInstall solid-js/compat for React compatibility/li liMigrate components one by one/li liUpdate test suite for each component/li liVerify compatibility with shadcn/ui/li /ul /div /div /PlanContent PlanFooter classNamejustify-end PlanAction Button sizesm Build kbd classNamefont-mono⌘↩/kbd /Button /PlanAction /PlanFooter /Plan ); export default Example;组合要点Plan defaultOpen{false}让计划默认折叠头部仅显示标题与描述摘要PlanHeader内先放标题/描述块再放PlanTriggerPlanHeader的样式flex items-start justify-between会保证两者左右对齐PlanContent放入完整计划正文只有展开时才可见PlanFooterPlanAction承载执行计划类操作按钮如示例中的Build快捷键提示。若需要默认展开将defaultOpen改为true即可。源码级原理流式状态、微光动画与折叠动画Context 驱动的流式状态isStreaming是整个流式体验的开关PlanTitle 与 PlanDescription 均通过usePlan()读取该值。仓库内 ZCode 本地化的实现中对应的Shimmer包裹逻辑被注释保留见 plan.tsx 中的注释行可直接取消注释恢复上游的 shimmer 效果。Shimmer 微光动画shimmer 效果由 shimmer.tsx 提供其实现要点使用motion/react的motion组件动画在backgroundPosition上从100% center过渡到0% centerease: linear且repeat: Infinity无限循环通过background-clip: texttext-transparent让渐变只作用于文字本身dynamicSpread由(children?.length ?? 0) * spread计算spread默认2duration默认2秒即光带宽度随文本长度自动缩放组件经memo包裹以减少不必要的重渲染动画所用的 motion 组件在模块级缓存motionComponentCache避免渲染期间反复创建。值得注意的细节ZCode 在本地化时处理了一个主题变量兼容问题——当前主题未定义 ai-elements 默认依赖的--color-muted-foreground会导致 background-image 整条失效并配合text-transparent让文字完全不可见修复方式是保留上游 token 作为第一优先级同时回退到项目稳定存在的--color-foreground-subtle。折叠动画与滚动性能PlanContent依赖的 collapsible.tsx 实现了细粒度的动画控制外层用animate-collapsible-down/up处理高度变化内层 div 通过data-[stateopen]:animate-infade-in-0处理透明度淡入data-[stateclosed]时配合animation-fill-mode: forwards保持结束状态。源码注释还记录了一次性能修复大会话 trace 显示折叠动画层仅设置 duration/ease 时浏览器会默认transition-property: all而动画化scrollbar-color拖拽窗口时触发非合成动画因此显式禁用 CSS transition只保留 animate-in/out 关键帧动画——这说明折叠动画层针对长内容场景做了专门的滚动性能优化。无障碍设计PlanTrigger 渲染为sizeicon、variantghost的Button内置ChevronsUpDownIcon图标并附带span classNamesr-onlyToggle plan/span供屏幕阅读器读取键盘导航与焦点管理由 radix-ui 的CollapsibleTrigger原生承担。组件还通过data-slot如plan、plan-header、plan-title暴露稳定的选择器钩子便于测试与样式定位。ZCode 中的实际应用场景Plan 组件所属的 ai-elements 已被 ZCode 实际运用于 Agent 界面。仓库中 plan-guidance.tsx 展示了计划类信息如何与 ai-elements 家族组件MessageResponse、ToolOutput、ToolLayout组合渲染该渲染器会从工具调用的output、input、raw等字段中递归提取计划指南的 Markdown 文本依次尝试text/content/output键名再通过MessageResponse以左边框引用的形式展示作为 ZCode 中计划模式/计划指南工具调用的可视化载体。此外整个 ai-elements 技能.agents/skills/ai-elements与组件源码packages/ui/src/components/ai-elements/均注明派生自 vercel/ai-elements版权归 Vercel, Inc.遵循 Apache-2.0 许可完整许可与来源记录见 THIRD-PARTY-NOTICES.md其中列出了ai-elements (Apache-2.0)对应的组件目录与技能目录两条条目。自定义与常见问题修改组件样式安装后组件代码即属于你的项目可像修改自己的代码一样调整 Tailwind 类。例如去掉 Card 的圆角删除Plan外层Card的rounded-xl类即可PlanTitle/PlanDescription的children必须为字符串类型定义为string这是 shimmer 按文本长度计算光带的前提。组件未生效确认当前工作目录是项目根目录package.json所在处确认components.jsonshadcn 风格配置设置正确使用最新版 CLInpx ai-elementslatest。组件无样式项目需按 shadcn/uiTailwind 4规范配置——globals.css需导入 Tailwind 并包含 shadcn/ui 基础样式。主题切换失效停留在浅色模式应用需使用与 shadcn/ui、ai-elements 一致的data-theme系统默认在html上切换data-theme属性并确保tailwind.config.js使用class或data-选择器。module not found确认组件文件存在且tsconfig.json为/配置了 paths 别名{ compilerOptions: { baseUrl: ., paths: { /*: [./*] } } }小结Plan 组件以Collapsible 折叠能力 Card 卡片容器 Context 流式状态 Shimmer 微光动画四层组合为 AI 执行计划提供了完整的展示方案折叠状态下保持界面清爽流式状态下通过微光动画反馈生成进度展开后呈现完整步骤。其全部 Props 均透传至底层 shadcn/ui 与 radix-ui 原语既保持了开箱即用的体验又保留了逐级定制的自由度。若要在自己的 AI 应用中实现同款计划展示参照上文安装命令、示例脚本 与 组件源码 即可快速落地。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐Comp AI CRM 中的 AI Elements Plan 组件构建可折叠、支持流式渲染的 AI 执行计划展示方案Comp AI CRM 中的 AI Elements Plan 组件构建可折叠、支持流式渲染的 AI 执行计划展示方案 Plan 是 AI Elements后端前端CRM人工智能AI AgentZCode 中的 AI Elements Sandbox 组件用可折叠容器展示 AI 生成代码与执行输出ZCode 中的 AI Elements Sandbox 组件用可折叠容器展示 AI 生成代码与执行输出 本文围绕 ZCode 仓库内置的 AI ElemenLoco 框架 Mailer 实战指南基于后台 Worker 的 Rust 邮件发送、SMTP 配置与测试Loco 框架 Mailer 实战指南基于后台 Worker 的 Rust 邮件发送、SMTP 配置与测试 本篇技术指南围绕 LocoRust 全栈框架的人工智能大模型代码智能体AI Agent桌面应用后端前端CLI插件系统上一篇不会把手机搞变砖的安卓去预装工具Universal Android Debloater 使用指南下一篇SSDB 容器镜像优化多阶段构建与瘦身创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考