---
title: "Artifacts"
description: "Add Claude-like artifacts functionality to your chatbot"
enableComments: true
author: "Ron"
github_username: "svcvit"
x_username: "Ron568059256995"
---

⬇️ Try it out before reading

<Callout title="How to use">Enter the web effect you want, and the window below the chat box will preview the web effect in real time.</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>See the repository on GitHub</p>
  </Card>
  <Card 
    icon={<i className="ri-store-2-line" />} 
    href="https://marketplace.dify.ai/plugins/svcvit/artifacts" 
    title="Dify Marketplace"
  >
  <p>Install from Dify Marketplace</p>
  </Card>
</Cards>

---

### Feature Description

This is a web-based chat interaction interface that can help you automatically render HTML code generated by LLM, as shown below:

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

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


### Usage Instructions

1. Configure the chatflow process you need to run
![image.png](https://s2.loli.net/2025/05/15/EnvoMc9F8IqiSVB.png)

2. Add an endpoint, select the flow created in the first step.
![image.png](https://s2.loli.net/2025/05/15/cO1oCtkbdgSH23X.png)

3. Open the first URL to use
![image.png](https://s2.loli.net/2025/05/15/4NxBDXYRVkmMyga.png)
