人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载导读本文围绕 ZCode 仓库内.agents/skills/ai-elements/references/task.md文档深入讲解Task组件——一个用于展示 AI 工作流进度的可折叠任务列表组件。它由主容器Task、可点击的TaskTrigger头部与可折叠的TaskContent内容区组成配合TaskItem、TaskItemFile可完整渲染任务进度、状态与关联文件。读完本文你将掌握如何通过npx ai-elementslatest add task安装组件如何用 AI SDK 的experimental_generateObject/streamObject驱动结构化任务数据流以及每个子组件的 Props 语义与扩展方式并看到 ZCode 仓库中的本地化实现源码。背景AI Elements 与 ZCode 的集成方式SKILL.md 说明AI Elements 是构建在 shadcn/ui 之上的组件库与自定义 registry用于快速搭建 AI 原生应用界面。ZCode 仓库将其以“技能 本地组件”的形式集成技能文档位于.agents/skills/ai-elements/其中references/task.md是Task组件的官方参考文档对应示例代码位于 scripts/task.tsx本地化后的组件实现在 packages/ui/src/components/ai-elements/task.tsx出处与许可信息记录在根目录 THIRD-PARTY-NOTICES.md确认ai-elements采用 Apache-2.0 许可。注意SKILL.md 明确指出references/ 中出现的scripts/路径是指向本技能目录.agents/skills/ai-elements/scripts/内的示例文件而非仓库根目录的scripts/它们只是组件示例不是已安装的应用功能。Task 组件是什么Task是一个可折叠的任务列表组件用于展示 AI 工作流进度带状态指示器和可选描述。它由以下部分组成Task主容器负责折叠状态管理TaskTrigger可点击的头部区域展示任务标题TaskContent可折叠的内容区承载任务明细TaskItem内容区内的单项任务行TaskItemFile文件类型的单项展示通常配合图标与文件名使用。本地实现剖析ZCode 的 packages/ui/src/components/ai-elements/task.tsx 给出了全部源码export const Task ({ defaultOpen true, className, ...props }: TaskProps) ( Collapsible className{cn(flex flex-col gap-1, className)} defaultOpen{defaultOpen} {...props} / );Task基于 shadcn/ui 的Collapsible实现默认defaultOpentrueTaskTrigger使用CollapsibleTrigger asChild将触发行为挂载到自定义标题行上标题行包含搜索图标、标题文本与旋转箭头展开时rotate-180TaskContent使用CollapsibleContent内层通过左边框竖线与缩进呈现层级关系TaskItem、TaskItemFile均为普通div扩展ComponentPropsdivTaskItemFile带有边框与bg-secondary的胶囊样式。底层的 collapsible.tsx 基于radix-ui的Collapsible原语封装TaskContent的展开/收起动画由data-[stateopen]/data-[stateclosed]驱动的关键帧动画实现并显式禁用 CSS transition 以避免拖拽窗口时的非合成动画问题。安装与 AI Elements 其它组件一致通过 CLI 添加到项目npx ai-elementslatest add task安装前确保满足前置条件源自 SKILL.mdNode.js 18 或更高版本已安装 AI SDK 的 Next.js 项目已安装 shadcn/ui未安装时 CLI 会自动安装推荐使用pnpm dlx ai-elementslatest或bunx --bun ai-elementslatest等与项目packageManager匹配的包管理器 runner。安装后组件代码位于/components/ai-elements/目录或你在 components.json 中配置的目录可直接当作普通 React 组件使用代码完全属于你的项目可自由定制。与 AI SDK 结合构建 Mock 异步编程 Agenttask.md给出了一个完整示例用 AI SDK 的experimental_generateObject/useObject构建一个“Mock 异步编程 Agent”实时生成并展示开发任务工作流。前端组件在app/page.tsx中添加如下组件完整代码见 task.mduse client; import { experimental_useObject as useObject } from ai-sdk/react; import { Task, TaskItem, TaskItemFile, TaskTrigger, TaskContent, } from /components/ai-elements/task; import { tasksSchema } from /app/api/task/route;关键点通过useObject({ api: /api/agent, schema: tasksSchema })建立与后端的结构化对象流连接返回object、submit与isLoadingiconMap将react、typescript、javascript、css、html、json、markdown等文件类型映射到icons-pack/react-simple-icons的图标组件及对应品牌色renderTaskItem根据item.type file决定渲染普通文本还是带文件图标与文件名的TaskItemFile每个任务用Task defaultOpen{taskIndex 0}渲染——第一个任务默认展开后续任务默认收起TaskTrigger title{task.title || Loading...} /展示标题TaskContent内渲染TaskItem列表加载态处理isLoading !object时显示 Generating tasks... 占位文本。后端路由在app/api/agent.ts中添加如下路由完整代码见 task.mdimport { streamObject } from ai; import { z } from zod; export const taskItemSchema z.object({ type: z.enum([text, file]), text: z.string(), file: z.object({ name: z.string(), icon: z.string(), color: z.string().optional(), }).optional(), }); export const taskSchema z.object({ title: z.string(), items: z.array(taskItemSchema), status: z.enum([pending, in_progress, completed]), }); export const tasksSchema z.object({ tasks: z.array(taskSchema), }); export const maxDuration 30; export async function POST(req: Request) { const { prompt } await req.json(); const result streamObject({ model: openai/gpt-4o, schema: tasksSchema, prompt: You are an AI assistant that generates realistic development task workflows. ..., }); return result.toTextStreamResponse(); }要点说明三段 Zod Schema 定义了数据契约任务项文本或文件、任务标题 明细 状态、任务列表status字段预留了pending/in_progress/completed三种状态对应组件的状态指示器能力streamObject将模型输出按 schema 约束流式解析toTextStreamResponse()把结构化流以文本流响应返回前端maxDuration 30表示允许流式响应最长 30 秒Vercel 平台的约定prompt 中要求生成 3-4 个任务、每个任务 4-6 个明细项且状态从 pending 到 in_progress 再到 completed 递进确保输出符合组件展示形态。Features 一览task.md 列出的功能特性提供 pending、in-progress、completed、error 四种状态的可视图标可展开的任务内容区用于承载任务描述与补充信息内置进度计数器展示已完成与总任务数对比支持带自定义时序的可选渐进式任务揭示progressive reveal任务项内支持自定义内容如文件、链接等完整的 TypeScript 类型定义全链路类型安全支持键盘导航与屏幕阅读器基于 radix-ui 的无障碍语义。Props 参考以下是task.md中给出的全部 Props 表可结合 task.tsx 源码验证。Task /PropTypeDefaultDescriptiondefaultOpenbooleantrue任务默认是否展开。...propsReact.ComponentPropstypeof Collapsible-其余 props 透传到根 Collapsible 组件。TaskTrigger /PropTypeDefaultDescriptiontitlestringRequired显示在 trigger 中的任务标题。...propsReact.ComponentPropstypeof CollapsibleTrigger-其余 props 透传到 CollapsibleTrigger 组件。TaskContent /PropTypeDefaultDescription...propsReact.ComponentPropstypeof CollapsibleContent-其余 props 透传到 CollapsibleContent 组件。TaskItem /PropTypeDefaultDescription...propsReact.ComponentPropsdiv-其余 props 透传到底层 div。TaskItemFile /PropTypeDefaultDescription...propsReact.ComponentPropsdiv-其余 props 透传到底层 div。说明TaskItem与TaskItemFile在本地源码中类型定义为ComponentPropsdiv即完全等价于普通 div 的 props因此可自由追加className、onClick、data-*等任意属性。完整示例scripts/task.tsx仓库内的 scripts/task.tsx 是一个无需后端即可运行的静态示例展示如何用TaskItemFile内嵌文件图标use client; import { SiReact } from icons-pack/react-simple-icons; import { Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger } from /components/ai-elements/task; import { nanoid } from nanoid; import type { ReactNode } from react; const Example () { const tasks: { key: string; value: ReactNode }[] [ { key: nanoid(), value: Searching app/page.tsx, components structure }, { key: nanoid(), value: ( span classNameinline-flex items-center gap-1 keyread-page-tsx Read TaskItemFile SiReact classNamesize-4 color#149ECA / spanpage.tsx/span /TaskItemFile /span ), }, { key: nanoid(), value: Scanning 52 files }, // ... ]; return ( div style{{ height: 200px }} Task classNamew-full TaskTrigger titleFound project files / TaskContent {tasks.map((task) ( TaskItem key{task.key}{task.value}/TaskItem ))} /TaskContent /Task /div ); }; export default Example;这个示例展示了几个实用模式Task上直接传classNamew-full控制宽度TaskTrigger只传title即可本地源码会在无children时渲染默认的“图标 标题 箭头”行TaskItem的 children 可以是任意 ReactNode包括带TaskItemFile的混合内容使用nanoid()生成稳定的 React key。扩展与定制建议由于所有组件代码安装后都属于你的项目而非隐藏在库中你可以改样式直接编辑components/ai-elements/task.tsx中的 Tailwind 类例如调整TaskItemFile的圆角、边框或背景色加状态指示根据taskSchema.status字段pending/in_progress/completed给TaskTrigger行前置对应的状态图标加进度计数在TaskContent内自行统计 items 数量或对tasksSchema.tasks做“已完成/总数”汇总后展示渐进式揭示结合useObject的流式更新特性在object?.tasks到达时按序渲染实现任务逐条出现的渐进效果无障碍无需额外处理CollapsibleTrigger/CollapsibleContent已继承 radix-ui 的键盘交互与 ARIA 语义。常见问题排查组件无样式确认项目已正确配置 shadcn/uiTailwind 4 下globals.css需导入 Tailwind 与 shadcn 基础样式CLI 未添加文件确认当前目录是项目根目录含package.json、components.json配置正确并确保使用最新版 CLInpx ai-elementslatest模块找不到确认tsconfig.json已配置/*路径别名指向项目根目录AI 助手无法访问组件检查配置文件为合法 JSON、路径正确并重启编辑器。结语Task组件是 AI 原生界面中“过程可视化”的关键一环——把模型正在执行的多步骤工作流以可折叠、带状态、可内嵌文件引用的形式实时呈现给用户。通过useObjectstreamObject的结构化流式通道前端与后端共享同一份 Zod Schema 契约既保证了类型安全也让任务进度可以随 token 流逐步“生长”。如果你想在 ZCode 的 UI 体系内复刻这类交互可以直接以 packages/ui/src/components/ai-elements/task.tsx 为起点结合 scripts/task.tsx 的示例快速落地。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐ZCode AI Elements Queue 组件深度解析用 React 构建 AI 消息队列、Todo 与可折叠任务面板ZCode AI Elements Queue 组件深度解析用 React 构建 AI 消息队列、Todo 与可折叠任务面板 本文以 ZCode 仓库中 .a人工智能大模型代码智能体AI Agent桌面应用后端前端CLI插件系统ZCode 项目中的 AI Elements Queue 组件构建消息队列、待办列表与可折叠任务分区的完整指南ZCode 项目中的 AI Elements Queue 组件构建消息队列、待办列表与可折叠任务分区的完整指南 导读 Queue 是 AI ElementsZCode 中的 AI Elements Sources 组件为 AI 对话构建可折叠引用来源展示ZCode 中的 AI Elements Sources 组件为 AI 对话构建可折叠引用来源展示 导读 Sources 是 AI Elements 组件库中人工智能大模型代码智能体AI Agent桌面应用后端前端CLI插件系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考