{"id":16271766,"url":"https://github.com/bklieger/claude-react-jumpstart","last_synced_at":"2025-06-10T14:36:47.025Z","repository":{"id":245502468,"uuid":"818391637","full_name":"Bklieger/Claude-React-Jumpstart","owner":"Bklieger","description":"📖 A step-by-step guide for beginners to running Claude-generated React code locally.","archived":false,"fork":false,"pushed_at":"2024-06-26T22:29:57.000Z","size":240,"stargazers_count":111,"open_issues_count":1,"forks_count":22,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-07T07:39:31.842Z","etag":null,"topics":["ai","artifacts","claude","claude-artifacts","react","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bklieger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-21T18:43:14.000Z","updated_at":"2025-04-28T18:39:41.000Z","dependencies_parsed_at":"2024-12-06T18:20:37.156Z","dependency_job_id":"43527cdd-c424-4c58-b363-946c5ec658c8","html_url":"https://github.com/Bklieger/Claude-React-Jumpstart","commit_stats":null,"previous_names":["bklieger/claude-react-jumpstart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bklieger%2FClaude-React-Jumpstart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bklieger%2FClaude-React-Jumpstart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bklieger%2FClaude-React-Jumpstart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bklieger%2FClaude-React-Jumpstart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bklieger","download_url":"https://codeload.github.com/Bklieger/Claude-React-Jumpstart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bklieger%2FClaude-React-Jumpstart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259093567,"owners_count":22804201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","artifacts","claude","claude-artifacts","react","vite"],"created_at":"2024-10-10T18:14:42.730Z","updated_at":"2025-06-10T14:36:46.959Z","avatar_url":"https://github.com/Bklieger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![License](https://img.shields.io/badge/license-MIT-green)\n\n# Claude React Artifact Tutorial\n\nClaude 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.\n\n[![Project Demo](https://img.youtube.com/vi/oRh_tVdgjB8/0.jpg)](https://www.youtube.com/watch?v=oRh_tVdgjB8)\n\n\u003e Claude-React-Jumpstart: A step-by-step guide to running Claude-generated React code locally.\n\n---\n\n## Getting Started\nYou can use the example provided to learn the process. Before beginning the following steps, remove the my-app folder so you can recreate it.\n\n### Step 1: Create new React app with Vite\n\n```bash\nnpm create vite@latest my-app\n✔ Select a framework: › React\n✔ Select a variant: › JavaScript\ncd my-app\nnpm install\n```\n\n### Step 2: Install Tailwindcss and Shadcn\n\nFrom instructions: https://ui.shadcn.com/docs/installation/vite\n\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\nUpdate `vite.config.js`:\n\n```javascript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport path from 'path'\n\nexport default defineConfig({\n  plugins: [react()],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, './src'),\n    },\n  },\n})\n```\n\nCreate `jsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"src/*\"]\n    }\n  },\n  \"include\": [\"src/**/*\"]\n}\n```\n\n```bash\nnpx shadcn-ui@latest init\n```\n\n```\n✔ Would you like to use TypeScript (recommended)? no\n✔ Which style would you like to use? › Default\n✔ Which color would you like to use as base color? › Slate\n✔ Where is your global CSS file? … src/index.css\n✔ Would you like to use CSS variables for colors? … yes\n✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) …\n✔ Where is your tailwind.config.js located? … tailwind.config.js\n✔ Configure the import alias for components: … @/components\n✔ Configure the import alias for utils: … @/lib/utils\n✔ Are you using React Server Components? … no\n✔ Write configuration to components.json. Proceed? … yes\n```\n\n### 3. Install Other Libraries and Components\nChoose your list of required components and libraries to download based upon the imports in your react file.\n```bash\nnpx shadcn-ui@latest add card button input\nnpm install lucide-react\n```\n\n### 4. Add Your Artifact Code\n\n`LLMModel.jsx` is an included artifact example. You can move the file to `src/components/LLMModel.jsx`.\n\nThen add it to your app by updating `App.jsx`:\n\n```jsx\nimport './App.css'\nimport LLMModel from './components/LLMModel'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      \u003cLLMModel/\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\n### 5. Run the App\n\n```bash\nnpm run dev\n```\n\n![Example App Online](./assets/img/demo_img.png)\nExample App with LLMModel.jsx Online","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbklieger%2Fclaude-react-jumpstart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbklieger%2Fclaude-react-jumpstart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbklieger%2Fclaude-react-jumpstart/lists"}