https://github.com/risonsimon/claude-artifacts-react
Quickly deploy React code from Claude Artifacts to the internet.
https://github.com/risonsimon/claude-artifacts-react
Last synced: 3 months ago
JSON representation
Quickly deploy React code from Claude Artifacts to the internet.
- Host: GitHub
- URL: https://github.com/risonsimon/claude-artifacts-react
- Owner: risonsimon
- License: mit
- Created: 2024-07-02T09:39:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-02T09:45:55.000Z (over 1 year ago)
- Last Synced: 2025-01-06T00:31:17.751Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 95.7 KB
- Stars: 31
- Watchers: 2
- Forks: 28
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome_ai_agents - claude-artifacts-react - This project provides a streamlined solution for deploying and testing React code generated by Claude Artifacts, offering one-click deployment options to Vercel or Cloudflare Pages and easy code editing through a central ArtifactCode.jsx file [github](https://github.com/risonsimon/claude-artifacts-react) | [reddit announcement](https://www.reddit.com/r/ClaudeAI/comments/1dtquuh/i_made_an_opensource_template_for_sharing_claudes/) (Learning / Repositories)
README
# 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.
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frisonsimon%2Fclaude-artifacts-react)
[](https://deploy.workers.cloudflare.com/?url=https://github.com/risonsimon/claude-artifacts-react)
## 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](LICENSE) file for details.
## Support
If you encounter any issues or have questions, please file an issue on the GitHub repository.