https://github.com/mohammadshamchi/ai-react-playground
🤖 The perfect playground for testing AI-generated React components. Built for ChatGPT/Claude users to instantly test and iterate on AI-created components.
https://github.com/mohammadshamchi/ai-react-playground
ai-testing ai-tools chatgpt claude-ai-generated-code react tailwindcss typescript vite
Last synced: 2 months ago
JSON representation
🤖 The perfect playground for testing AI-generated React components. Built for ChatGPT/Claude users to instantly test and iterate on AI-created components.
- Host: GitHub
- URL: https://github.com/mohammadshamchi/ai-react-playground
- Owner: MohammadShamchi
- License: mit
- Created: 2025-01-31T01:54:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-31T03:15:57.000Z (over 1 year ago)
- Last Synced: 2025-03-27T18:18:22.261Z (over 1 year ago)
- Topics: ai-testing, ai-tools, chatgpt, claude-ai-generated-code, react, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 89.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AI React Playground 🚀
A simple, modern React playground for testing and showcasing React components and pages. Perfect for testing AI-generated React code or building your own components.
## Features ✨
- 🎯 **Simple Setup**: Just clone and run the setup script
- 🎨 **Modern Stack**: React + TypeScript + Vite + Tailwind CSS
- 🔧 **Component Generator**: Create new components with one command
- 📱 **Live Preview**: See your components in action instantly
- 📝 **Auto-Documentation**: Components are automatically added to the sidebar
- 🎭 **Page Support**: Create and test full pages
- 🛠️ **Developer Friendly**: Hot reload, TypeScript support, and more
## Quick Start 🏃♂️
1. Clone the repository:
```bash
git clone https://github.com/yourusername/ai-react-playground.git
cd ai-react-playground
```
2. Run the setup script:
```bash
chmod +x setup.sh
./setup.sh
```
3. Start the development server:
```bash
npm run dev
```
## Usage 📖
### Creating Components
```bash
# Using CLI
npm run create-component Button
# Or use interactive generator
npm run generate
```
### Creating Pages
```bash
# Using CLI
npm run create-page Home
# Or use interactive generator
npm run generate
```
### Testing AI-Generated Code
1. Get React component code from your favorite AI
2. Use the generator to create a new component
3. Paste the code
4. See it live in the browser
5. Iterate and improve
## Documentation 📚
- [Component Documentation](docs/components.md)
- [Development Guide](docs/development.md)
- [Troubleshooting](docs/troubleshooting.md)
## Project Structure 🏗️
```
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── assets/ # Static assets
│ ├── App.tsx # Main application component
│ └── main.tsx # Application entry point
├── docs/ # Documentation
├── scripts/ # Development scripts
└── setup.sh # Setup script
```
## Contributing 🤝
1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request
## License 📄
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Support 💬
- Check the [Troubleshooting Guide](docs/troubleshooting.md)
- Open an issue
- Start a discussion
## Roadmap 🗺️
- [ ] Add more component templates
- [ ] Add testing setup
- [ ] Add CI/CD pipeline
- [ ] Add theme support
- [ ] Add more documentation
- [ ] Add more examples
## Acknowledgments 🙏
- React Team
- Vite Team
- Tailwind CSS Team
- All contributors