> For the complete documentation index, see [llms.txt](https://help.doraverse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.doraverse.com/jp/feature-list/ai-agents/agents-capabilities/artifact.md).
# アーティファクト
## アーティファクトとは？
Artifact（アーティファクト）は、Reactコンポーネント、HTMLコード、Mermaidダイアグラムを即座に生成できるジェネレーティブUIツールです。DoraverseではAIエージェントのワークフローに直接統合されており、選択したAIモデルによってWeb UI要素やビジュアライゼーションを手軽に作成・改良できます。
***
## Doraverseにおけるアーティファクトの主な特徴
* **即時プロトタイピング** ジェネレーティブAIを活用し、Webサイトやユーザーインターフェース、レイアウトコンポーネントを素早く生成。フロントエンド開発を効率化します。
* **ジェネレーティブUI** Reactコンポーネント、クリーンなHTMLコード、高度なダイアグラムをその場で作成し、複雑なアイデアも明確に可視化できます。
* **反復的なデザイン** 生成物をAIのサポートで段階的に改良でき、ユーザー中心のデザイン改善が容易です。
* **専用UIウィンドウでの表示** アーティファクトで生成したビジュアルコンテンツは専用のUIウィンドウに表示され、視認性が高く、直感的な操作が可能です。
***
## アーティファクトがもたらすメリット
* レイアウト設計に時間をかけず、コードやダイアグラムを即時生成することでUI/UX設計・開発を加速できます。
* ダイアグラムでワークフローやサイトマップ、インタラクション図を明確に可視化できます。
* デザイン案を手軽に検討し、AIの提案を活用してUIを洗練できます。
* コーディング経験が少ない関係者もプロトタイピングやフィードバックに参加しやすくなります。
* ビジュアルは専用ウィンドウで表示されるため、集中して確認・操作できます。
***
## 主なユースケース
ウェブサイトの迅速なプロトタイピング
ランディングページやダッシュボード、機能モックアップ用のReactコンポーネントやHTMLスニペットを数分で作成できます。
UIコンポーネント設計
再利用可能でレスポンシブなUI要素を自動生成します。
ダイアグラム作成・ドキュメント化
ダイアグラムでプロセスや関係性、システム構成を即座に可視化できます。
学習・実験
AIのサポートでReactやHTMLの基礎をインタラクティブに学べます。
## アーティファクトの追加オプション
アーティファクトの柔軟性とパワーを最大限に活用するため、AIによるUIコンポーネント生成や管理方法を調整できる2つの重要なオプションを有効化できます。
#### shadcn/ui用インストラクションの有効化
AIが**shadcn/uiコンポーネント**（Radix UIとTailwind CSSで構築された、再利用可能で洗練されたUIコンポーネント群）をどのように活用するかを理解できるよう、特別な指示を追加します。
これにより、AIはデザインシステムに準拠した、統一感のある高品質なReactコンポーネントを生成できるため、作業時間を短縮し、プロフェッショナルな見た目を実現できます。
**提案**: プロジェクトや企業でshadcn/uiを利用している場合や、保守性・カスタマイズ性の高いモジュール型UIコードを求める場合は、この機能を有効にしてください。
例
````
あなたはshadcn/uiライブラリ（Radix UIを基盤とし、Tailwind CSSでスタイリングされた）を使ってReactコンポーネントを生成します。以下のガイドラインに従ってください。
1. 可能な限り、shadcn/uiのコンポーネント（例：ボタン、入力、ダイアログ、チェックボックスなど）をビルディングブロックとして使用してください。
2. shadcn/uiに含まれるTailwind CSSクラスを活用し、デザインシステムの一貫したスタイルパターンを守ってください。
3. コンポーネントは再利用可能かつモジュール化し、責務を明確に分離してください。
4. shadcn/uiに統合されたRadix UI標準に従い、アクセシブルかつセマンティックなHTML要素を使用してください。
5. Reactに適した形で、適切なpropsやイベントハンドリングを実装してください。
6. インデントや必要なコメントを含め、読みやすくクリーンなコードを生成してください。
7. インラインスタイルは避け、Tailwindのユーティリティクラスのみを使用してください。
8. レイアウトには、shadcn/uiのレイアウト用プリミティブや、TailwindのFlex/Gridユーティリティを活用してください。
9. さまざまな画面サイズに柔軟に対応できるレスポンシブなコンポーネントを作成してください。
shadcn/uiのButtonコンポーネントを使った例:
```jsx
import { Button } from "@/components/ui/button"
export function SubmitButton() {
return (
)
}
````
#### カスタムプロンプトモード
デフォルトの「アーティファクトシステムプロンプト（Artifact system prompt）」を無効化し、お客様独自のカスタムインストラクションでAIの挙動を制御できます。
このモードを利用することで、「UIアーティファクト（UI Artifacts）」の生成方法を完全にコントロールできます。「コーディングスタイル」「フレームワーク」「命名規則」「ファイル構成」など、チームの開発基準やワークフローに合わせて細かく指示できます。
**提案:** 特定の要件がある場合や、チーム独自の開発基準に厳密に合わせたい場合は、このモードのご利用をおすすめします。
---
# 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:
```
GET https://help.doraverse.com/jp/feature-list/ai-agents/agents-capabilities/artifact.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.