wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
48 lines
2.0 KiB
Plaintext
48 lines
2.0 KiB
Plaintext
---
|
|
title: Claude Artifacts Example
|
|
description: Open-source Claude Artifacts implementation in React — generate websites and components in a side panel from chat messages, built on assistant-ui.
|
|
---
|
|
|
|
import { Artifacts } from "@/components/examples/artifacts";
|
|
import { ArtifactsRuntimeProvider } from "@/contexts/ArtifactsRuntimeProvider";
|
|
|
|
<div className="not-prose h-[600px]">
|
|
<ArtifactsRuntimeProvider>
|
|
<Artifacts />
|
|
</ArtifactsRuntimeProvider>
|
|
</div>
|
|
|
|
## Overview
|
|
|
|
An open-source implementation of Claude Artifacts that allows users to generate interactive content like websites, documents, and applications directly within the chat interface. The AI generates HTML, CSS, and JavaScript code that renders in a live preview panel alongside the conversation.
|
|
|
|
## Features
|
|
|
|
- **Real-time Preview**: Generated artifacts render instantly in a sandboxed iframe
|
|
- **Code Generation**: Creates complete HTML, CSS, and JavaScript applications
|
|
- **Interactive Elements**: Artifacts can include buttons, forms, and animations
|
|
- **Iteration Support**: Ask the AI to modify and improve generated artifacts
|
|
- **Safe Execution**: Code runs in a sandboxed environment for security
|
|
- **Export Options**: Download generated artifacts as standalone files
|
|
|
|
## How It Works
|
|
|
|
1. **Request**: Ask the AI to create something (e.g., "Create a calculator app")
|
|
2. **Generation**: The AI generates the necessary HTML, CSS, and JavaScript
|
|
3. **Rendering**: Code is safely rendered in a preview panel
|
|
4. **Iteration**: Request changes and see updates in real-time
|
|
|
|
## Use Cases
|
|
|
|
- **Prototyping**: Quickly create UI mockups and interactive demos
|
|
- **Learning**: Generate code examples to understand concepts
|
|
- **Visualization**: Create charts, diagrams, and data visualizations
|
|
- **Games**: Build simple browser games and interactive experiences
|
|
- **Tools**: Generate calculators, converters, and utility applications
|
|
|
|
## Source
|
|
|
|
The implementation for this example is available in the docs:
|
|
|
|
<SourceLink href="https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-artifacts" />
|