【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址https://gitcode.com/gh_mirrors/zco/ZCode点击查看免费下载导读Artifact是 ZCodeZ.ai 的开源 coding agent harness中用于承载 AI 生成内容代码、文档、分析结果等的结构化容器组件它自带头部区域与内容区域头部可容纳标题、描述与一组带 tooltip 的操作按钮从而把展示生成结果与对结果执行动作统一到同一个可复用的 UI 单元中。本文以仓库中的 artifact.md 为骨架结合 artifact.tsx 示例与 packages/ui 中的组件实现完整讲解组件树、全部 Props、典型组合方式以及底层实现细节帮助你在 ZCode 及其 UI 包中快速上手并二次定制。Artifact 是什么定位与适用场景Artifact组件为展示 AI 生成内容这一高频交互提供结构化容器。典型场景包括展示模型生成的代码片段如算法实现、脚本并配合运行 / 复制 / 下载操作展示生成文档或分析结果头部给出标题与更新时间等元信息在 AI 对话界面中组织一个可操作、可关闭、可复用的产出物卡片。在 ZCode 仓库中Artifact 属于ai-elements组件体系。这一体系源自 Vercel 的 ai-elementsZCode 将其本地化集成并注入了use client指令与 ZCode 自有的 UI 基础件。组件本体位于 packages/ui/src/components/ai-elements/artifact.tsx可组合示例位于 .agents/skills/ai-elements/scripts/artifact.tsx组件文档则记录于 .agents/skills/ai-elements/references/artifact.md。注references 中提到的scripts/artifact.tsx是相对该 skill 目录的示例文件并非仓库根目录脚本它演示如何使用 Artifact而不是应用内置功能。特性一览按原文档归纳Artifact 具备以下能力结构化的容器头部区域与内容区域分离内置头部支持标题title与描述description灵活的操作按钮可带 tooltip支持任意动作所有子组件均可定制样式通过className支持关闭按钮与操作按钮组简洁现代的外观边框、圆角与阴影响应式布局内容区可滚动自适应内容完整的 TypeScript 类型定义可组合架构以Artifact为根自由拼装子组件。组件树与职责划分Artifact 采用复合组件compound component设计完整结构如下Artifact ArtifactHeader div ArtifactTitle.../ArtifactTitle ArtifactDescription.../ArtifactDescription /div ArtifactActions ArtifactAction ... / ArtifactClose ... / /ArtifactActions /ArtifactHeader ArtifactContent.../ArtifactContent /Artifact各组件职责组件职责Artifact最外层容器负责整体边框、圆角、阴影与纵向布局ArtifactHeader头部条横向排布标题区与操作区带分隔线ArtifactTitle标题文本p元素ArtifactDescription描述文本p元素如更新时间ArtifactActions操作按钮的横向容器ArtifactAction单个操作按钮支持图标、label 与 tooltipArtifactClose关闭按钮默认显示 X 图标ArtifactContent内容区域可滚动全部 Props 参考Artifact /Prop类型默认值说明...propsReact.HTMLAttributesHTMLDivElement-其余 props 全部透传到根div包括classNameArtifactHeader /Prop类型默认值说明...propsReact.HTMLAttributesHTMLDivElement-透传到根divArtifactTitle /Prop类型默认值说明...propsReact.HTMLAttributesHTMLParagraphElement-透传到根p元素ArtifactDescription /Prop类型默认值说明...propsReact.HTMLAttributesHTMLParagraphElement-透传到根p元素ArtifactActions /Prop类型默认值说明...propsReact.HTMLAttributesHTMLDivElement-透传到根divArtifactAction /Prop类型默认值说明tooltipstring-悬停时显示的提示文本labelstring-供屏幕阅读器使用的无障碍标签iconLucideIcon-按钮中显示的 Lucide 图标组件...propsReact.ComponentPropstypeof Button-透传到底层 shadcn/uiButton组件含onClick、variant、size等ArtifactClose /Prop类型默认值说明...propsReact.ComponentPropstypeof Button-透传到底层Button组件ArtifactContent /Prop类型默认值说明...propsReact.HTMLAttributesHTMLDivElement-透传到根div完整示例展示一段生成的代码原文档与示例脚本都演示了Artifact 代码展示的典型用法。下面给出与 artifact.tsx 示例 等价的完整可运行代码use client; import { Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, } from /components/ai-elements/artifact; import { CodeBlock } from /components/ai-elements/code-block; import { CopyIcon, DownloadIcon, PlayIcon, RefreshCwIcon, ShareIcon } from lucide-react; const handleRun () console.log(Run); const handleCopy () console.log(Copy); const handleRegenerate () console.log(Regenerate); const handleDownload () console.log(Download); const handleShare () console.log(Share); const code # Dijkstras Algorithm implementation import heapq def dijkstra(graph, start): distances {node: float(inf) for node in graph} distances[start] 0 heap [(0, start)] visited set() while heap: current_distance, current_node heapq.heappop(heap) if current_node in visited: continue visited.add(current_node) for neighbor, weight in graph[current_node].items(): distance current_distance weight if distance distances[neighbor]: distances[neighbor] distance heapq.heappush(heap, (distance, neighbor)) return distances # Example graph graph { A: {B: 1, C: 4}, B: {A: 1, C: 2, D: 5}, C: {A: 4, B: 2, D: 1}, D: {B: 5, C: 1} } print(dijkstra(graph, A)); const Example () ( Artifact ArtifactHeader div ArtifactTitleDijkstraapos;s Algorithm Implementation/ArtifactTitle ArtifactDescriptionUpdated 1 minute ago/ArtifactDescription /div div classNameflex items-center gap-2 ArtifactActions ArtifactAction icon{PlayIcon} labelRun onClick{handleRun} tooltipRun code / ArtifactAction icon{CopyIcon} labelCopy onClick{handleCopy} tooltipCopy to clipboard / ArtifactAction icon{RefreshCwIcon} labelRegenerate onClick{handleRegenerate} tooltipRegenerate content / ArtifactAction icon{DownloadIcon} labelDownload onClick{handleDownload} tooltipDownload file / ArtifactAction icon{ShareIcon} labelShare onClick{handleShare} tooltipShare artifact / /ArtifactActions /div /ArtifactHeader ArtifactContent classNamep-0 CodeBlock classNameborder-none code{code} languagepython showLineNumbers / /ArtifactContent /Artifact ); export default Example;要点说明每个ArtifactAction同时给出icon视觉图标、label无障碍文本与tooltip悬停提示若未传icon也可直接以children放入自定义内容ArtifactContent通过classNamep-0去掉内边距让内嵌的CodeBlock紧贴内容区CodeBlock使用classNameborder-none消除重复边框实现无边框嵌合效果在 ZCode 的 UI 包中CodeBlock是增强版组件支持 shiki 语法高亮、行号、Mermaid 渲染与行定位见 code-block.tsx示例中的language、showLineNumbers均由其透传处理。源码级实现解析packages/ui/src/components/ai-elements/artifact.tsx 完整实现了上述组件树关键细节如下容器与布局Artifact使用flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm即纵向弹性布局、圆角边框、背景色与轻阴影配合overflow-hidden保证内容溢出时不破坏圆角。头部条ArtifactHeader使用flex items-center justify-between border-b bg-muted/50 px-4 py-3左标题右操作底部边框分隔浅灰底与内边距形成视觉分区。标题与描述ArtifactTitle渲染为p使用font-medium text-foreground text-ui-baseArtifactDescription同样为p使用text-muted-foreground与标题形成主次层次。操作按钮ArtifactAction默认sizesm、variantghost的Button图标尺寸size-4同时渲染一个sr-only的隐藏文本取label || tooltip保证无障碍可读性。当传入tooltip时按钮会被包进TooltipProvider Tooltip TooltipTrigger(asChild)结构借助 ZCode 基于 Radix 的 Tooltip 组件tooltip.tsx实现悬停提示。关闭按钮ArtifactClose同样是 ghost 风格的小按钮未提供children时默认渲染XIcon并附带sr-only的 Close 文本。内容区ArtifactContent使用flex-1 overflow-auto p-4即占据剩余高度并支持独立滚动配合Artifact的overflow-hidden形成头部固定、内容滚动的经典布局。从类型定义看ArtifactActionProps ComponentPropstypeof Button { tooltip?: string; label?: string; icon?: LucideIcon }因此onClick、disabled、variant等 Button 原生能力全部可用。在 ZCode 中的集成方式与前置条件在 ZCode 仓库中ai-elements 组件已作为源码直接集成进 UI 包组件目录为 packages/ui/src/components/ai-elements/其中artifact.tsx与code-block.tsx、message.tsx等组件共享同一套基于 shadcn/ui 的基础件Button、Tooltip 等。接入 Artifact 组件需要满足以下前置条件均已在 packages/ui/components.json 与 ui 包中配置就绪项目基于 shadcn/ui 风格配置components.json中aliases将/指向源码根目录components: /components、ui: /components/ui并声明了ai-elements注册源Tailwind 使用 CSS 变量cssVariables: true与 lucide 图标库iconLibrary: lucide依赖lucide-reactui 包 package.json 中声明与 Radix 系列组件Tooltip 等。在其他项目中使用时可通过以下任一方式安装# 方式一使用 ai-elements CLI 安装推荐 npx ai-elementslatest add artifact # 方式二使用 shadcn/ui CLI指定 ai-elements 注册源 npx shadcnlatest add artifact --registry ai-elements安装后组件代码会落到项目的components/ai-elements/目录随后即可像上文示例那样直接导入使用。由于组件以源码形式存在你可以直接打开artifact.tsx修改默认样式或扩展行为。提示如果项目已有 shadcn 工作流建议按项目的packageManager选择对应的 runner例如pnpm dlx ai-elementslatest或bunx --bun ai-elementslatest。常见问题排查组件未渲染任何样式确认全局样式文件globals.css已引入 Tailwind 与 shadcn/ui 基础样式ZCode 的 ui 包以src/styles.css为样式入口见 components.json。导入报 module not found确认tsconfig.json已配置/*路径别名指向组件目录并确认目标文件确实存在。希望调整按钮数量或布局直接增删ArtifactActions内的ArtifactAction或替换ArtifactContent中的内容组件即可无需改动 Artifact 本体。小结Artifact是 ZCode 中组织 AI 生成内容的标准容器ArtifactArtifactHeader标题/描述ArtifactActions带 tooltip 的动作按钮ArtifactContent可滚动内容区的组合既能整齐呈现代码、文档等产出物又能把运行、复制、重新生成、下载、分享等操作就近安放。无论是直接复用仓库中的 组件实现还是参考 示例脚本 在自有项目中组合定制本文列出的组件树、Props 表与实现要点都可以作为你接入和改造的直接依据。赞分享【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址https://gitcode.com/gh_mirrors/zco/ZCode点击查看免费下载相关推荐ZCode 中的 AI Elements Sandbox 组件用可折叠容器展示 AI 生成代码与执行输出ZCode 中的 AI Elements Sandbox 组件用可折叠容器展示 AI 生成代码与执行输出 本文围绕 ZCode 仓库内置的 AI ElemenZCode 集成 AI Elements Agent 组件在 React 应用中构建可组合的 AI Agent 配置展示界面ZCode 集成 AI Elements Agent 组件在 React 应用中构建可组合的 AI Agent 配置展示界面 导读 本指南以 ZCode 仓库ZCode AI Elements WebPreview 组件实战在文档与演示中嵌入 AI 生成 UI 的实时预览ZCode AI Elements WebPreview 组件实战在文档与演示中嵌入 AI 生成 UI 的实时预览 导读 WebPreview 是 ZCode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考