Generated by Spark: Flask backend designer, next.js / npm settings

PRD.md

@@ -68,6 +68,20 @@ This is a full-featured low-code IDE with multiple integrated tools (code editor
 - **Progression**: Create test suite manually or with AI → Select test type (component/function/hook/integration) → Add test cases → Configure setup, assertions, and teardown → AI can generate complete test suites → Export test files for Vitest/React Testing Library
 - **Success criteria**: Can create test suites for different types; test cases have multiple assertions; setup/teardown code is optional; AI tests are comprehensive; generates valid Vitest test code
 
+### Flask Backend Designer
+- **Functionality**: Visual designer for Flask REST API with blueprint management, endpoint configuration, route parameters, authentication settings, and CORS configuration
+- **Purpose**: Design Python Flask backends without writing Flask code manually, creating a complete full-stack application ecosystem
+- **Trigger**: Opening the Flask API tab
+- **Progression**: Create blueprint → Add endpoints with HTTP methods → Configure query/path parameters → Set authentication and CORS requirements → Generate complete Flask application with blueprints
+- **Success criteria**: Can create blueprints with multiple endpoints; supports all HTTP methods (GET/POST/PUT/DELETE/PATCH); parameters are properly configured; generates valid Flask code with proper routing
+
+### Project Settings Designer
+- **Functionality**: Configure Next.js settings, manage npm packages and dependencies, define npm scripts, and set package manager preferences
+- **Purpose**: Comprehensive project configuration without manually editing package.json or config files
+- **Trigger**: Opening the Settings tab
+- **Progression**: Configure Next.js features (TypeScript, ESLint, Tailwind, App Router) → Add/edit npm packages → Define build scripts → Set package manager → Export complete package.json
+- **Success criteria**: Next.js config options are properly applied; packages separated into dependencies and devDependencies; scripts are valid; supports npm/yarn/pnpm; generates valid package.json
+
 ### Auto Error Detection & Repair
 - **Functionality**: Automated error detection and AI-powered code repair system that scans files for syntax, type, import, and lint errors
 - **Purpose**: Automatically identify and fix code errors without manual debugging, saving time and reducing bugs
@@ -98,6 +112,12 @@ This is a full-featured low-code IDE with multiple integrated tools (code editor
 - **No Errors Found**: Show success state when error scan finds no issues
 - **Unrepairable Errors**: Display clear messages when AI cannot fix certain errors and suggest manual intervention
 - **Context-Dependent Errors**: Use related files as context for more accurate error repair
+- **Empty Flask Blueprints**: Show empty state with guidance for creating first endpoint
+- **Invalid Flask Routes**: Validate route paths and warn about conflicts or invalid syntax
+- **Missing Required Parameters**: Highlight endpoints with incomplete parameter configurations
+- **Duplicate Package Names**: Prevent adding the same npm package twice
+- **Invalid Package Versions**: Validate semantic versioning format for npm packages
+- **Conflicting Scripts**: Warn when npm script names conflict with built-in commands
 
 ## Design Direction
 The design should evoke a professional IDE environment while remaining approachable - think Visual Studio Code meets Figma. Clean panels, clear hierarchy, and purposeful use of space to avoid overwhelming users with options.
@@ -156,9 +176,11 @@ Animations should feel responsive and purposeful - quick panel transitions (200m
   - Database (database icon) for models
   - Tree (tree-structure icon) for components  
   - PaintBrush (paint-brush icon) for styling
+  - Flask (flask icon) for Flask backend API
+  - Gear (gear icon) for project settings
   - Play (play icon) for Playwright E2E tests
   - BookOpen (book-open icon) for Storybook stories
-  - Flask (flask icon) for unit tests
+  - Cube (cube icon) for unit tests
   - Wrench (wrench icon) for error repair
   - FileCode (file-code icon) for individual files
   - Plus (plus icon) for create actions
@@ -168,6 +190,8 @@ Animations should feel responsive and purposeful - quick panel transitions (200m
   - CheckCircle (check-circle icon) for success states
   - Warning (warning icon) for warnings
   - X (x icon) for errors
+  - Package (package icon) for npm packages
+  - Pencil (pencil icon) for edit actions
   
 - **Spacing**: 
   - Panel padding: p-6 (24px) for main content areas

src/App.tsx

@@ -6,8 +6,8 @@ import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Card } from '@/components/ui/card'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
-import { Code, Database, Tree, PaintBrush, Download, Sparkle, Flask, BookOpen, Play, Wrench } from '@phosphor-icons/react'
-import { ProjectFile, PrismaModel, ComponentNode, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest } from '@/types/project'
+import { Code, Database, Tree, PaintBrush, Download, Sparkle, Flask, BookOpen, Play, Wrench, Gear, Cube } from '@phosphor-icons/react'
+import { ProjectFile, PrismaModel, ComponentNode, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig, NextJsConfig, NpmSettings } from '@/types/project'
 import { CodeEditor } from '@/components/CodeEditor'
 import { ModelDesigner } from '@/components/ModelDesigner'
 import { ComponentTreeBuilder } from '@/components/ComponentTreeBuilder'
@@ -16,8 +16,10 @@ import { FileExplorer } from '@/components/FileExplorer'
 import { PlaywrightDesigner } from '@/components/PlaywrightDesigner'
 import { StorybookDesigner } from '@/components/StorybookDesigner'
 import { UnitTestDesigner } from '@/components/UnitTestDesigner'
+import { FlaskDesigner } from '@/components/FlaskDesigner'
+import { ProjectSettingsDesigner } from '@/components/ProjectSettingsDesigner'
 import { ErrorPanel } from '@/components/ErrorPanel'
-import { generateNextJSProject, generatePrismaSchema, generateMUITheme, generatePlaywrightTests, generateStorybookStories, generateUnitTests } from '@/lib/generators'
+import { generateNextJSProject, generatePrismaSchema, generateMUITheme, generatePlaywrightTests, generateStorybookStories, generateUnitTests, generateFlaskApp } from '@/lib/generators'
 import { AIService } from '@/lib/ai-service'
 import { toast } from 'sonner'
 import {
@@ -30,6 +32,43 @@ import {
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
 
+const DEFAULT_FLASK_CONFIG: FlaskConfig = {
+  blueprints: [],
+  corsOrigins: ['http://localhost:3000'],
+  enableSwagger: true,
+  port: 5000,
+  debug: true,
+}
+
+const DEFAULT_NEXTJS_CONFIG: NextJsConfig = {
+  appName: 'my-nextjs-app',
+  typescript: true,
+  eslint: true,
+  tailwind: true,
+  srcDirectory: true,
+  appRouter: true,
+  importAlias: '@/*',
+  turbopack: false,
+}
+
+const DEFAULT_NPM_SETTINGS: NpmSettings = {
+  packages: [
+    { id: '1', name: 'react', version: '^18.2.0', isDev: false },
+    { id: '2', name: 'react-dom', version: '^18.2.0', isDev: false },
+    { id: '3', name: 'next', version: '^14.0.0', isDev: false },
+    { id: '4', name: '@mui/material', version: '^5.14.0', isDev: false },
+    { id: '5', name: 'typescript', version: '^5.0.0', isDev: true },
+    { id: '6', name: '@types/react', version: '^18.2.0', isDev: true },
+  ],
+  scripts: {
+    dev: 'next dev',
+    build: 'next build',
+    start: 'next start',
+    lint: 'next lint',
+  },
+  packageManager: 'npm',
+}
+
 const DEFAULT_THEME: ThemeConfig = {
   variants: [
     {
@@ -99,6 +138,9 @@ function App() {
   const [playwrightTests, setPlaywrightTests] = useKV<PlaywrightTest[]>('project-playwright-tests', [])
   const [storybookStories, setStorybookStories] = useKV<StorybookStory[]>('project-storybook-stories', [])
   const [unitTests, setUnitTests] = useKV<UnitTest[]>('project-unit-tests', [])
+  const [flaskConfig, setFlaskConfig] = useKV<FlaskConfig>('project-flask-config', DEFAULT_FLASK_CONFIG)
+  const [nextjsConfig, setNextjsConfig] = useKV<NextJsConfig>('project-nextjs-config', DEFAULT_NEXTJS_CONFIG)
+  const [npmSettings, setNpmSettings] = useKV<NpmSettings>('project-npm-settings', DEFAULT_NPM_SETTINGS)
   const [activeFileId, setActiveFileId] = useState<string | null>((files || [])[0]?.id || null)
   const [activeTab, setActiveTab] = useState('code')
   const [exportDialogOpen, setExportDialogOpen] = useState(false)
@@ -111,6 +153,9 @@ function App() {
   const safePlaywrightTests = playwrightTests || []
   const safeStorybookStories = storybookStories || []
   const safeUnitTests = unitTests || []
+  const safeFlaskConfig = flaskConfig || DEFAULT_FLASK_CONFIG
+  const safeNextjsConfig = nextjsConfig || DEFAULT_NEXTJS_CONFIG
+  const safeNpmSettings = npmSettings || DEFAULT_NPM_SETTINGS
 
   const { errors: autoDetectedErrors } = useAutoRepair(safeFiles, false)
 
@@ -134,26 +179,51 @@ function App() {
   }
 
   const handleExportProject = () => {
-    const projectFiles = generateNextJSProject('my-nextjs-app', safeModels, safeComponents, safeTheme)
+    const projectFiles = generateNextJSProject(safeNextjsConfig.appName, safeModels, safeComponents, safeTheme)
     
     const prismaSchema = generatePrismaSchema(safeModels)
     const themeCode = generateMUITheme(safeTheme)
     const playwrightTestCode = generatePlaywrightTests(safePlaywrightTests)
     const storybookFiles = generateStorybookStories(safeStorybookStories)
     const unitTestFiles = generateUnitTests(safeUnitTests)
+    const flaskFiles = generateFlaskApp(safeFlaskConfig)
     
-    const allFiles = {
+    const packageJson = {
+      name: safeNextjsConfig.appName,
+      version: '0.1.0',
+      private: true,
+      scripts: safeNpmSettings.scripts,
+      dependencies: safeNpmSettings.packages
+        .filter(pkg => !pkg.isDev)
+        .reduce((acc, pkg) => {
+          acc[pkg.name] = pkg.version
+          return acc
+        }, {} as Record<string, string>),
+      devDependencies: safeNpmSettings.packages
+        .filter(pkg => pkg.isDev)
+        .reduce((acc, pkg) => {
+          acc[pkg.name] = pkg.version
+          return acc
+        }, {} as Record<string, string>),
+    }
+    
+    const allFiles: Record<string, string> = {
       ...projectFiles,
+      'package.json': JSON.stringify(packageJson, null, 2),
       'prisma/schema.prisma': prismaSchema,
       'src/theme.ts': themeCode,
       'e2e/tests.spec.ts': playwrightTestCode,
       ...storybookFiles,
       ...unitTestFiles,
-      ...safeFiles.reduce((acc, file) => {
-        acc[file.path] = file.content
-        return acc
-      }, {} as Record<string, string>),
     }
+    
+    Object.entries(flaskFiles).forEach(([path, content]) => {
+      allFiles[`backend/${path}`] = content
+    })
+    
+    safeFiles.forEach(file => {
+      allFiles[file.path] = file.content
+    })
 
     setGeneratedCode(allFiles)
     setExportDialogOpen(true)
@@ -246,6 +316,14 @@ function App() {
               <PaintBrush size={18} />
               Styling
             </TabsTrigger>
+            <TabsTrigger value="flask" className="gap-2">
+              <Flask size={18} />
+              Flask API
+            </TabsTrigger>
+            <TabsTrigger value="settings" className="gap-2">
+              <Gear size={18} />
+              Settings
+            </TabsTrigger>
             <TabsTrigger value="playwright" className="gap-2">
               <Play size={18} />
               Playwright
@@ -255,7 +333,7 @@ function App() {
               Storybook
             </TabsTrigger>
             <TabsTrigger value="unit-tests" className="gap-2">
-              <Flask size={18} />
+              <Cube size={18} />
               Unit Tests
             </TabsTrigger>
             <TabsTrigger value="errors" className="gap-2">
@@ -309,6 +387,19 @@ function App() {
             <StyleDesigner theme={safeTheme} onThemeChange={setTheme} />
           </TabsContent>
 
+          <TabsContent value="flask" className="h-full m-0">
+            <FlaskDesigner config={safeFlaskConfig} onConfigChange={setFlaskConfig} />
+          </TabsContent>
+
+          <TabsContent value="settings" className="h-full m-0">
+            <ProjectSettingsDesigner
+              nextjsConfig={safeNextjsConfig}
+              npmSettings={safeNpmSettings}
+              onNextjsConfigChange={setNextjsConfig}
+              onNpmSettingsChange={setNpmSettings}
+            />
+          </TabsContent>
+
           <TabsContent value="playwright" className="h-full m-0">
             <PlaywrightDesigner tests={safePlaywrightTests} onTestsChange={setPlaywrightTests} />
           </TabsContent>

src/components/FlaskDesigner.tsx

@@ -0,0 +1,605 @@
+import { useState } from 'react'
+import { FlaskBlueprint, FlaskEndpoint, FlaskParam, FlaskConfig } from '@/types/project'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { Switch } from '@/components/ui/switch'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Plus, Trash, Flask, Pencil } from '@phosphor-icons/react'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+
+interface FlaskDesignerProps {
+  config: FlaskConfig
+  onConfigChange: (config: FlaskConfig | ((current: FlaskConfig) => FlaskConfig)) => void
+}
+
+export function FlaskDesigner({ config, onConfigChange }: FlaskDesignerProps) {
+  const [selectedBlueprintId, setSelectedBlueprintId] = useState<string | null>(
+    config.blueprints[0]?.id || null
+  )
+  const [blueprintDialogOpen, setBlueprintDialogOpen] = useState(false)
+  const [endpointDialogOpen, setEndpointDialogOpen] = useState(false)
+  const [editingBlueprint, setEditingBlueprint] = useState<FlaskBlueprint | null>(null)
+  const [editingEndpoint, setEditingEndpoint] = useState<FlaskEndpoint | null>(null)
+
+  const selectedBlueprint = config.blueprints.find((b) => b.id === selectedBlueprintId)
+
+  const handleAddBlueprint = () => {
+    setEditingBlueprint({
+      id: `blueprint-${Date.now()}`,
+      name: '',
+      urlPrefix: '/',
+      endpoints: [],
+      description: '',
+    })
+    setBlueprintDialogOpen(true)
+  }
+
+  const handleEditBlueprint = (blueprint: FlaskBlueprint) => {
+    setEditingBlueprint({ ...blueprint })
+    setBlueprintDialogOpen(true)
+  }
+
+  const handleSaveBlueprint = () => {
+    if (!editingBlueprint) return
+
+    onConfigChange((current) => {
+      const existingIndex = current.blueprints.findIndex((b) => b.id === editingBlueprint.id)
+      if (existingIndex >= 0) {
+        const updated = [...current.blueprints]
+        updated[existingIndex] = editingBlueprint
+        return { ...current, blueprints: updated }
+      } else {
+        return { ...current, blueprints: [...current.blueprints, editingBlueprint] }
+      }
+    })
+
+    setSelectedBlueprintId(editingBlueprint.id)
+    setBlueprintDialogOpen(false)
+    setEditingBlueprint(null)
+  }
+
+  const handleDeleteBlueprint = (blueprintId: string) => {
+    onConfigChange((current) => ({
+      ...current,
+      blueprints: current.blueprints.filter((b) => b.id !== blueprintId),
+    }))
+    if (selectedBlueprintId === blueprintId) {
+      setSelectedBlueprintId(null)
+    }
+  }
+
+  const handleAddEndpoint = () => {
+    setEditingEndpoint({
+      id: `endpoint-${Date.now()}`,
+      path: '/',
+      method: 'GET',
+      name: '',
+      description: '',
+      queryParams: [],
+      pathParams: [],
+      authentication: false,
+      corsEnabled: true,
+    })
+    setEndpointDialogOpen(true)
+  }
+
+  const handleEditEndpoint = (endpoint: FlaskEndpoint) => {
+    setEditingEndpoint({ ...endpoint })
+    setEndpointDialogOpen(true)
+  }
+
+  const handleSaveEndpoint = () => {
+    if (!editingEndpoint || !selectedBlueprintId) return
+
+    onConfigChange((current) => {
+      const blueprints = [...current.blueprints]
+      const blueprintIndex = blueprints.findIndex((b) => b.id === selectedBlueprintId)
+      if (blueprintIndex >= 0) {
+        const blueprint = { ...blueprints[blueprintIndex] }
+        const endpointIndex = blueprint.endpoints.findIndex((e) => e.id === editingEndpoint.id)
+        
+        if (endpointIndex >= 0) {
+          blueprint.endpoints[endpointIndex] = editingEndpoint
+        } else {
+          blueprint.endpoints.push(editingEndpoint)
+        }
+        
+        blueprints[blueprintIndex] = blueprint
+      }
+      return { ...current, blueprints }
+    })
+
+    setEndpointDialogOpen(false)
+    setEditingEndpoint(null)
+  }
+
+  const handleDeleteEndpoint = (endpointId: string) => {
+    if (!selectedBlueprintId) return
+
+    onConfigChange((current) => {
+      const blueprints = [...current.blueprints]
+      const blueprintIndex = blueprints.findIndex((b) => b.id === selectedBlueprintId)
+      if (blueprintIndex >= 0) {
+        blueprints[blueprintIndex] = {
+          ...blueprints[blueprintIndex],
+          endpoints: blueprints[blueprintIndex].endpoints.filter((e) => e.id !== endpointId),
+        }
+      }
+      return { ...current, blueprints }
+    })
+  }
+
+  const addQueryParam = () => {
+    if (!editingEndpoint) return
+    setEditingEndpoint({
+      ...editingEndpoint,
+      queryParams: [
+        ...(editingEndpoint.queryParams || []),
+        { id: `param-${Date.now()}`, name: '', type: 'string', required: false },
+      ],
+    })
+  }
+
+  const removeQueryParam = (paramId: string) => {
+    if (!editingEndpoint) return
+    setEditingEndpoint({
+      ...editingEndpoint,
+      queryParams: editingEndpoint.queryParams?.filter((p) => p.id !== paramId) || [],
+    })
+  }
+
+  const updateQueryParam = (paramId: string, updates: Partial<FlaskParam>) => {
+    if (!editingEndpoint) return
+    setEditingEndpoint({
+      ...editingEndpoint,
+      queryParams:
+        editingEndpoint.queryParams?.map((p) => (p.id === paramId ? { ...p, ...updates } : p)) || [],
+    })
+  }
+
+  const getMethodColor = (method: string) => {
+    switch (method) {
+      case 'GET':
+        return 'bg-blue-500/10 text-blue-500 border-blue-500/30'
+      case 'POST':
+        return 'bg-green-500/10 text-green-500 border-green-500/30'
+      case 'PUT':
+        return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/30'
+      case 'DELETE':
+        return 'bg-red-500/10 text-red-500 border-red-500/30'
+      case 'PATCH':
+        return 'bg-purple-500/10 text-purple-500 border-purple-500/30'
+      default:
+        return 'bg-muted text-muted-foreground'
+    }
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center">
+              <Flask size={24} weight="duotone" className="text-white" />
+            </div>
+            <div>
+              <h2 className="text-lg font-bold">Flask Backend Designer</h2>
+              <p className="text-sm text-muted-foreground">
+                Design REST API endpoints and blueprints
+              </p>
+            </div>
+          </div>
+          <Button onClick={handleAddBlueprint}>
+            <Plus size={16} className="mr-2" />
+            New Blueprint
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex overflow-hidden">
+        <div className="w-64 border-r border-border flex flex-col">
+          <div className="p-4 border-b border-border">
+            <h3 className="font-semibold text-sm">Blueprints</h3>
+          </div>
+          <ScrollArea className="flex-1">
+            <div className="p-2 space-y-1">
+              {config.blueprints.map((blueprint) => (
+                <div
+                  key={blueprint.id}
+                  className={`group p-3 rounded-lg cursor-pointer transition-colors ${
+                    selectedBlueprintId === blueprint.id
+                      ? 'bg-primary/10 border border-primary/30'
+                      : 'hover:bg-muted border border-transparent'
+                  }`}
+                  onClick={() => setSelectedBlueprintId(blueprint.id)}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1 min-w-0">
+                      <p className="font-semibold text-sm truncate">{blueprint.name}</p>
+                      <p className="text-xs text-muted-foreground truncate">
+                        {blueprint.urlPrefix}
+                      </p>
+                      <Badge variant="secondary" className="mt-1 text-xs">
+                        {blueprint.endpoints.length} endpoints
+                      </Badge>
+                    </div>
+                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-6 w-6 p-0"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleEditBlueprint(blueprint)
+                        }}
+                      >
+                        <Pencil size={14} />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-6 w-6 p-0 text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDeleteBlueprint(blueprint.id)
+                        }}
+                      >
+                        <Trash size={14} />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+
+        <div className="flex-1 flex flex-col">
+          {selectedBlueprint ? (
+            <>
+              <div className="p-6 border-b border-border">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="text-lg font-bold">{selectedBlueprint.name}</h3>
+                    <p className="text-sm text-muted-foreground">
+                      {selectedBlueprint.description || 'No description'}
+                    </p>
+                  </div>
+                  <Button onClick={handleAddEndpoint}>
+                    <Plus size={16} className="mr-2" />
+                    New Endpoint
+                  </Button>
+                </div>
+              </div>
+
+              <ScrollArea className="flex-1 p-6">
+                <div className="space-y-4 max-w-4xl">
+                  {selectedBlueprint.endpoints.map((endpoint) => (
+                    <Card key={endpoint.id}>
+                      <CardHeader>
+                        <div className="flex items-start justify-between">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-2">
+                              <Badge className={getMethodColor(endpoint.method)}>
+                                {endpoint.method}
+                              </Badge>
+                              <code className="text-sm font-mono">
+                                {selectedBlueprint.urlPrefix}
+                                {endpoint.path}
+                              </code>
+                            </div>
+                            <CardTitle className="text-base">{endpoint.name}</CardTitle>
+                            <CardDescription>{endpoint.description}</CardDescription>
+                          </div>
+                          <div className="flex gap-1">
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => handleEditEndpoint(endpoint)}
+                            >
+                              <Pencil size={16} />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="text-destructive"
+                              onClick={() => handleDeleteEndpoint(endpoint.id)}
+                            >
+                              <Trash size={16} />
+                            </Button>
+                          </div>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="space-y-3 text-sm">
+                          {endpoint.authentication && (
+                            <div className="flex items-center gap-2">
+                              <Badge variant="outline">🔒 Authentication Required</Badge>
+                            </div>
+                          )}
+                          {endpoint.queryParams && endpoint.queryParams.length > 0 && (
+                            <div>
+                              <p className="font-semibold mb-1">Query Parameters:</p>
+                              <div className="space-y-1">
+                                {endpoint.queryParams.map((param) => (
+                                  <div key={param.id} className="flex items-center gap-2 text-xs">
+                                    <code className="text-primary">{param.name}</code>
+                                    <Badge variant="secondary" className="text-xs">
+                                      {param.type}
+                                    </Badge>
+                                    {param.required && (
+                                      <Badge variant="outline" className="text-xs">
+                                        required
+                                      </Badge>
+                                    )}
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+
+                  {selectedBlueprint.endpoints.length === 0 && (
+                    <Card className="p-12 text-center">
+                      <p className="text-muted-foreground">No endpoints yet</p>
+                      <Button variant="link" onClick={handleAddEndpoint} className="mt-2">
+                        Create your first endpoint
+                      </Button>
+                    </Card>
+                  )}
+                </div>
+              </ScrollArea>
+            </>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-muted-foreground">
+              <div className="text-center">
+                <Flask size={48} className="mx-auto mb-4 opacity-50" />
+                <p>Select a blueprint or create a new one</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Dialog open={blueprintDialogOpen} onOpenChange={setBlueprintDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {editingBlueprint?.name ? 'Edit Blueprint' : 'New Blueprint'}
+            </DialogTitle>
+            <DialogDescription>Configure your Flask blueprint</DialogDescription>
+          </DialogHeader>
+          {editingBlueprint && (
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="blueprint-name">Blueprint Name</Label>
+                <Input
+                  id="blueprint-name"
+                  value={editingBlueprint.name}
+                  onChange={(e) =>
+                    setEditingBlueprint({ ...editingBlueprint, name: e.target.value })
+                  }
+                  placeholder="e.g., users, auth, products"
+                />
+              </div>
+              <div>
+                <Label htmlFor="blueprint-prefix">URL Prefix</Label>
+                <Input
+                  id="blueprint-prefix"
+                  value={editingBlueprint.urlPrefix}
+                  onChange={(e) =>
+                    setEditingBlueprint({ ...editingBlueprint, urlPrefix: e.target.value })
+                  }
+                  placeholder="/api/v1"
+                />
+              </div>
+              <div>
+                <Label htmlFor="blueprint-description">Description</Label>
+                <Textarea
+                  id="blueprint-description"
+                  value={editingBlueprint.description}
+                  onChange={(e) =>
+                    setEditingBlueprint({ ...editingBlueprint, description: e.target.value })
+                  }
+                  placeholder="What does this blueprint handle?"
+                />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBlueprintDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveBlueprint}>Save Blueprint</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={endpointDialogOpen} onOpenChange={setEndpointDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>
+              {editingEndpoint?.name ? 'Edit Endpoint' : 'New Endpoint'}
+            </DialogTitle>
+            <DialogDescription>Configure your API endpoint</DialogDescription>
+          </DialogHeader>
+          <ScrollArea className="flex-1 pr-4">
+            {editingEndpoint && (
+              <div className="space-y-4">
+                <Tabs defaultValue="basic" className="w-full">
+                  <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="basic">Basic</TabsTrigger>
+                    <TabsTrigger value="params">Parameters</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="basic" className="space-y-4 mt-4">
+                    <div>
+                      <Label htmlFor="endpoint-name">Endpoint Name</Label>
+                      <Input
+                        id="endpoint-name"
+                        value={editingEndpoint.name}
+                        onChange={(e) =>
+                          setEditingEndpoint({ ...editingEndpoint, name: e.target.value })
+                        }
+                        placeholder="e.g., Get User List"
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <Label htmlFor="endpoint-method">Method</Label>
+                        <Select
+                          value={editingEndpoint.method}
+                          onValueChange={(value: any) =>
+                            setEditingEndpoint({ ...editingEndpoint, method: value })
+                          }
+                        >
+                          <SelectTrigger id="endpoint-method">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="GET">GET</SelectItem>
+                            <SelectItem value="POST">POST</SelectItem>
+                            <SelectItem value="PUT">PUT</SelectItem>
+                            <SelectItem value="DELETE">DELETE</SelectItem>
+                            <SelectItem value="PATCH">PATCH</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div>
+                        <Label htmlFor="endpoint-path">Path</Label>
+                        <Input
+                          id="endpoint-path"
+                          value={editingEndpoint.path}
+                          onChange={(e) =>
+                            setEditingEndpoint({ ...editingEndpoint, path: e.target.value })
+                          }
+                          placeholder="/users"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <Label htmlFor="endpoint-description">Description</Label>
+                      <Textarea
+                        id="endpoint-description"
+                        value={editingEndpoint.description}
+                        onChange={(e) =>
+                          setEditingEndpoint({ ...editingEndpoint, description: e.target.value })
+                        }
+                        placeholder="What does this endpoint do?"
+                      />
+                    </div>
+                    <Separator />
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between">
+                        <Label htmlFor="endpoint-auth">Require Authentication</Label>
+                        <Switch
+                          id="endpoint-auth"
+                          checked={editingEndpoint.authentication}
+                          onCheckedChange={(checked) =>
+                            setEditingEndpoint({ ...editingEndpoint, authentication: checked })
+                          }
+                        />
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <Label htmlFor="endpoint-cors">Enable CORS</Label>
+                        <Switch
+                          id="endpoint-cors"
+                          checked={editingEndpoint.corsEnabled}
+                          onCheckedChange={(checked) =>
+                            setEditingEndpoint({ ...editingEndpoint, corsEnabled: checked })
+                          }
+                        />
+                      </div>
+                    </div>
+                  </TabsContent>
+                  <TabsContent value="params" className="space-y-4 mt-4">
+                    <div>
+                      <div className="flex items-center justify-between mb-3">
+                        <Label>Query Parameters</Label>
+                        <Button size="sm" variant="outline" onClick={addQueryParam}>
+                          <Plus size={14} className="mr-1" />
+                          Add
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {editingEndpoint.queryParams?.map((param) => (
+                          <Card key={param.id} className="p-3">
+                            <div className="space-y-2">
+                              <div className="flex gap-2">
+                                <Input
+                                  placeholder="Parameter name"
+                                  value={param.name}
+                                  onChange={(e) =>
+                                    updateQueryParam(param.id, { name: e.target.value })
+                                  }
+                                  className="flex-1"
+                                />
+                                <Select
+                                  value={param.type}
+                                  onValueChange={(value: any) =>
+                                    updateQueryParam(param.id, { type: value })
+                                  }
+                                >
+                                  <SelectTrigger className="w-32">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    <SelectItem value="string">string</SelectItem>
+                                    <SelectItem value="number">number</SelectItem>
+                                    <SelectItem value="boolean">boolean</SelectItem>
+                                    <SelectItem value="array">array</SelectItem>
+                                  </SelectContent>
+                                </Select>
+                                <Button
+                                  size="sm"
+                                  variant="ghost"
+                                  onClick={() => removeQueryParam(param.id)}
+                                >
+                                  <Trash size={16} />
+                                </Button>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <Switch
+                                  checked={param.required}
+                                  onCheckedChange={(checked) =>
+                                    updateQueryParam(param.id, { required: checked })
+                                  }
+                                />
+                                <Label className="text-xs">Required</Label>
+                              </div>
+                            </div>
+                          </Card>
+                        ))}
+                        {(!editingEndpoint.queryParams ||
+                          editingEndpoint.queryParams.length === 0) && (
+                          <p className="text-sm text-muted-foreground text-center py-4">
+                            No query parameters defined
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </div>
+            )}
+          </ScrollArea>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEndpointDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveEndpoint}>Save Endpoint</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

src/components/ProjectSettingsDesigner.tsx

@@ -0,0 +1,611 @@
+import { useState } from 'react'
+import { NextJsConfig, NpmSettings, NpmPackage } from '@/types/project'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Plus, Trash, Package, Cube, Code } from '@phosphor-icons/react'
+import { Badge } from '@/components/ui/badge'
+
+interface ProjectSettingsDesignerProps {
+  nextjsConfig: NextJsConfig
+  npmSettings: NpmSettings
+  onNextjsConfigChange: (config: NextJsConfig | ((current: NextJsConfig) => NextJsConfig)) => void
+  onNpmSettingsChange: (settings: NpmSettings | ((current: NpmSettings) => NpmSettings)) => void
+}
+
+export function ProjectSettingsDesigner({
+  nextjsConfig,
+  npmSettings,
+  onNextjsConfigChange,
+  onNpmSettingsChange,
+}: ProjectSettingsDesignerProps) {
+  const [packageDialogOpen, setPackageDialogOpen] = useState(false)
+  const [editingPackage, setEditingPackage] = useState<NpmPackage | null>(null)
+  const [scriptDialogOpen, setScriptDialogOpen] = useState(false)
+  const [scriptKey, setScriptKey] = useState('')
+  const [scriptValue, setScriptValue] = useState('')
+  const [editingScriptKey, setEditingScriptKey] = useState<string | null>(null)
+
+  const handleAddPackage = () => {
+    setEditingPackage({
+      id: `package-${Date.now()}`,
+      name: '',
+      version: 'latest',
+      isDev: false,
+    })
+    setPackageDialogOpen(true)
+  }
+
+  const handleEditPackage = (pkg: NpmPackage) => {
+    setEditingPackage({ ...pkg })
+    setPackageDialogOpen(true)
+  }
+
+  const handleSavePackage = () => {
+    if (!editingPackage || !editingPackage.name) return
+
+    onNpmSettingsChange((current) => {
+      const existingIndex = current.packages.findIndex((p) => p.id === editingPackage.id)
+      if (existingIndex >= 0) {
+        const updated = [...current.packages]
+        updated[existingIndex] = editingPackage
+        return { ...current, packages: updated }
+      } else {
+        return { ...current, packages: [...current.packages, editingPackage] }
+      }
+    })
+
+    setPackageDialogOpen(false)
+    setEditingPackage(null)
+  }
+
+  const handleDeletePackage = (packageId: string) => {
+    onNpmSettingsChange((current) => ({
+      ...current,
+      packages: current.packages.filter((p) => p.id !== packageId),
+    }))
+  }
+
+  const handleAddScript = () => {
+    setScriptKey('')
+    setScriptValue('')
+    setEditingScriptKey(null)
+    setScriptDialogOpen(true)
+  }
+
+  const handleEditScript = (key: string, value: string) => {
+    setScriptKey(key)
+    setScriptValue(value)
+    setEditingScriptKey(key)
+    setScriptDialogOpen(true)
+  }
+
+  const handleSaveScript = () => {
+    if (!scriptKey || !scriptValue) return
+
+    onNpmSettingsChange((current) => {
+      const scripts = { ...current.scripts }
+      if (editingScriptKey && editingScriptKey !== scriptKey) {
+        delete scripts[editingScriptKey]
+      }
+      scripts[scriptKey] = scriptValue
+      return { ...current, scripts }
+    })
+
+    setScriptDialogOpen(false)
+    setScriptKey('')
+    setScriptValue('')
+    setEditingScriptKey(null)
+  }
+
+  const handleDeleteScript = (key: string) => {
+    onNpmSettingsChange((current) => {
+      const scripts = { ...current.scripts }
+      delete scripts[key]
+      return { ...current, scripts }
+    })
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
+            <Cube size={24} weight="duotone" className="text-white" />
+          </div>
+          <div>
+            <h2 className="text-lg font-bold">Project Settings</h2>
+            <p className="text-sm text-muted-foreground">
+              Configure Next.js and npm settings
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Tabs defaultValue="nextjs" className="flex-1 flex flex-col">
+        <div className="border-b border-border px-6">
+          <TabsList>
+            <TabsTrigger value="nextjs">Next.js Config</TabsTrigger>
+            <TabsTrigger value="packages">NPM Packages</TabsTrigger>
+            <TabsTrigger value="scripts">Scripts</TabsTrigger>
+          </TabsList>
+        </div>
+
+        <ScrollArea className="flex-1">
+          <div className="p-6">
+            <TabsContent value="nextjs" className="mt-0">
+              <div className="max-w-2xl space-y-6">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Application Settings</CardTitle>
+                    <CardDescription>Basic Next.js application configuration</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <Label htmlFor="app-name">Application Name</Label>
+                      <Input
+                        id="app-name"
+                        value={nextjsConfig.appName}
+                        onChange={(e) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            appName: e.target.value,
+                          }))
+                        }
+                        placeholder="my-nextjs-app"
+                      />
+                    </div>
+
+                    <div>
+                      <Label htmlFor="import-alias">Import Alias</Label>
+                      <Input
+                        id="import-alias"
+                        value={nextjsConfig.importAlias}
+                        onChange={(e) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            importAlias: e.target.value,
+                          }))
+                        }
+                        placeholder="@/*"
+                      />
+                      <p className="text-xs text-muted-foreground mt-1">
+                        Used for module imports (e.g., import {'{'} Button {'}'} from "@/components")
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Features</CardTitle>
+                    <CardDescription>Enable or disable Next.js features</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label htmlFor="typescript">TypeScript</Label>
+                        <p className="text-xs text-muted-foreground">
+                          Use TypeScript for type safety
+                        </p>
+                      </div>
+                      <Switch
+                        id="typescript"
+                        checked={nextjsConfig.typescript}
+                        onCheckedChange={(checked) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            typescript: checked,
+                          }))
+                        }
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label htmlFor="eslint">ESLint</Label>
+                        <p className="text-xs text-muted-foreground">Code linting and formatting</p>
+                      </div>
+                      <Switch
+                        id="eslint"
+                        checked={nextjsConfig.eslint}
+                        onCheckedChange={(checked) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            eslint: checked,
+                          }))
+                        }
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label htmlFor="tailwind">Tailwind CSS</Label>
+                        <p className="text-xs text-muted-foreground">Utility-first CSS framework</p>
+                      </div>
+                      <Switch
+                        id="tailwind"
+                        checked={nextjsConfig.tailwind}
+                        onCheckedChange={(checked) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            tailwind: checked,
+                          }))
+                        }
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label htmlFor="src-dir">Use src/ Directory</Label>
+                        <p className="text-xs text-muted-foreground">
+                          Organize code inside src/ folder
+                        </p>
+                      </div>
+                      <Switch
+                        id="src-dir"
+                        checked={nextjsConfig.srcDirectory}
+                        onCheckedChange={(checked) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            srcDirectory: checked,
+                          }))
+                        }
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label htmlFor="app-router">App Router</Label>
+                        <p className="text-xs text-muted-foreground">
+                          Use the new App Router (vs Pages Router)
+                        </p>
+                      </div>
+                      <Switch
+                        id="app-router"
+                        checked={nextjsConfig.appRouter}
+                        onCheckedChange={(checked) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            appRouter: checked,
+                          }))
+                        }
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label htmlFor="turbopack">Turbopack (Beta)</Label>
+                        <p className="text-xs text-muted-foreground">
+                          Faster incremental bundler
+                        </p>
+                      </div>
+                      <Switch
+                        id="turbopack"
+                        checked={nextjsConfig.turbopack || false}
+                        onCheckedChange={(checked) =>
+                          onNextjsConfigChange((current) => ({
+                            ...current,
+                            turbopack: checked,
+                          }))
+                        }
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="packages" className="mt-0">
+              <div className="max-w-4xl">
+                <div className="flex items-center justify-between mb-6">
+                  <div>
+                    <h3 className="text-lg font-semibold">NPM Packages</h3>
+                    <p className="text-sm text-muted-foreground">
+                      Manage project dependencies
+                    </p>
+                  </div>
+                  <Button onClick={handleAddPackage}>
+                    <Plus size={16} className="mr-2" />
+                    Add Package
+                  </Button>
+                </div>
+
+                <div className="mb-6">
+                  <Label htmlFor="package-manager">Package Manager</Label>
+                  <Select
+                    value={npmSettings.packageManager}
+                    onValueChange={(value: any) =>
+                      onNpmSettingsChange((current) => ({
+                        ...current,
+                        packageManager: value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger id="package-manager" className="w-48">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="npm">npm</SelectItem>
+                      <SelectItem value="yarn">yarn</SelectItem>
+                      <SelectItem value="pnpm">pnpm</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="font-semibold mb-3">Dependencies</h4>
+                    <div className="space-y-2">
+                      {npmSettings.packages
+                        .filter((pkg) => !pkg.isDev)
+                        .map((pkg) => (
+                          <Card key={pkg.id}>
+                            <CardContent className="p-4">
+                              <div className="flex items-center justify-between">
+                                <div className="flex-1">
+                                  <div className="flex items-center gap-2">
+                                    <Package size={18} className="text-primary" />
+                                    <code className="font-semibold">{pkg.name}</code>
+                                    <Badge variant="secondary">{pkg.version}</Badge>
+                                  </div>
+                                  {pkg.description && (
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                      {pkg.description}
+                                    </p>
+                                  )}
+                                </div>
+                                <div className="flex gap-2">
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() => handleEditPackage(pkg)}
+                                  >
+                                    Edit
+                                  </Button>
+                                  <Button
+                                    size="sm"
+                                    variant="ghost"
+                                    className="text-destructive"
+                                    onClick={() => handleDeletePackage(pkg.id)}
+                                  >
+                                    <Trash size={16} />
+                                  </Button>
+                                </div>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        ))}
+                      {npmSettings.packages.filter((pkg) => !pkg.isDev).length === 0 && (
+                        <Card className="p-8 text-center">
+                          <p className="text-muted-foreground">No dependencies added yet</p>
+                        </Card>
+                      )}
+                    </div>
+                  </div>
+
+                  <div>
+                    <h4 className="font-semibold mb-3">Dev Dependencies</h4>
+                    <div className="space-y-2">
+                      {npmSettings.packages
+                        .filter((pkg) => pkg.isDev)
+                        .map((pkg) => (
+                          <Card key={pkg.id}>
+                            <CardContent className="p-4">
+                              <div className="flex items-center justify-between">
+                                <div className="flex-1">
+                                  <div className="flex items-center gap-2">
+                                    <Package size={18} className="text-muted-foreground" />
+                                    <code className="font-semibold">{pkg.name}</code>
+                                    <Badge variant="secondary">{pkg.version}</Badge>
+                                    <Badge variant="outline" className="text-xs">
+                                      dev
+                                    </Badge>
+                                  </div>
+                                  {pkg.description && (
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                      {pkg.description}
+                                    </p>
+                                  )}
+                                </div>
+                                <div className="flex gap-2">
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() => handleEditPackage(pkg)}
+                                  >
+                                    Edit
+                                  </Button>
+                                  <Button
+                                    size="sm"
+                                    variant="ghost"
+                                    className="text-destructive"
+                                    onClick={() => handleDeletePackage(pkg.id)}
+                                  >
+                                    <Trash size={16} />
+                                  </Button>
+                                </div>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        ))}
+                      {npmSettings.packages.filter((pkg) => pkg.isDev).length === 0 && (
+                        <Card className="p-8 text-center">
+                          <p className="text-muted-foreground">No dev dependencies added yet</p>
+                        </Card>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="scripts" className="mt-0">
+              <div className="max-w-3xl">
+                <div className="flex items-center justify-between mb-6">
+                  <div>
+                    <h3 className="text-lg font-semibold">NPM Scripts</h3>
+                    <p className="text-sm text-muted-foreground">
+                      Define custom commands for your project
+                    </p>
+                  </div>
+                  <Button onClick={handleAddScript}>
+                    <Plus size={16} className="mr-2" />
+                    Add Script
+                  </Button>
+                </div>
+
+                <div className="space-y-2">
+                  {Object.entries(npmSettings.scripts).map(([key, value]) => (
+                    <Card key={key}>
+                      <CardContent className="p-4">
+                        <div className="flex items-center justify-between">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1">
+                              <Code size={18} className="text-primary flex-shrink-0" />
+                              <code className="font-semibold text-sm">{key}</code>
+                            </div>
+                            <code className="text-xs text-muted-foreground block truncate">
+                              {value}
+                            </code>
+                          </div>
+                          <div className="flex gap-2 ml-4">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => handleEditScript(key, value)}
+                            >
+                              Edit
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="text-destructive"
+                              onClick={() => handleDeleteScript(key)}
+                            >
+                              <Trash size={16} />
+                            </Button>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                  {Object.keys(npmSettings.scripts).length === 0 && (
+                    <Card className="p-8 text-center">
+                      <p className="text-muted-foreground">No scripts defined yet</p>
+                    </Card>
+                  )}
+                </div>
+              </div>
+            </TabsContent>
+          </div>
+        </ScrollArea>
+      </Tabs>
+
+      <Dialog open={packageDialogOpen} onOpenChange={setPackageDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {editingPackage?.name ? 'Edit Package' : 'Add Package'}
+            </DialogTitle>
+            <DialogDescription>Configure npm package details</DialogDescription>
+          </DialogHeader>
+          {editingPackage && (
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="package-name">Package Name</Label>
+                <Input
+                  id="package-name"
+                  value={editingPackage.name}
+                  onChange={(e) =>
+                    setEditingPackage({ ...editingPackage, name: e.target.value })
+                  }
+                  placeholder="e.g., react-query, axios"
+                />
+              </div>
+              <div>
+                <Label htmlFor="package-version">Version</Label>
+                <Input
+                  id="package-version"
+                  value={editingPackage.version}
+                  onChange={(e) =>
+                    setEditingPackage({ ...editingPackage, version: e.target.value })
+                  }
+                  placeholder="latest, ^1.0.0, ~2.3.4"
+                />
+              </div>
+              <div>
+                <Label htmlFor="package-description">Description (Optional)</Label>
+                <Input
+                  id="package-description"
+                  value={editingPackage.description || ''}
+                  onChange={(e) =>
+                    setEditingPackage({ ...editingPackage, description: e.target.value })
+                  }
+                  placeholder="What is this package for?"
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <Label htmlFor="package-dev">Development Dependency</Label>
+                <Switch
+                  id="package-dev"
+                  checked={editingPackage.isDev}
+                  onCheckedChange={(checked) =>
+                    setEditingPackage({ ...editingPackage, isDev: checked })
+                  }
+                />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPackageDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSavePackage}>Save Package</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={scriptDialogOpen} onOpenChange={setScriptDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editingScriptKey ? 'Edit Script' : 'Add Script'}</DialogTitle>
+            <DialogDescription>Define a custom npm script command</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="script-name">Script Name</Label>
+              <Input
+                id="script-name"
+                value={scriptKey}
+                onChange={(e) => setScriptKey(e.target.value)}
+                placeholder="e.g., dev, build, test"
+              />
+            </div>
+            <div>
+              <Label htmlFor="script-command">Command</Label>
+              <Input
+                id="script-command"
+                value={scriptValue}
+                onChange={(e) => setScriptValue(e.target.value)}
+                placeholder="e.g., next dev, tsc --noEmit"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setScriptDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveScript}>Save Script</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

src/lib/generators.ts

@@ -1,4 +1,4 @@
-import { PrismaModel, ComponentNode, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest } from '@/types/project'
+import { PrismaModel, ComponentNode, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig, FlaskBlueprint, FlaskEndpoint } from '@/types/project'
 
 export function generatePrismaSchema(models: PrismaModel[]): string {
   let schema = `generator client {\n  provider = "prisma-client-js"\n}\n\n`
@@ -395,3 +395,171 @@ export function generateUnitTests(tests: UnitTest[]): Record<string, string> {
 
   return files
 }
+
+export function generateFlaskBlueprint(blueprint: FlaskBlueprint): string {
+  let code = `from flask import Blueprint, request, jsonify\n`
+  code += `from typing import Dict, Any\n\n`
+  
+  const blueprintVarName = blueprint.name.toLowerCase().replace(/\s+/g, '_')
+  code += `${blueprintVarName}_bp = Blueprint('${blueprintVarName}', __name__, url_prefix='${blueprint.urlPrefix}')\n\n`
+
+  blueprint.endpoints.forEach(endpoint => {
+    const functionName = endpoint.name.toLowerCase().replace(/\s+/g, '_')
+    code += `@${blueprintVarName}_bp.route('${endpoint.path}', methods=['${endpoint.method}'])\n`
+    code += `def ${functionName}():\n`
+    code += `    """\n`
+    code += `    ${endpoint.description || endpoint.name}\n`
+    
+    if (endpoint.queryParams && endpoint.queryParams.length > 0) {
+      code += `    \n    Query Parameters:\n`
+      endpoint.queryParams.forEach(param => {
+        code += `    - ${param.name} (${param.type})${param.required ? ' [required]' : ''}: ${param.description || ''}\n`
+      })
+    }
+    
+    code += `    """\n`
+    
+    if (endpoint.authentication) {
+      code += `    # TODO: Add authentication check\n`
+      code += `    # if not is_authenticated(request):\n`
+      code += `    #     return jsonify({'error': 'Unauthorized'}), 401\n\n`
+    }
+
+    if (endpoint.queryParams && endpoint.queryParams.length > 0) {
+      endpoint.queryParams.forEach(param => {
+        if (param.required) {
+          code += `    ${param.name} = request.args.get('${param.name}')\n`
+          code += `    if ${param.name} is None:\n`
+          code += `        return jsonify({'error': '${param.name} is required'}), 400\n\n`
+        } else {
+          const defaultVal = param.defaultValue || (param.type === 'string' ? "''" : param.type === 'number' ? '0' : 'None')
+          code += `    ${param.name} = request.args.get('${param.name}', ${defaultVal})\n`
+        }
+      })
+      code += `\n`
+    }
+
+    if (endpoint.method === 'POST' || endpoint.method === 'PUT' || endpoint.method === 'PATCH') {
+      code += `    data = request.get_json()\n`
+      code += `    if not data:\n`
+      code += `        return jsonify({'error': 'No data provided'}), 400\n\n`
+    }
+
+    code += `    # TODO: Implement ${endpoint.name} logic\n`
+    code += `    result = {\n`
+    code += `        'message': '${endpoint.name} endpoint',\n`
+    code += `        'method': '${endpoint.method}',\n`
+    code += `        'path': '${endpoint.path}'\n`
+    code += `    }\n\n`
+    code += `    return jsonify(result), 200\n\n\n`
+  })
+
+  return code
+}
+
+export function generateFlaskApp(config: FlaskConfig): Record<string, string> {
+  const files: Record<string, string> = {}
+
+  let appCode = `from flask import Flask\n`
+  if (config.corsOrigins && config.corsOrigins.length > 0) {
+    appCode += `from flask_cors import CORS\n`
+  }
+  appCode += `\n`
+
+  config.blueprints.forEach(blueprint => {
+    const blueprintVarName = blueprint.name.toLowerCase().replace(/\s+/g, '_')
+    appCode += `from blueprints.${blueprintVarName} import ${blueprintVarName}_bp\n`
+  })
+
+  appCode += `\ndef create_app():\n`
+  appCode += `    app = Flask(__name__)\n\n`
+
+  if (config.debug !== undefined) {
+    appCode += `    app.config['DEBUG'] = ${config.debug ? 'True' : 'False'}\n`
+  }
+
+  if (config.databaseUrl) {
+    appCode += `    app.config['SQLALCHEMY_DATABASE_URI'] = '${config.databaseUrl}'\n`
+    appCode += `    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False\n`
+  }
+
+  appCode += `\n`
+
+  if (config.corsOrigins && config.corsOrigins.length > 0) {
+    appCode += `    CORS(app, resources={r"/*": {"origins": ${JSON.stringify(config.corsOrigins)}}})\n\n`
+  }
+
+  config.blueprints.forEach(blueprint => {
+    const blueprintVarName = blueprint.name.toLowerCase().replace(/\s+/g, '_')
+    appCode += `    app.register_blueprint(${blueprintVarName}_bp)\n`
+  })
+
+  appCode += `\n    @app.route('/')\n`
+  appCode += `    def index():\n`
+  appCode += `        return {'message': 'Flask API is running', 'version': '1.0.0'}\n\n`
+
+  appCode += `    return app\n\n\n`
+  appCode += `if __name__ == '__main__':\n`
+  appCode += `    app = create_app()\n`
+  appCode += `    app.run(host='0.0.0.0', port=${config.port || 5000}, debug=${config.debug ? 'True' : 'False'})\n`
+
+  files['app.py'] = appCode
+
+  config.blueprints.forEach(blueprint => {
+    const blueprintVarName = blueprint.name.toLowerCase().replace(/\s+/g, '_')
+    files[`blueprints/${blueprintVarName}.py`] = generateFlaskBlueprint(blueprint)
+  })
+
+  files['blueprints/__init__.py'] = '# Flask blueprints\n'
+
+  files['requirements.txt'] = `Flask>=3.0.0
+${config.corsOrigins && config.corsOrigins.length > 0 ? 'Flask-CORS>=4.0.0' : ''}
+${config.databaseUrl ? 'Flask-SQLAlchemy>=3.0.0\npsycopg2-binary>=2.9.0' : ''}
+${config.jwtSecret ? 'PyJWT>=2.8.0\nFlask-JWT-Extended>=4.5.0' : ''}
+python-dotenv>=1.0.0
+`
+
+  files['.env'] = `FLASK_APP=app.py
+FLASK_ENV=${config.debug ? 'development' : 'production'}
+${config.databaseUrl ? `DATABASE_URL=${config.databaseUrl}` : 'DATABASE_URL=postgresql://user:password@localhost:5432/mydb'}
+${config.jwtSecret ? 'JWT_SECRET_KEY=your-secret-key-here' : ''}
+`
+
+  files['README.md'] = `# Flask API
+
+Generated with CodeForge
+
+## Getting Started
+
+1. Create a virtual environment:
+\`\`\`bash
+python -m venv venv
+source venv/bin/activate  # On Windows: venv\\Scripts\\activate
+\`\`\`
+
+2. Install dependencies:
+\`\`\`bash
+pip install -r requirements.txt
+\`\`\`
+
+3. Set up your environment variables in .env
+
+4. Run the application:
+\`\`\`bash
+python app.py
+\`\`\`
+
+The API will be available at http://localhost:${config.port || 5000}
+
+## Blueprints
+
+${config.blueprints.map(bp => `- **${bp.name}**: ${bp.description || 'No description'} (${bp.urlPrefix})`).join('\n')}
+
+## API Documentation
+
+${config.enableSwagger ? 'Swagger documentation available at /docs' : 'No API documentation configured'}
+`
+
+  return files
+}
+

src/types/project.ts

@@ -107,6 +107,85 @@ export interface TestCase {
   teardown?: string
 }
 
+export interface FlaskEndpoint {
+  id: string
+  path: string
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  name: string
+  description: string
+  requestBody?: FlaskRequestBody
+  queryParams?: FlaskParam[]
+  pathParams?: FlaskParam[]
+  responseSchema?: string
+  authentication?: boolean
+  corsEnabled?: boolean
+}
+
+export interface FlaskRequestBody {
+  contentType: 'application/json' | 'multipart/form-data' | 'application/x-www-form-urlencoded'
+  schema: Record<string, FlaskFieldSchema>
+}
+
+export interface FlaskParam {
+  id: string
+  name: string
+  type: 'string' | 'number' | 'boolean' | 'array'
+  required: boolean
+  description?: string
+  defaultValue?: string
+}
+
+export interface FlaskFieldSchema {
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array'
+  required: boolean
+  description?: string
+  validation?: string
+}
+
+export interface FlaskBlueprint {
+  id: string
+  name: string
+  urlPrefix: string
+  endpoints: FlaskEndpoint[]
+  description: string
+}
+
+export interface FlaskConfig {
+  blueprints: FlaskBlueprint[]
+  databaseUrl?: string
+  corsOrigins?: string[]
+  jwtSecret?: boolean
+  enableSwagger?: boolean
+  port?: number
+  debug?: boolean
+}
+
+export interface NextJsConfig {
+  appName: string
+  typescript: boolean
+  eslint: boolean
+  tailwind: boolean
+  srcDirectory: boolean
+  appRouter: boolean
+  importAlias: string
+  turbopack?: boolean
+}
+
+export interface NpmPackage {
+  id: string
+  name: string
+  version: string
+  isDev: boolean
+  description?: string
+}
+
+export interface NpmSettings {
+  packages: NpmPackage[]
+  scripts: Record<string, string>
+  nodeVersion?: string
+  packageManager: 'npm' | 'yarn' | 'pnpm'
+}
+
 export interface Project {
   name: string
   files: ProjectFile[]
@@ -116,4 +195,7 @@ export interface Project {
   playwrightTests?: PlaywrightTest[]
   storybookStories?: StorybookStory[]
   unitTests?: UnitTest[]
+  flaskConfig?: FlaskConfig
+  nextjsConfig?: NextJsConfig
+  npmSettings?: NpmSettings
 }