---
title: "アーティファクト"
description: "Claude風のアーティファクト機能をチャットボットに追加する"
enableComments: true
author: "Ron"
github_username: "svcvit"
x_username: "Ron568059256995"
---

⬇️ 読む前に試してみてください

<Callout title="使い方">希望するウェブ効果を入力すると、チャットボックス下のウィンドウでリアルタイムにプレビューできます。</Callout>

<iframe
 src="https://instance.hellodify.com/e/bohpf11fe0nwncl3/"
 style={{
   width: '100%',
   minHeight: '500px'
 }}
 frameBorder="0"
 allow="microphone">
</iframe>

---

<Cards>
  <Card 
    icon={<i className="ri-github-fill" />} 
    href="https://github.com/svcvit/dify-plugin-artifacts" 
    title="GitHub"
  >
  <p>GitHubでリポジトリを見る</p>
  </Card>
  <Card 
    icon={<i className="ri-store-2-line" />} 
    href="https://marketplace.dify.ai/plugins/svcvit/artifacts" 
    title="Difyマーケットプレイス"
  >
  <p>Difyマーケットプレイスからインストール</p>
  </Card>
</Cards>

---

### 機能説明

これはウェブベースのチャット対話インターフェースで、LLMが生成したHTMLコードを自動的にレンダリングするのに役立ちます。以下のように表示されます：

![image.png](https://s2.loli.net/2025/05/15/59ADbyazJhSY6ox.png)

![image.png](https://s2.loli.net/2025/05/15/MoxhDfZ8blTpBQI.png)


### 使用手順

1. 実行するチャットフロープロセスを設定します
![image.png](https://s2.loli.net/2025/05/15/EnvoMc9F8IqiSVB.png)

2. エンドポイントを追加し、最初のステップで作成したフローを選択します
![image.png](https://s2.loli.net/2025/05/15/cO1oCtkbdgSH23X.png)

3. 最初のURLを開いて使用します
![image.png](https://s2.loli.net/2025/05/15/4NxBDXYRVkmMyga.png)
