人工智能大模型代碼智能體AI Agent桌面應(yīng)用后端前端CLI【免費(fèi)下載鏈接】ZCodeZCode 是 AI 編程工作臺(tái)提供桌面應(yīng)用、瀏覽器界面和終端 Agent。本倉(cāng)庫(kù)包含客戶端、后端服務(wù)、共享 UI以及 Agent CLI 與運(yùn)行時(shí)源碼。項(xiàng)目地址https://gitcode.com/zai-org/ZCode點(diǎn)擊查看免費(fèi)下載AI Elements 是一套構(gòu)建在 shadcn/ui 之上的組件庫(kù)與自定義注冊(cè)表為 AI 原生應(yīng)用提供會(huì)話Conversation、消息Message、提示輸入PromptInput、工具調(diào)用展示Tool、推理過程Reasoning等開箱即用的 React 組件。本文以智譜 AI 的 ZCode 倉(cāng)庫(kù)中內(nèi)置的 ai-elements 技能文檔為主體結(jié)合倉(cāng)庫(kù)內(nèi) zcode/ui 包 中實(shí)際的本地化集成源碼系統(tǒng)講解 AI Elements 的環(huán)境準(zhǔn)備、CLI 安裝、組件組合用法、可擴(kuò)展性與定制方式以及常見故障排查方法。讀完本文你將掌握如何在 ZCode 這類 AI 編程工作臺(tái)中快速搭建具備消息流、流式輸出、工具調(diào)用、附件上傳與模型選擇能力的完整聊天界面。AI Elements 是什么AI Elements 是一個(gè)組件庫(kù)與自定義注冊(cè)表custom registry構(gòu)建在 shadcn/ui 之上目標(biāo)是把 AI 原生應(yīng)用中最常復(fù)用的界面能力會(huì)話列表、消息氣泡、輸入框、工具執(zhí)行面板等以「組件即源碼」的方式交付給開發(fā)者。它與傳統(tǒng) UI 組件庫(kù)最大的區(qū)別在于分發(fā)模型組件不是打包進(jìn) npm 依賴的黑盒而是通過 CLI 將組件代碼直接下載并整合進(jìn)你的項(xiàng)目目錄默認(rèn)位于/components/ai-elements/也可跟隨 shadcn 配置的 components 目錄。這意味著組件代碼成為你代碼庫(kù)的一部分可以像自己寫的代碼一樣直接閱讀、修改與定制使用方式與普通 React 組件完全一致無需額外的 Provider 或全局初始化每個(gè)組件盡可能透?jìng)髟?HTML 屬性例如Message繼承HTMLAttributesHTMLDivElement擴(kuò)展成本極低。在 ZCode 倉(cāng)庫(kù)中這一套組件已經(jīng)被完整地本地化整合進(jìn)了zcode/ui包目錄為 packages/ui/src/components/ai-elements/包含conversation.tsx、message.tsx、tool.tsx、prompt-input.tsx、reasoning.tsx、attachments.tsx、code-block.tsx、terminal.tsx等 40 余個(gè)本地實(shí)現(xiàn)文件。每個(gè)文件頭部都帶有明確的來源與授權(quán)聲明Derived from vercel/ai-elementsCopyright 2023 Vercel, Inc.Apache-2.0由 ZCode 做本地集成與格式化適配完整許可與來源信息可查看倉(cāng)庫(kù)根目錄的 THIRD-PARTY-NOTICES.md。在 ZCode 中的本地化集成方式從倉(cāng)庫(kù)源碼可以確認(rèn)ZCode 的 UI 層已經(jīng)深度采用了 AI Elementspackages/ui/components.json 在registries字段中注冊(cè)了ai-elements: https://ai-sdk.dev/elements/api/registry/{name}.json說明該包直接復(fù)用了 AI Elements 的官方 registryshadcnCLI 可以按名拉取對(duì)應(yīng)組件packages/ui/package.json 的exports中顯式導(dǎo)出了./message指向./src/components/ai-elements/message.tsx依賴中同時(shí)包含aiAI SDK v6、use-stick-to-bottom、streamdown、shiki等與 AI Elements 配套的運(yùn)行時(shí)庫(kù)業(yè)務(wù)側(cè)已經(jīng)在真實(shí)使用這些組件例如 ToolCallBlocks/ToolCallBody.tsx 從 ai-elements 導(dǎo)入了CodeBlock、MessageResponse、ToolInput、ToolOutput來渲染工具調(diào)用結(jié)果。從本地實(shí)現(xiàn)看ZCode 還做了一些適配性改造以 conversation.tsx 為例它在Conversation上固定了initialinstant與resizeinstant以避免任務(wù)切換時(shí)「恢復(fù)歷史消息 → 自動(dòng)吸底」被 smooth 動(dòng)畫疊加成拖沓的緩動(dòng)導(dǎo)入方式統(tǒng)一改為帶.js后綴的相對(duì) ESM 導(dǎo)入規(guī)避 NodeNext 下 package.jsonexports未導(dǎo)出深層路徑導(dǎo)致的解析問題。這些都是將上游組件真正落地到生產(chǎn)級(jí) AI 工作臺(tái)時(shí)的典型工程實(shí)踐。環(huán)境準(zhǔn)備Prerequisites在安裝 AI Elements 之前需要確認(rèn)項(xiàng)目滿足以下條件依賴要求說明Node.js18 或更高版本運(yùn)行安裝 CLI 與構(gòu)建前端的基礎(chǔ)運(yùn)行時(shí)Next.js 項(xiàng)目已初始化組件面向 React 生態(tài)示例以 Next.js App Router 展示AI SDK已安裝提供useChat、streamText、UIMessage等核心 API組件圍繞其數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)shadcn/ui已安裝或由安裝命令自動(dòng)安裝AI Elements 構(gòu)建在 shadcn/ui 之上未安裝時(shí)執(zhí)行任一安裝命令會(huì)自動(dòng)補(bǔ)齊此外官方建議使用 AI Gateway 并在env.local中配置AI_GATEWAY_API_KEY這樣可以在不逐個(gè)配置各家模型廠商 API Key 的情況下統(tǒng)一調(diào)用模型便于快速實(shí)驗(yàn)。安裝組件安裝 AI Elements 組件有兩種等價(jià)方式效果一致將所選組件的代碼與所需依賴寫入項(xiàng)目。方式一AI Elements CLI推薦npx ai-elementslatest add component-name例如安裝會(huì)話與消息組件npx ai-elementslatest add conversation npx ai-elementslatest add message npx ai-elementslatest add prompt-input重要所有 CLI 命令都應(yīng)使用項(xiàng)目packageManager對(duì)應(yīng)的包運(yùn)行器即npx ai-elementslatest、pnpm dlx ai-elementslatest或bunx --bun ai-elementslatest。示例統(tǒng)一用npx實(shí)際項(xiàng)目中請(qǐng)?zhí)鎿Q為與你的項(xiàng)目一致的運(yùn)行器。方式二shadcn/ui CLI如果項(xiàng)目已經(jīng)采用 shadcn 的工作流可以直接通過 shadcn CLI 安裝。前提是在components.json中配置好 AI Elements registry——ZCode 的做法可作參考見 packages/ui/components.json{ registries: { ai-elements: https://ai-sdk.dev/elements/api/registry/{name}.json } }配置完成后shadcn CLI 即可按名拉取 AI Elements 組件。執(zhí)行成功后終端會(huì)顯示文件已添加的確認(rèn)信息隨后即可在代碼中使用該組件?；A(chǔ)使用五分鐘跑通一個(gè)對(duì)話組件組件安裝完成后像使用任何 React 組件一樣導(dǎo)入即可。以下是來自技能文檔的完整示例保存為conversation.tsx它用Message系列組件渲染useChat返回的流式消息use client; import { Message, MessageContent, MessageResponse } from /components/ai-elements/message; import { useChat } from ai-sdk/react; const Example () { const { messages } useChat(); return ( {messages.map(({ role, parts }, index) ( Message from{role} key{index} MessageContent {parts.map((part, i) { switch (part.type) { case text: return MessageResponse key{${role}-${i}}{part.text}/MessageResponse; } })} /MessageContent /Message ))} / ); }; export default Example;關(guān)鍵點(diǎn)解讀Message from{role}按消息角色user/assistant自動(dòng)切換左右對(duì)齊與樣式用戶消息使用次級(jí)背景色助手消息通欄展示MessageContent內(nèi)容容器負(fù)責(zé)間距與用戶消息的主題色bg-primary等MessageResponse渲染 Markdown 正文默認(rèn)支持 GFM、數(shù)學(xué)公式與「不完整 Markdown 智能解析」數(shù)據(jù)源直接來自 AI SDK 的useChat()messages數(shù)組無需二次轉(zhuǎn)換組件與 AI SDK 的數(shù)據(jù)模型天然對(duì)齊。由于組件代碼就在你的項(xiàng)目里你可以打開組件文件查看實(shí)現(xiàn)也可以按自己的需求直接修改。組件體系一覽技能文檔在 references/ 目錄 下為每個(gè)組件提供了獨(dú)立文檔并在 scripts/ 目錄 提供可直接運(yùn)行的示例。以下表格匯總了核心組件及其用途完整列表見 references 目錄組件用途參考文檔Conversation會(huì)話容器自動(dòng)吸底滾動(dòng)、空態(tài)、滾動(dòng)按鈕、Markdown 導(dǎo)出conversation.mdMessage消息氣泡、動(dòng)作按鈕、回復(fù)分支、Markdown 渲染message.mdPromptInput輸入框 附件上傳 提交按鈕 模型選擇下拉prompt-input.mdTool可折疊的工具調(diào)用詳情參數(shù)、狀態(tài)、輸出/錯(cuò)誤tool.mdReasoning流式推理過程展示自動(dòng)展開/收起reasoning.mdAttachments附件展示網(wǎng)格/行內(nèi)/列表三種形態(tài)attachments.mdCodeBlock代碼塊語法高亮、行號(hào)、復(fù)制按鈕code-block.mdTerminal流式終端輸出支持 ANSI 顏色與自動(dòng)滾動(dòng)terminal.mdChain of Thought結(jié)構(gòu)化的分步思考過程展示chain-of-thought.mdSuggestion / Queue / Task 等輸入建議、隊(duì)列狀態(tài)、任務(wù)進(jìn)度等場(chǎng)景化組件見 references 目錄核心組件實(shí)戰(zhàn)Conversation會(huì)話容器Conversation負(fù)責(zé)包裹消息列表并自動(dòng)滾動(dòng)到底部同時(shí)提供「不在底部時(shí)出現(xiàn)的滾動(dòng)按鈕」。核心子組件與能力ConversationContent內(nèi)容區(qū)負(fù)責(zé)消息間距與內(nèi)邊距ConversationEmptyState空會(huì)話時(shí)的引導(dǎo)態(tài)title、description、icon均可定制ConversationScrollButton僅在未處于底部時(shí)顯示點(diǎn)擊回到最新消息ConversationDownload把整個(gè)會(huì)話導(dǎo)出為 Markdown 文件默認(rèn)文件名conversation.mdmessagesToMarkdown導(dǎo)出邏輯的底層工具函數(shù)可自定義消息格式化器例如只取文本部分拼接import { messagesToMarkdown } from /components/ai-elements/conversation; const customMarkdown messagesToMarkdown( messages, (msg, i) [${msg.role}]: ${msg.parts .filter((p) p.type text) .map((p) p.text) .join()}, );底層實(shí)現(xiàn)上Conversation基于use-stick-to-bottom庫(kù)ZCode 本地實(shí)現(xiàn)見 conversation.tsx支持contextRef、instance、render prop 等進(jìn)階用法滾動(dòng)按鈕通過useStickToBottomContext()讀取isAtBottom狀態(tài)并調(diào)用scrollToBottom。一個(gè)完整的會(huì)話 UI 通常由ConversationPromptInput組合而成消息區(qū)負(fù)責(zé)展示輸入?yún)^(qū)負(fù)責(zé)提交二者共享 AI SDK 的useChat狀態(tài)。Message消息展示全家桶Message組件族覆蓋了聊天消息展示的大部分需求消息渲染Message角色與對(duì)齊、MessageContent內(nèi)容容器、MessageResponseMarkdown 正文操作按鈕MessageActionsMessageAction支持帶 tooltip 的 Retry / Copy / Like 等操作label用于無障礙朗讀未提供 tooltip 時(shí)也作為后備文本回復(fù)分支MessageBranch、MessageBranchContent、MessageBranchSelector、MessageBranchPrevious、MessageBranchNext、MessageBranchPage用于在多條候選回復(fù)之間切換defaultBranch指定默認(rèn)分支默認(rèn) 0onBranchChange監(jiān)聽切換工具欄MessageToolbar以 space-between 布局把操作按鈕與分支選擇器放在消息下方一行。MessageResponse的 Markdown 渲染值得一提它是流式聊天體驗(yàn)的關(guān)鍵parseIncompleteMarkdown默認(rèn)true自動(dòng)修復(fù)流式傳輸中的不完整 Markdown未閉合的代碼塊、列表等remarkPlugins默認(rèn)[remarkGfm, remarkMath]與rehypePlugins默認(rèn)含rehypeKatexGFM 表格、任務(wù)列表、刪除線與數(shù)學(xué)公式allowedImagePrefixes/allowedLinkPrefixes限制圖片與鏈接的 URL 前綴defaultOrigin處理相對(duì)地址兼顧安全與靈活性components傳入自定義 React 組件覆蓋 Markdown 元素渲染。在 ZCode 本地實(shí)現(xiàn)中見 message.tsx約 1670 行Markdown 渲染鏈路替換為streamdown全家桶Streamdown配合streamdown/cjk、streamdown/code、streamdown/math、streamdown/mermaid插件語法高亮使用shiki并額外引入了remark-cjk-friendly-gfm-strikethrough提升中文文本的刪除線渲染質(zhì)量——這是針對(duì)中文 AI 工作臺(tái)場(chǎng)景的典型本地化增強(qiáng)。PromptInput帶附件的提示輸入PromptInput允許用戶攜帶文件附件向大模型發(fā)送消息內(nèi)置 textarea、文件上傳、提交按鈕與模型選擇下拉。組件按頭部/主體/底部三段式組織PromptInputHeader附件展示區(qū)PromptInputBody自動(dòng)伸縮的PromptInputTextareaEnter 提交、ShiftEnter 換行PromptInputFooter工具欄PromptInputTools與提交按鈕PromptInputSubmit。工具欄能力包括PromptInputActionMenu附件/截圖菜單內(nèi)含PromptInputActionAddAttachments與PromptInputActionAddScreenshotPromptInputButton自定義動(dòng)作按鈕支持帶快捷鍵提示的 tooltip// 簡(jiǎn)單字符串 tooltip PromptInputButton tooltipSearch the web GlobeIcon size{16} / /PromptInputButton // 帶快捷鍵提示 PromptInputButton tooltip{{ content: Search, shortcut: ?K }} / // 自定義位置 PromptInputButton tooltip{{ content: Search, side: bottom }} /PromptInputSelect系列模型下拉Trigger / Content / Item / Value 全套提交按鈕PromptInputSubmit根據(jù)statussubmitted / streaming / error自動(dòng)切換圖標(biāo)表單級(jí)能力onSubmit收到PromptInputMessage含text與files、accept/multiple/maxFiles/maxFileSize約束、globalDrop全文檔拖拽、syncHiddenInput原生表單隱藏輸入同步。PromptInput還提供狀態(tài)管理 hooksconst attachments usePromptInputAttachments(); attachments.files; // 當(dāng)前附件數(shù)組 attachments.add(files); // 添加文件 attachments.remove(id); // 按 ID 移除 attachments.clear(); // 清空 attachments.openFileDialog(); // 打開文件選擇對(duì)話框當(dāng)需要把輸入狀態(tài)提升到組件外部統(tǒng)一控制時(shí)使用可選的PromptInputProvider配合usePromptInputController/useProviderAttachments/usePromptInputReferencedSources在任意子組件中訪問文本輸入與附件狀態(tài)完整 hooks 與屬性表見 prompt-input.md本地實(shí)現(xiàn)見 prompt-input.tsx。Tool工具調(diào)用展示Tool組件專為 AI SDK 的ToolUIPart設(shè)計(jì)用可折疊面板展示工具調(diào)用的輸入、輸出、狀態(tài)與錯(cuò)誤Tool defaultOpen{true} ToolHeader typetool-fetch_weather_data state{weatherTool.state} / ToolContent ToolInput input{weatherTool.input} / ToolOutput output{MessageResponse{formatWeatherResult(weatherTool.output)}/MessageResponse} errorText{weatherTool.errorText} / /ToolContent /ToolToolHeader根據(jù)state自動(dòng)渲染狀態(tài)徽標(biāo)getStatusBadge工具函數(shù)支持的狀態(tài)包括input-streamingPending、input-availableRunning、approval-requestedAwaiting Approval、approval-respondedResponded、output-availableCompleted、output-errorError、output-deniedDeniedToolInput以帶語法高亮的 JSON 展示參數(shù)ToolOutput展示執(zhí)行結(jié)果或errorText錯(cuò)誤信息完成/出錯(cuò)狀態(tài)默認(rèn)展開以呈現(xiàn)結(jié)果類型導(dǎo)出ToolPart ToolUIPart | DynamicToolUIPart覆蓋靜態(tài)與動(dòng)態(tài)兩種工具 UI 數(shù)據(jù)。后端示例使用 AI SDK 的streamText聲明帶 Zod 參數(shù)校驗(yàn)的工具并toUIMessageStreamResponse()流式返回前端即可無縫渲染完整示例見 tool.md本地實(shí)現(xiàn)見 tool.tsx。Reasoning流式推理展示Reasoning組件展示模型的思考過程流式期間自動(dòng)展開、結(jié)束后自動(dòng)收起Reasoning classNamew-full isStreaming{isReasoningStreaming} ReasoningTrigger / ReasoningContent{reasoningText}/ReasoningContent /ReasoningisStreaming為 true 時(shí)自動(dòng)打開并顯示脈沖動(dòng)畫指示器ReasoningTrigger自定義思考文案可通過getThinkingMessage(isStreaming, duration)定制ReasoningContent推理文本經(jīng) Streamdown 渲染useReasoning()子組件訪問{ isStreaming, isOpen, setIsOpen, duration }上下文。適用于 Deepseek R1、Claude extended thinking 等以連續(xù)塊輸出思考內(nèi)容的模型。如果模型輸出的是離散、帶標(biāo)簽的步驟如搜索查詢、工具調(diào)用官方建議改用 Chain of Thought 組件做結(jié)構(gòu)化展示。后端啟用推理流需要顯式開啟result.toUIMessageStreamResponse({ sendReasoning: true })。Attachments / CodeBlock / Terminal高頻場(chǎng)景組件Attachments統(tǒng)一展示圖片、視頻、音頻、文檔與來源文件。三種形態(tài)variantgrid消息內(nèi)縮略圖網(wǎng)格、inline輸入?yún)^(qū)緊湊徽標(biāo) 懸停預(yù)覽、list帶元數(shù)據(jù)的文件列表。輔助函數(shù)getMediaCategory(data)返回image | video | audio | document | source | unknowngetAttachmentLabel(data)返回展示名。刪除按鈕onRemove回調(diào)與AttachmentRemove組件配套見 attachments.md。CodeBlockShiki 語法高亮可選行號(hào)頭部可組合CodeBlockTitle圖標(biāo) 文件名與CodeBlockActionsCodeBlockCopyButton復(fù)制成功態(tài)默認(rèn) 2000ms支持CodeBlockLanguageSelector多語言切換與dark類深色模式。底層CodeBlockContainer使用contentVisibility做渲染性能優(yōu)化。Terminal流式終端輸出ansi-to-react解析 ANSI 顏色256 色、粗體、斜體、下劃線內(nèi)置流式光標(biāo)動(dòng)畫、自動(dòng)滾動(dòng)、復(fù)制與清空按鈕見 terminal.md?？蓴U(kuò)展性AI Elements 的設(shè)計(jì)原則是組件盡可能透?jìng)髟鷮傩?。例如Message繼承HTMLAttributesHTMLDivElement凡是div支持的屬性className、onClick、id、ARIA 屬性等都可以直接傳入Tool透?jìng)鰿ollapsible的 propsConversationScrollButton透?jìng)?shadcn/uiButton的 props。這意味著你可以用className疊加 Tailwind 類做樣式微調(diào)用受控 props如Reasoning的open/onOpenChange接管內(nèi)部狀態(tài)用componentsMessageResponse或 render propConversation的children注入自定義渲染邏輯在組件之上包一層業(yè)務(wù)組件組合出符合自己產(chǎn)品的交互。定制化安裝完成后無需額外配置即可使用——組件的 Tailwind 樣式與腳本已隨安裝集成。若需要改樣式直接編輯組件源碼即可。以技能文檔中的示例為例去掉MessageContent的圓角打開components/ai-elements/message.tsx移除根元素上的rounded-lg類export const MessageContent ({ children, className, ...props }: MessageContentProps) ( div className{cn( flex flex-col gap-2 text-sm text-foreground, group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:px-4 group-[.is-user]:py-3, className, )} {...props} div classNameis-user:dark{children}/div /div );其中cn(...)會(huì)把傳入的className與內(nèi)置類合并Tailwind 的同名類沖突時(shí)以傳入為準(zhǔn)。由于組件就在項(xiàng)目源碼中任何修改即時(shí)生效這是「組件即源碼」模型的核心價(jià)值。故障排查Troubleshooting技能文檔針對(duì)高頻問題給出了明確排查路徑組件沒有樣式確認(rèn)項(xiàng)目已按 shadcn/uiTailwind 4規(guī)范配置——globals.css導(dǎo)入了 Tailwind 并包含 shadcn/ui 基礎(chǔ)樣式。運(yùn)行 CLI 后項(xiàng)目沒有任何新增文件逐項(xiàng)檢查當(dāng)前工作目錄是項(xiàng)目根目錄存在package.json的位置components.jsonshadcn 風(fēng)格配置設(shè)置正確使用最新版本的 CLInpx ai-elementslatest主題切換失效應(yīng)用一直停留在淺色模式確保應(yīng)用使用 shadcn/ui 與 AI Elements 期望的同一套data-theme系統(tǒng)。默認(rèn)實(shí)現(xiàn)會(huì)在html元素上切換data-theme屬性同時(shí)tailwind.config.js需使用 class 或 data 選擇器。組件導(dǎo)入報(bào) module not found先確認(rèn)文件確實(shí)存在若存在檢查tsconfig.json是否配置了/路徑別名{ compilerOptions: { baseUrl: ., paths: { /*: [./*] } } }AI 編程助手無法訪問 AI Elements 組件依次驗(yàn)證配置文件語法是否為合法 JSON、文件路徑是否與 AI 工具配置一致、修改后是否重啟了編程助手、網(wǎng)絡(luò)連接是否穩(wěn)定。結(jié)語AI Elements 以「組件即源碼」的方式把 AI 聊天界面中最復(fù)雜、最容易做丑的部分流式 Markdown、工具調(diào)用狀態(tài)、附件管理、吸底滾動(dòng)、模型選擇封裝為開箱即用的可組合組件。在 ZCode 倉(cāng)庫(kù)中這套組件已經(jīng)完成本地化整合見 packages/ui/src/components/ai-elements/并針對(duì)中文渲染、ESM 解析、任務(wù)切換動(dòng)畫等真實(shí)工程問題做了適配改造是研究其源碼實(shí)現(xiàn)、學(xué)習(xí)如何在生產(chǎn)級(jí) AI 工作臺(tái)中落地 AI 聊天 UI 的最佳參考。無論你是要快速搭一個(gè)聊天 Demo還是要構(gòu)建完整的 AI 助手產(chǎn)品界面都可以從本倉(cāng)庫(kù)的技能文檔SKILL.md與其 references 組件文檔 出發(fā)按需安裝、自由定制。贊分享人工智能大模型代碼智能體AI Agent桌面應(yīng)用后端前端CLI【免費(fèi)下載鏈接】ZCodeZCode 是 AI 編程工作臺(tái)提供桌面應(yīng)用、瀏覽器界面和終端 Agent。本倉(cāng)庫(kù)包含客戶端、后端服務(wù)、共享 UI以及 Agent CLI 與運(yùn)行時(shí)源碼。項(xiàng)目地址https://gitcode.com/zai-org/ZCode點(diǎn)擊查看免費(fèi)下載相關(guān)推薦在 ZCode 中構(gòu)建 AI 聊天界面ai-elements Conversation 組件完整指南在 ZCode 中構(gòu)建 AI 聊天界面ai elements Conversation 組件完整指南 Conversation 是 ZCode 倉(cāng)庫(kù)內(nèi)置的 a人工智能大模型代碼智能體AI Agent桌面應(yīng)用后端前端CLI插件系統(tǒng)ZCode 集成指南使用 AI Elements Conversation 組件構(gòu)建自動(dòng)吸底的 AI 聊天界面ZCode 集成指南使用 AI Elements Conversation 組件構(gòu)建自動(dòng)吸底的 AI 聊天界面 導(dǎo)讀 本指南以 ZCode 倉(cāng)庫(kù)內(nèi) .agenZCode 中構(gòu)建 AI 聊天界面AI Elements 組件庫(kù)安裝、組合與深度定制實(shí)戰(zhàn)指南ZCode 中構(gòu)建 AI 聊天界面AI Elements 組件庫(kù)安裝、組合與深度定制實(shí)戰(zhàn)指南 本文以 ZCode 倉(cāng)庫(kù)內(nèi)嵌的 ai elements 技能文檔創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考