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.
Claude-React-Jumpstart: A step-by-step guide to running Claude-generated React code locally.
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.
npm create vite@latest my-app
โ Select a framework: โบ React
โ Select a variant: โบ JavaScript
cd my-app
npm install
From instructions: https://ui.shadcn.com/docs/installation/vite
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Update vite.config.js
:
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
:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*"]
}
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
Choose your list of required components and libraries to download based upon the imports in your react file.
npx shadcn-ui@latest add card button input
npm install lucide-react
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
:
import './App.css'
import LLMModel from './components/LLMModel'
function App() {
return (
<>
<LLMModel/>
</>
)
}
export default App
npm run dev