wehub-resource-sync
e30e75b5d4
Code Quality / Oxlint + Oxfmt (push) Waiting to run
Code Quality / Template Sync (push) Waiting to run
Code Quality / Build Changed Packages (push) Waiting to run
Code Quality / Test Changed Packages (push) Waiting to run
Deploy Expo Example / Deploy Production (push) Waiting to run
Deploy Ink Example / Deploy Production (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.12) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Waiting to run
Deploy Shadcn Registry / Deploy Production (push) Waiting to run
Template Metrics / LOC + Bundle Size (push) Waiting to run
Changesets / Create Version PR (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" />
|