Project files.

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -4,127 +4,21 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
-.pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
+node_modules
 dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.default.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

README.md

@@ -0,0 +1,167 @@
+# Claude Artifact Runner
+
+## Table of Contents
+
+- [Summary](#summary)
+- [Project scope](#project-scope)
+- [Overview](#overview)
+- [What's included?](#whats-included)
+- [Prerequisites](#prerequisites)
+- [Getting started](#getting-started)
+- [Project structure](#project-structure)
+- [Usage](#usage)
+- [Customization](#customization)
+- [Building for production](#building-for-production)
+- [Troubleshooting](#troubleshooting)
+- [Contributing](#contributing)
+- [License](#license)
+- [Acknowledgements](#acknowledgements)
+
+## Summary
+
+If you're searching for a way to take the small web applications Claude generates with its Artifacts feature, and run them outside of its website, you've come to the right place.
+
+This project provides a standalone environment that mimics the Artifacts runtime, enabling you to run, test, and further develop the code generated by Claude independently from its website.
+
+## Project scope
+
+Note that this project is meant only for running Artifacts that are interactive web apps, usually made in React, and for which Claude writes Javascript or Typescript code.
+
+**Mermaid diagrams, SVGs and other document-type Artifacts are out of the scope of the project.**
+
+Why? Well, because those types of simple static content are easily viewable by other means.  
+For example, to view Mermaid diagrams, you can use an online viewer/editor, like [mermaidflow.app](https://www.mermaidflow.app).
+
+## Overview
+
+If you've created a web application or component using Claude's Artifacts feature and want to:
+
+1. run the component locally for testing and development,
+2. use the component as a starting point for a new project or integrate it into a larger project, or
+3. deploy the component as a standalone application,
+
+you'll be disappointed to find out that, if you download the artifact code via the download button, you'll only receive a single file containing the main logic of the app, not the full project with all necessary files to run it on your computer.
+
+If you're unfamiliar with the technologies used on the project, you'll have a hard time assembling and configuring all the required libraries and tooling required to make a running standalone app.
+
+Even if you're an experienced developer, you may just want to save time and effort and get the Artifact running as easily and as soon as possible.
+
+This scaffold/boilerplate provides the perfect environment to address these needs. It includes all the necessary dependencies and configurations to seamlessly transition your Claude-generated artifact into a fully functional web application in no time.
+
+## What's included?
+
+1. **React 18** for building user interfaces.
+2. **TypeScript** to support artifacts written in type-safe Javascript.
+3. **Vite** for fast development and building.
+4. **Shadcn UI** for pre-built, customizable components.
+5. **Tailwind CSS** for compact and expressive embedded styling.
+6. **Recharts** for creating dynamic, customizable charts and data visualizations.
+7. **Lucide React** for a comprehensive library of open-source icons designed for React applications.
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed:
+- Node.js (version 14 or later)
+- npm (usually comes with Node.js)
+
+## Getting started
+
+1. Clone the repository:
+   ```
+   git clone https://github.com/claudio-silva/claude-artifact-runner.git
+   cd claude-artifact-runner
+   ```
+
+2. Install dependencies:
+   ```
+   npm install
+   ```
+
+3. Start the development server:
+   ```
+   npm run dev
+   ```
+
+4. Open your browser and visit `http://localhost:5173` to see the default app running.
+
+## Project structure
+
+- `src/`: Contains the source code for the application
+  - `App.tsx`: Main application component
+  - `artifact-component.tsx`: Place to paste the component generated by Claude
+  - `components/`: Reusable UI components
+  - `lib/`: Utility functions and helpers
+- `public/`: Static assets
+- `index.html`: Entry HTML file
+- `vite.config.ts`: Vite configuration
+- `tsconfig.json`: TypeScript configuration
+- `tailwind.config.js`: Tailwind CSS configuration
+- `package.json`: all the required packages are registered here.
+
+## Usage
+
+1. Generate a React component using Claude on the Artifacts environment.
+2. Copy the generated component code.
+3. Paste the code into `src/artifact-component.tsx`.
+4. The page should refresh automatically to display the new component.
+
+## Customization
+
+- Use `src/index.css` to add additional CSS rules.
+- Place static assets (such as images) in the `public` folder.
+- Modify `tailwind.config.js` to customize the Tailwind CSS theme.
+- Update `App.tsx` to change the overall layout or add new features.
+- Add or modify components in the `src/components/` directory.
+  > **Note:** Shadcn components installed via `npx` are automatically placed in `src/components`. All components come pre-installed by default, but if you remove some and later want to reinstall any, you may simply run `npx shadcn-ui@latest add your-component`.
+  
+### Removing unneeded components / libraries
+
+The **Recharts** library and ALL **Shadcn** components come pre-installed, so that all code that Claude may generate will run *out-of-the-box*.
+
+If you just want to run the artifact locally, you may leave things as they are, but if you to deploy the application or use it as a base for a larger project, you may want to optimize your application's bundle size.
+
+To do that, you may remove the pre-installed components or libraries that are not required by your application.
+
+#### Unneeded Shadcn components:
+  Just delete the component's folder from `src/components`.
+
+#### Unneeded packages (ex: Recharts):
+  Use `npm remove` to uninstall them.
+
+## Building for production
+
+To create a production build, run:
+
+```
+npm run build
+```
+
+This will generate optimized files in the `dist/` directory, ready for deployment.
+
+## Troubleshooting
+
+If you encounter any issues, try the following:
+
+1. Clear your browser cache and restart the development server.
+2. Delete the `node_modules` folder and run `npm install` again.
+3. Make sure your Node.js version is compatible with the project requirements.
+4. Check for any error messages in the console and search for solutions online.
+
+If problems persist, please open an issue on this project's GitHub repository.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is open source and available under the [MIT License](LICENSE).
+
+## Acknowledgements
+
+I found [Claude-React-Jumpstart](https://github.com/Bklieger/Claude-React-Jumpstart) when looking for a way to run Artifacts outside of [claude.ai](https://claude.ai).
+
+However, it did not fully meet my needs, so I decided to make my own project, as I wanted something that:
+   * was completely pre-configured (no need to install or configure additional stuff),
+   * was ready to go with a single `npm install`, and
+   * included all components and libraries needed to fully replicate the Artifacts environment.

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "src/components",
+    "utils": "src/lib/utils"
+  }
+}

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Artifact Viewer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>