# Canvas ## 什麼是 Canvas Canvas 是 Agent 模式的一種延伸介面，它讓 AI 助理能夠生成和管理結構化的視覺內容。這項技術使 AI 不僅能夠進行對話，更能創建、編輯和呈現豐富的多媒體內容，包括互動式網頁元件、圖表、文件和程式碼等。 在傳統的對話式 AI 中，助理只能提供純文字回應，但 Canvas 技術打破了這個限制，讓 AI 助理能夠： * 即時創建可視化內容 * 生成可互動的元件 * 提供結構化的資訊呈現 * 支援即時渲染程式碼
### 核心特色 Canvas 技術將傳統的純文字對話擴展到視覺化內容創建領域，讓企業能夠： * **即時內容生成**：AI 可以根據使用者需求立即創建各種格式的內容 * **互動式編輯**：使用者可以直接與生成的內容進行互動和修改 * **多格式支援**：支援 HTML、React、SVG、Markdown、Mermaid 等多種內容格式 * **無縫整合**：完美融入對話流程，提供更直觀的使用體驗 * **專業品質**：生成的內容達到專業設計和開發標準 * **即時預覽**：所見即所得的內容編輯體驗 ### 技術優勢 1. **智慧內容識別**：AI 能夠自動判斷何時需要使用 Canvas 來呈現內容 2. **格式自適應**：根據內容特性自動選擇最適合的呈現格式 3. **即時渲染**：提供實時的視覺化效果預覽 4. **跨平台相容**：確保在不同設備和平台上的一致表現 5. **效能優化**：採用先進的渲染技術，確保流暢的使用體驗 ### 與市場現有解決方案的比較 | 特色功能 | MaiAgent Canvas | 傳統 AI 助理 | 其他可視化工具 | | ------- | --------------- | -------- | -------- | | 即時視覺化生成 | ✅ 自動判斷並生成 | ❌ 僅文字回應 | ⚠️ 需手動操作 | | 多格式支援 | ✅ 多種專業格式 | ❌ 純文字 | ⚠️ 限定格式 | | 對話式互動 | ✅ 無縫整合 | ✅ 文字對話 | ❌ 獨立工具 | | 企業級安全 | ✅ 本地部署 | ⚠️ 依供應商 | ⚠️ 依供應商 | | 客製化能力 | ✅ 高度客製 | ⚠️ 有限 | ⚠️ 模板化 | ## MaiAgent Canvas 的功能介紹 ### 如何設置與啟用 Canvas 功能基於 MaiAgent 的 Agent 模式，專門配置了 Canvas 的模式來處理視覺化內容生成需求。
啟用畫布模式（Canvas）

回覆模式需選擇 Agent，下方 Agent 模式啟用畫布模式（Canvas）

### 功能與架構說明 #### 前端渲染層 * **即時預覽引擎**：支援所有 Canvas 格式的即時渲染 * **互動介面**：提供直觀的編輯和操作界面 * **響應式設計**：自動適配各種設備螢幕尺寸 #### AI 處理層 * **內容分析引擎**：智慧分析使用者需求 * **格式選擇器**：自動判斷最適合的呈現格式 * **品質控制器**：確保生成內容的準確性和完整性 #### 智慧內容識別機制 系統支援五種主要的內容格式，每種格式都有其特定的應用場景： * **HTML**：適用於網頁內容和靜態展示 * 支援完整的 CSS 樣式 * 可嵌入多媒體元素 * 適合複雜的版面設計 * **React**：用於互動式元件和動態內容 * 支援 JSX 語法和 React Hooks * 可建立複雜的互動功能 * 適合動態資料展示 * **SVG**：向量圖形和圖表設計 * 無限縮放不失真 * 檔案大小小、載入快速 * 適合圖標、插圖、簡單圖表 * **Markdown**：結構化文件和代碼展示 * 支援 GitHub Flavored Markdown * 程式碼語法高亮 * 適合技術文件、說明書 * **Mermaid**：流程圖和圖表生成 * 支援多種圖表類型 * 程式化描述，易於維護 * 適合業務流程、系統架構圖 #### 內容生成流程 1. **需求分析**：AI 分析使用者輸入，判斷是否需要使用 Canvas * 關鍵字識別：「畫圖」、「製作」、「設計」 * 內容複雜度評估 * 視覺化需求判斷 2. **格式選擇**：根據內容特性自動選擇最適合的呈現格式 * 內容類型分析 * 互動需求評估 * 最佳格式推薦 3. **內容創建**：使用專門的生成算法創建結構化內容 * 範本匹配 * 自定義生成 * 品牌元素整合 4. **品質驗證**：確保生成內容的正確性和可用性 * 語法檢查 * 渲染測試 * 相容性驗證 5. **渲染呈現**：在使用者介面中實時渲染內容 * 即時預覽 * 效能優化 * 錯誤處理 #### 智慧判斷邏輯 在沒有特別設定角色指令的情況下，Agent 會根據以下因素判斷是否使用 Canvas： 1. **內容複雜度**：結構化內容優先使用 Canvas * 表格、清單、階層結構 * 多步驟流程說明 * 比較分析內容 2. **互動需求**：需要使用者互動的內容 * 表單設計 * 按鈕和控制項 * 動態資料展示 3. **視覺化需求**：圖表、圖形等視覺元素 * 統計圖表 * 示意圖 * 架構圖 4. **格式要求**：特定格式要求的內容 * 程式碼展示 * 文件範本 * 專業報告 ### 效果展示影片 {% embed url="" %} ## MaiAgent Canvas 的核心價值與應用情境 ### 核心價值 #### 1. 提升溝通效率 * 將複雜概念轉化為視覺化呈現 * 減少文字說明的冗長性 * 增強資訊傳達的準確性 * **實際效益**：減少 60% 的說明時間，提升 85% 的理解準確度
財務圖表製作助理

透過知識庫上傳數據繪製圖表

#### 2. 增強使用者體驗 * 提供互動式的內容操作體驗 * 支援即時預覽和修改 * 創造更直觀的人機互動方式 * **使用者滿意度**：相較傳統文字回應提升 78% 的滿意度
UI 設計助理

根據用戶請求製作互動式 UI 介面

#### 3. 加速內容創作 * 自動化生成專業格式內容 * 減少手動編碼和設計時間 * 提供一站式內容解決方案 * **效率提升**：內容創作速度提升 4-10 倍
流程圖製作助理

根據用戶請求專業內容的流程圖

#### 4. 降低技術門檻 * 無需專業設計或編程技能 * 自然語言即可創建複雜內容 * 適合各種技術背景的使用者 #### 5. 專業領域適配 * **各產業快速結合**：透過知識庫高度結合行業內部資料 * 金融業：風險評估報告、投資分析圖表 * 製造業：生產流程圖、品質控制圖表 * 醫療業：病患資料視覺化、治療流程圖 * 教育業：課程設計、學習進度追蹤 * **自定義提示詞**：可根據企業需求調整 Canvas 生成邏輯 * 企業專用術語整合 * 特定格式要求設定 * 品牌風格指導原則 * **在地化內容**：支援台灣本地化的內容格式和標準 * 台灣法規文件格式 * 本地商業慣例 * 文化適應性調整 ### 主要應用情境 #### 📊 資料視覺化 * **流程圖設計**：使用 Mermaid 格式創建業務流程圖、系統架構圖 * **組織架構圖**：生成清晰的企業組織結構、部門關係圖 * **數據圖表**：創建互動式數據分析圖表、儀表板 * **時程規劃**：甘特圖、專案時程表、里程碑規劃 #### 💻 程式開發 * **程式碼展示**：以格式化方式呈現程式碼範例、語法高亮 * **API 文件**：生成結構化的技術文件、互動式 API 說明 * **互動式元件**：創建可操作的 React 元件、展示頁面 * **系統設計**：架構圖、資料庫 ER 圖、網路拓撲圖 * **程式碼審查**：視覺化程式碼結構、依賴關係圖 #### 📝 文件製作 * **報告生成**：自動化生成格式化報告、數據分析報告 * **使用手冊**：創建圖文並茂的操作指南、產品說明書 * **專案提案**：製作專業的專案展示文件、商業企劃書 * **會議記錄**：結構化會議紀錄、決議追蹤表 * **教育訓練**：互動式學習教材、課程大綱 #### 🎨 創意設計 * **原型設計**：快速創建網頁或應用程式原型、wireframe * **圖形創作**：使用 SVG 格式生成向量圖形、圖標設計 * **使用者介面**：設計互動式 UI 元件、介面模擬 * **品牌設計**：Logo 設計概念、品牌視覺元素 * **行銷素材**：社群媒體圖片、廣告橫幅設計 #### 🏢 企業應用 * **內部培訓**：員工手冊、流程說明、安全規範 * **客戶服務**：FAQ 視覺化、服務流程圖 * **銷售支援**：產品介紹頁面、功能比較表 * **專案管理**：任務分配圖、進度追蹤表 透過 MaiAgent Canvas 技術，企業可以實現真正的智慧化內容生成和管理，不僅提升工作效率，更能創造嶄新的使用者互動體驗。這項技術代表了 AI 助理領域的重要突破，將對話式 AI 提升到全新的視覺化和互動化層次。 **立即體驗 Canvas 技術的強大功能，讓您的 AI 助理不只會說話，更會創造！** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.maiagent.ai/tech/advanced-genai-tech/canvas.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.