https://github.com/Bklieger/Claude-React-Jumpstart

📖 A step-by-step guide for beginners to running Claude-generated React code locally.
https://github.com/Bklieger/Claude-React-Jumpstart

ai artifacts claude claude-artifacts react vite

Last synced: 9 months ago
JSON representation

📖 A step-by-step guide for beginners to running Claude-generated React code locally.

• Host: GitHub
• URL: https://github.com/Bklieger/Claude-React-Jumpstart
• Owner: Bklieger
• License: mit
• Created: 2024-06-21T18:43:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-26T22:29:57.000Z (over 1 year ago)
• Last Synced: 2025-03-14T16:11:33.495Z (9 months ago)
• Topics: ai, artifacts, claude, claude-artifacts, react, vite
• Language: JavaScript
• Homepage:
• Size: 234 KB
• Stars: 106
• Watchers: 4
• Forks: 21
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-claude-code - Claude-React-Jumpstart - React-Jumpstart) | 初学者在本地运行 Claude 生成的 React 代码的分步指南 | React 快速入门| (指南与文档)
• awesome_ai_agents - Claude-React-Jumpstart - This project offers a tutorial for beginners to set up and run React code generated by Claude's Artifacts feature locally, providing step-by-step instructions for creating a React app with Vite, installing necessary dependencies, and integrating Claude-generated code [github](https://github.com/Bklieger/Claude-React-Jumpstart) | [twitter announcement](https://x.com/BenjaminKlieger/status/1804264035464155220) (Learning / Repositories)

README

          
![License](https://img.shields.io/badge/license-MIT-green)

# Claude React Artifact Tutorial

Claude recently released Artifacts, which can compile code in a dedicated window. This tutorial helps beginners set up a React app to any React run code generated by Claude's Artifacts feature.

[![Project Demo](https://img.youtube.com/vi/oRh_tVdgjB8/0.jpg)](https://www.youtube.com/watch?v=oRh_tVdgjB8)

> Claude-React-Jumpstart: A step-by-step guide to running Claude-generated React code locally.

---

## Getting Started

You can use the example provided to learn the process. Before beginning the following steps, remove the my-app folder so you can recreate it.

### Step 1: Create new React app with Vite

```bash

npm create vite@latest my-app

✔ Select a framework: › React

✔ Select a variant: › JavaScript

cd my-app

npm install

```

### Step 2: Install Tailwindcss and Shadcn

From instructions: https://ui.shadcn.com/docs/installation/vite

```bash

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

```

Update `vite.config.js`:

```javascript

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import path from 'path'

export default defineConfig({

  plugins: [react()],

  resolve: {

    alias: {

      '@': path.resolve(__dirname, './src'),

    },

  },

})

```

Create `jsconfig.json`:

```json

{

  "compilerOptions": {

    "baseUrl": ".",

    "paths": {

      "@/*": ["src/*"]

    }

  },

  "include": ["src/**/*"]

}

```

```bash

npx shadcn-ui@latest init

```

```

✔ Would you like to use TypeScript (recommended)? no

✔ Which style would you like to use? › Default

✔ Which color would you like to use as base color? › Slate

✔ Where is your global CSS file? … src/index.css

✔ Would you like to use CSS variables for colors? … yes

✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) …

✔ Where is your tailwind.config.js located? … tailwind.config.js

✔ Configure the import alias for components: … @/components

✔ Configure the import alias for utils: … @/lib/utils

✔ Are you using React Server Components? … no

✔ Write configuration to components.json. Proceed? … yes

```

### 3. Install Other Libraries and Components

Choose your list of required components and libraries to download based upon the imports in your react file.

```bash

npx shadcn-ui@latest add card button input

npm install lucide-react

```

### 4. Add Your Artifact Code

`LLMModel.jsx` is an included artifact example. You can move the file to `src/components/LLMModel.jsx`.

Then add it to your app by updating `App.jsx`:

```jsx

import './App.css'

import LLMModel from './components/LLMModel'

function App() {

  return (

    <>

      

    >

  )

}

export default App

```

### 5. Run the App

```bash

npm run dev

```

![Example App Online](./assets/img/demo_img.png)

Example App with LLMModel.jsx Online