AIがプログラミングを支援する時代には、AIに単なる静的なテキストではなく、次のようなコードを生成してもらいたい。 解析、編集、プレビュー、そして実行まで そのこの要求は、新しい交流様式を生み出した。 アーティファクト ..この記事では、まず 理論概念 まで 実践 詳細分析 アーティファクトの動作原理、コア技術、応用シナリオ .
1.アーティファクトとは何か？
アーティファクトとは、特定の専門用語ではなく、むしろ「人工物」のことである。 AIコードの相互作用 その最も古い例は クロード（人間的AI） は、ウェブ版ウェブサイトに掲載されている。主な目的は以下の通り。 AIが生成したコードを解析、編集、プレビューしやすくする .
従来のAIコード生成モデルでは、AIはコードテキストを返すだけで、ユーザーはそれを手動でコピーしてエディタに貼り付けて実行する必要がある。このアプローチには次のような問題がある：
- 構造化された情報の欠如 AIが生成するコードは単なるプレーンテキストであり、ファイル名やファイルタイプなどの重要な情報を区別することはできない。
- 限られた編集経験 ユーザーはAIダイアログ・インターフェイスで直接コードを変更することができないため、追加のツールを使用する必要があります。
- インスタント・プレビューの欠如 HTML/CSS/JSコードでは、リアルタイムで実行効果を確認することができず、開発効率に影響する。
アーティファクト・インタラクティブ・モード とおす 構造化データ、構文解析、動的フロントエンド・プレゼンテーション これらの問題を解決することで、AIが生成するコードが可能になる：
- 構造化ストレージ (ファイル名、ファイルタイプなどの情報を含む）。
- 動的に解析される (コードブロックを抽出し、プレーンテキストを区別する）。
- コードエディターに表示する (即座の修正に対応）。
- プレビューのサポート (HTML/SVG/Reactコンポーネントなど）。
2.アーティファクトの仕組み
2.1 交流プロセス
完全 人工物の相互作用 主に5つのステップからなる：
- AIが構造化されたコードブロックを生成
- 解析のためには、コードを特定のタグでラップする必要がある。
- AIが返すものを解析する
- テキストとコードブロックを認識し、ファイル名、タイプ、コードコンテンツを抽出します。
- データ構造ストレージ
- 解析されたコンテンツを、プレーンテキストとコードを区別して、適切なデータ構造に格納する。
- フロントエンドのダイナミック・ディスプレイ
- UIインターフェイス上にコードをレンダリングし、編集機能を提供する。
- コードプレビュー
- コードがHTML/CSS/JSまたは 反応 コンポーネントを直接実行し、プレビューすることができる。
3.アーティファクトのコア実装
3.1 AIが生成するコード形式
フロントエンドがAIによって生成されたコードを正しく解析するためには、以下のセットを定義する必要がある。 正規形 これを行う通常の方法は DSL（ドメイン固有言語） マーキング例
<<artifact-start>>[{
"filename": "index.html",
"filetype": "html"
}]
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, Artifact!</h1>
</body>
</html>
<<artifact-end>>
このコード構造では<<artifact-start>> 歌で応える <<artifact-end>> 内部に含まれるマーカーとして：
- ファイル名 ファイル名（例
index.html). - ファイルタイプ ファイルタイプ
html). - コード・コンテンツ .
3.2 アーティファクト・コード・ブロックの解析
フロントエンドでは アーティファクト・パーサー を使ってコードブロックを抽出することができる。コードブロックは 正則表現 マッチする <<artifact-start>> 歌で応える <<artifact-end>> の間の内容である：
パースロジック
- コードブロックのマッチング
const artifactRegex = /<<artifact-start>>(.*?)<<artifact-end>>/gs; const matches = responseText.match(artifactRegex); - JSON情報の抽出
const jsonRegex = /\[(.*?)\]/s; const jsonMatch = codeBlock.match(jsonRegex); const artifactInfo = JSON.parse(jsonMatch[1]); - 構造化オブジェクトの保存
const artifact = { filename: artifactInfo.filename, filetype: artifactInfo.filetype, content: codeBlock.replace(jsonMatch[0], "").trim() };
3.3 構造化されたデータ・ストレージ
解析されたコードは、フロントエンドが正しくレンダリングできるように、データ構造に格納する必要がある。
データ構造
interface Artifact {
filename: string;
filetype: string;
content: string;
}
interface MixContent {
type: "text" | "artifact";
text?: string;
artifact?: Artifact;
}
Artifact構造体は コードファイル .MixContent構造体は プレーンテキストとコードが混在したコンテンツ .
3.4 フロントエンドのダイナミック・ディスプレイ
フロントエンドの使用 React + CodeMirror 例えば、編集可能なコードウィンドウを提供する：
import CodeMirror from '@uiw/react-codemirror';
function CodeEditor({ artifact }) {
return (
<CodeMirror
value={artifact.content}
options={{ mode: artifact.filetype, theme: "monokai", lineNumbers: true }}
/>
);
}
(落とす artifact パースされた後、コードブロックには自動的に コードエディタ ユーザー編集用
3.5 コードプレビュー
HTMLコードには iframe 直接プレビュー
function Preview({ artifact }) {
return (
<iframe srcDoc={artifact.content} style={{ width: "100%", height: "500px" }} />
);
}
もしそうなら リアクト・コンポーネント によって実施される必要がある。 CDNがリアクトを導入 最初のステップは、プレビュー用のダイナミックHTMLを構築することだ。
4.アドバンスド：マルチ・ドキュメント・パーシングのサポート
もしAIが 複数の文書 のために必要な拡張機能である。 ArtifactParser複数の artifact も提供する。 ファイル切り替え機能 .
interface MultiArtifact {
files: Artifact[];
}
フロントエンドあり 資料一覧 ユーザーがさまざまなコードファイルを見ることができるようにするためです。
5.アーティファクトの適用シナリオ
✅ AIコードアシスタント
- AIが生成したコードの取得 編集可能、プレビュー可能、実行可能 開発効率を向上させる。
✅ ローコード開発プラットフォーム
- AIが生成したUIコンポーネントを即座に視覚化し、調整可能にする。
✅ AIによるウェブデザイン
- HTML/CSS/JSコードを直接生成してレンダリングすることで、ウェブ開発の効率を向上させます。
6.まとめ
アーティファクト・インタラクティブ・モード 問題の核心はそこにある：
- AIが構造化されたコードブロックを生成 (DSLでラベル付け）。
- フロントエンドの解析コード (正規表現によるコードとメタデータの抽出）。
- 構造化データとして保存 (テキストとコードを区別する）。
- ダイナミックなプレゼンテーションと編集 (コードエディターのサポートあり）。
- プレビューのサポート (HTML、SVG、Reactコンポーネントの実行）。
このような相互作用を通じてAIが生成するコードはより直感的で使いやすくなり、開発者のエクスペリエンスが大幅に向上する。 🚀.
日本語 
简体中文 
English 
Deutsch 
Português do Brasil