Claude Artifacts React - Deploy Claude Artifact code easily

Claude Artifacts React is an open-source tool that simplifies the process of deploying React code snippets to Vercel or Cloudflare Pages. This project allows you to quickly test and share React code generated by Claude Artifacts without the need for complex setup or configuration.

Quick Start

1. Click on either the "Deploy with Vercel" or "Deploy to Cloudflare Pages" button above.
2. This will fork the repository to your account and start the deployment process.
3. Once deployed, you can edit the src/ArtifactCode.jsx file in your forked repository with the React code output from Claude.
4. Commit your changes, and your deployment will automatically update with the new code.

Features

• One-click deployment to Vercel or Cloudflare Pages
• Easy editing of React code through ArtifactCode.jsx
• Supports React code snippets and components from Claude
• Minimal configuration required
• All dependencies of Claude artifacts are already installed
• Ideal for prototyping, sharing code examples, or quickly testing ideas

Editing Your Code

After deploying, follow these steps to update your React code:

1. Navigate to the ArtifactCode.jsx file in your forked repository.
2. Click on the edit button (pencil icon).
3. Paste the React code output from Claude into this file.
4. Commit your changes.
5. Your deployment will automatically update with the new code.

Manual Setup

If you prefer to set up the project manually:

1. Clone the repository:

   git clone https://github.com/risonsimon/claude-artifacts-react.git
   cd claude-artifacts-react
   

2. Install dependencies:

   pnpm install
   

3. Edit the ArtifactCode.tsx file with your React code.

4. Deploy to your preferred platform.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.