> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/tech/maiagent-tech-ja/advanced-genai-tech/canvas.md). # Canvas ## Canvas とは Canvas は Agent モードの拡張インターフェースの一つで、AI アシスタントが構造化されたビジュアルコンテンツを生成・管理できるようにする機能です。この技術により、AI は対話を行うだけでなく、インタラクティブな Web 部品、図表、ドキュメント、コードなど、リッチなマルチメディアコンテンツを作成、編集、表示できるようになります。 従来の対話型 AI では、アシスタントは純粋なテキストでの応答しか提供できませんでしたが、Canvas 技術はこの制限を打破し、AI アシスタントが次のことを実現できるようにします。 * ビジュアルコンテンツのリアルタイム作成 * インタラクティブな部品の生成 * 構造化された情報の提示 * コードのリアルタイムレンダリングへの対応
### 主な特長 Canvas 技術は、従来の純粋なテキスト対話をビジュアルコンテンツ作成の領域へと拡張し、企業に次のことを可能にします。 * **リアルタイムコンテンツ生成**：AI はユーザーのニーズに応じて、さまざまな形式のコンテンツを即座に作成できます * **インタラクティブな編集**：ユーザーは生成されたコンテンツと直接やり取りし、修正できます * **マルチフォーマット対応**：HTML、React、SVG、Markdown、Mermaid など、多様なコンテンツ形式に対応します * **シームレスな統合**：対話フローに完全に溶け込み、より直感的な使用体験を提供します * **プロフェッショナルな品質**：生成されるコンテンツはプロフェッショナルなデザインおよび開発基準に達しています * **リアルタイムプレビュー**：WYSIWYG（見たままが得られる）のコンテンツ編集体験 ### 技術的な優位性 1. **インテリジェントなコンテンツ判別**：AI はコンテンツの提示に Canvas を使用すべきタイミングを自動的に判断できます 2. **フォーマットの自動適応**：コンテンツの特性に応じて、最も適した提示形式を自動的に選択します 3. **リアルタイムレンダリング**：リアルタイムのビジュアル効果プレビューを提供します 4. **クロスプラットフォーム互換性**：さまざまなデバイスやプラットフォーム上で一貫した表示を保証します 5. **パフォーマンス最適化**：先進的なレンダリング技術を採用し、スムーズな使用体験を保証します ### 市場の既存ソリューションとの比較 | 特長機能 | MaiAgent Canvas | 従来の AI アシスタント | その他のビジュアル化ツール | | ------------------ | ---------------- | ------------- | ------------- | | リアルタイムビジュアル化生成 | ✅ 自動判断して生成 | ❌ テキスト応答のみ | ⚠️ 手動操作が必要 | | マルチフォーマット対応 | ✅ 多様なプロフェッショナル形式 | ❌ 純粋なテキスト | ⚠️ 限定された形式 | | 対話型インタラクション | ✅ シームレスな統合 | ✅ テキスト対話 | ❌ 独立したツール | | エンタープライズレベルのセキュリティ | ✅ オンプレミス展開 | ⚠️ ベンダー依存 | ⚠️ ベンダー依存 | | カスタマイズ能力 | ✅ 高度なカスタマイズ | ⚠️ 限定的 | ⚠️ テンプレート化 | ## MaiAgent Canvas の機能紹介 ### 設定と有効化の方法 Canvas 機能は MaiAgent の Agent モードをベースとし、ビジュアルコンテンツ生成のニーズに対応するため Canvas モードを専用に構成しています。
キャンバスモード（Canvas）の有効化

返信モードで Agent を選択し、下部の Agent モードでキャンバスモード（Canvas）を有効化します

### 機能とアーキテクチャの説明 #### フロントエンドレンダリング層 * **リアルタイムプレビューエンジン**：すべての Canvas 形式のリアルタイムレンダリングに対応 * **インタラクティブインターフェース**：直感的な編集・操作インターフェースを提供 * **レスポンシブデザイン**：さまざまなデバイスの画面サイズに自動的に適応 #### AI 処理層 * **コンテンツ分析エンジン**：ユーザーのニーズをインテリジェントに分析 * **フォーマットセレクター**：最も適した提示形式を自動的に判断 * **品質コントローラー**：生成されるコンテンツの正確性と完全性を保証 #### インテリジェントなコンテンツ判別の仕組み システムは 5 種類の主要なコンテンツ形式に対応しており、それぞれに特定の適用シーンがあります。 * **HTML**：Web コンテンツや静的な表示に適しています * 完全な 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 図、ネットワークトポロジー図 * **コードレビュー**：コード構造や依存関係図をビジュアル化 #### 📝 ドキュメント制作 * **レポート生成**：フォーマットされたレポートやデータ分析レポートを自動生成 * **取扱説明書**：図と文章を組み合わせた操作ガイドや製品マニュアルを作成 * **プロジェクト提案**：プロフェッショナルなプロジェクト紹介ドキュメントや事業企画書を作成 * **議事録**：構造化された議事録、決議追跡表 * **教育・研修**：インタラクティブな学習教材、カリキュラムの概要 #### 🎨 クリエイティブデザイン * **プロトタイプデザイン**：Web ページやアプリケーションのプロトタイプ、ワイヤーフレームを迅速に作成 * **グラフィック制作**：SVG 形式を使用してベクターグラフィックスやアイコンデザインを生成 * **ユーザーインターフェース**：インタラクティブな UI 部品やインターフェースのモックアップをデザイン * **ブランドデザイン**：ロゴデザインのコンセプト、ブランドビジュアル要素 * **マーケティング素材**：ソーシャルメディア画像、広告バナーのデザイン #### 🏢 企業向けアプリケーション * **社内研修**：従業員マニュアル、フロー説明、安全規範 * **カスタマーサービス**：FAQ のビジュアル化、サービスフロー図 * **営業サポート**：製品紹介ページ、機能比較表 * **プロジェクト管理**：タスク割り当て図、進捗追跡表 MaiAgent Canvas 技術を通じて、企業は真にインテリジェントなコンテンツの生成と管理を実現でき、業務効率を向上させるだけでなく、まったく新しいユーザーインタラクション体験を創出できます。この技術は AI アシスタント領域における重要なブレークスルーを象徴しており、対話型 AI をまったく新しいビジュアル化・インタラクション化のレベルへと引き上げます。 **今すぐ Canvas 技術の強力な機能を体験し、あなたの AI アシスタントを「話すだけ」から「創造できる」存在へと進化させましょう！** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.maiagent.ai/tech/maiagent-tech-ja/advanced-genai-tech/canvas.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.