---
title: "交互构件"
description: "为您的聊天机器人添加类似Claude的交互构件功能"
enableComments: true
author: "Ron"
github_username: "svcvit"
x_username: "Ron568059256995"
---

import { PictureInPicture } from '@/components/docs/PictureInPicture';

⬇️ 先睹为快

<Callout title="使用方法">输入你想要的网页效果，对话框下方的窗口可以实时预览网页效果。</Callout>

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

---

<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)
