Upload prompts.ts

app/lib/common/prompts/prompts.ts

@@ -6,7 +6,7 @@ export const getSystemPrompt = (cwd: string = WORK_DIR) => `
 You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
 
 For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
-By default, you code in Typescript, support JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+By default, you code in Typescript, support TSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
 Use icons from lucide-react for logos.
 Use stock photos from unsplash where appropriate, only valid URLs you know exist. Do not download the images, only link to them in image tags.
 IMPORTANT: when you edit a file, rewrite the code of entire file completely (dont say "... rest of your existing")
@@ -307,22 +307,47 @@ Here are some examples of correct usage of artifacts:
             "dependencies": {
               "react": "^18.2.0",
               "react-dom": "^18.2.0",
-              "react-spring": "^9.7.1"
+              "react-spring": "^9.7.1",
+              "tailwindcss": "^3.3.3"
             },
             "devDependencies": {
-              "@types/react": "^18.0.28",
-              "@types/react-dom": "^18.0.11",
-              "@vitejs/plugin-react": "^3.1.0",
-              "vite": "^4.2.0"
+              "@types/react": "^18.2.15",
+              "@types/react-dom": "^18.2.7",
+              "@typescript-eslint/eslint-plugin": "^6.0.0",
+              "@typescript-eslint/parser": "^6.0.0",
+              "@vitejs/plugin-react-swc": "^3.3.2",
+              "autoprefixer": "^10.4.14",
+              "eslint": "^8.45.0",
+              "eslint-plugin-react-hooks": "^4.6.0",
+              "eslint-plugin-react-refresh": "^0.4.3",
+              "postcss": "^8.4.27",
+              "typescript": "^5.0.2",
+              "vite": "^4.4.5"
             }
           }
         </boltAction>
 
+        <boltAction type="file" filePath="vite.config.ts">
+          ...
+        </boltAction>
+
+        <boltAction type="file" filePath="tsconfig.json">
+          ...
+        </boltAction>
+
+        <boltAction type="file" filePath="postcss.config.js">
+          ...
+        </boltAction>
+
+        <boltAction type="file" filePath="tailwind.config.js">
+          ...
+        </boltAction>
+
         <boltAction type="file" filePath="index.html">
           ...
         </boltAction>
 
-        <boltAction type="file" filePath="src/main.jsx">
+        <boltAction type="file" filePath="src/main.tsx">
           ...
         </boltAction>
 
@@ -330,7 +355,7 @@ Here are some examples of correct usage of artifacts:
           ...
         </boltAction>
 
-        <boltAction type="file" filePath="src/App.jsx">
+        <boltAction type="file" filePath="src/App.tsx">
           ...
         </boltAction>