diff --git a/SEED_DATA_GUIDE.md b/SEED_DATA_GUIDE.md
new file mode 100644
index 0000000..ae7712a
--- /dev/null
+++ b/SEED_DATA_GUIDE.md
@@ -0,0 +1,199 @@
+# Seed Data System
+
+## Overview
+
+The application now includes a comprehensive seed data system that loads initial data from JSON configuration into the database (KV store) on first launch.
+
+## Features
+
+### 1. Automatic Data Loading
+- Seed data is automatically loaded on application startup
+- Only loads if data doesn't already exist (safe to re-run)
+- All data is stored in the KV database for persistence
+
+### 2. Seed Data Management UI
+Navigate to **Settings → Data** tab to access the Seed Data Manager with three options:
+
+- **Load Seed Data**: Populates database with initial data (only if not already loaded)
+- **Reset to Defaults**: Overwrites all data with fresh seed data
+- **Clear All Data**: Removes all data from the database (destructive action)
+
+### 3. Dashboard Integration
+The Project Dashboard displays available seed data including:
+- Number of pre-configured files
+- Number of sample models
+- Number of example components
+- And more...
+
+## Seed Data Contents
+
+The system includes the following pre-configured data:
+
+### Files (`project-files`)
+- Sample Next.js pages (page.tsx, layout.tsx)
+- Material UI integration examples
+- TypeScript configuration
+
+### Models (`project-models`)
+- User model with authentication fields
+- Post model with relationships
+- Complete Prisma schema examples
+
+### Components (`project-components`)
+- Button components with variants
+- Card components with styling
+- Reusable UI elements
+
+### Workflows (`project-workflows`)
+- User registration flow
+- Complete workflow with triggers and actions
+- Visual workflow nodes and connections
+
+### Lambdas (`project-lambdas`)
+- User data processing function
+- HTTP trigger configuration
+- Environment variable examples
+
+### Tests (`project-playwright-tests`, `project-storybook-stories`, `project-unit-tests`)
+- E2E test examples
+- Component story examples
+- Unit test templates
+
+### Component Trees (`project-component-trees`)
+- Application layout tree
+- Nested component structures
+- Material UI component hierarchies
+
+## Configuration
+
+### Adding New Seed Data
+
+Edit `/src/config/seed-data.json` to add or modify seed data:
+
+```json
+{
+ "project-files": [...],
+ "project-models": [...],
+ "your-custom-key": [...]
+}
+```
+
+### Seed Data Schema
+
+Each data type follows the TypeScript interfaces defined in `/src/types/project.ts`:
+
+- `ProjectFile`
+- `PrismaModel`
+- `ComponentNode`
+- `Workflow`
+- `Lambda`
+- `PlaywrightTest`
+- `StorybookStory`
+- `UnitTest`
+- `ComponentTree`
+
+## API Reference
+
+### Hook: `useSeedData()`
+
+```typescript
+import { useSeedData } from '@/hooks/data/use-seed-data'
+
+const { isLoaded, isLoading, loadSeedData, resetSeedData, clearAllData } = useSeedData()
+```
+
+**Returns:**
+- `isLoaded`: Boolean indicating if seed data has been loaded
+- `isLoading`: Boolean indicating if an operation is in progress
+- `loadSeedData()`: Function to load seed data (if not already loaded)
+- `resetSeedData()`: Function to reset all data to seed defaults
+- `clearAllData()`: Function to clear all data from database
+
+### Direct KV API
+
+You can also interact with seed data directly:
+
+```typescript
+// Get specific seed data
+const files = await window.spark.kv.get('project-files')
+
+// Update seed data
+await window.spark.kv.set('project-files', updatedFiles)
+
+// Delete seed data
+await window.spark.kv.delete('project-files')
+```
+
+## Components
+
+### ``
+Management UI for seed data operations (used in Settings → Data tab)
+
+### ``
+Display component showing available seed data (used on Dashboard)
+
+## Best Practices
+
+1. **Always use the useKV hook** for reactive state management
+2. **Use functional updates** when modifying arrays/objects to prevent data loss
+3. **Test seed data** thoroughly before deploying
+4. **Document custom seed data** for team members
+5. **Keep seed data minimal** - only include essential examples
+
+## Example: Custom Seed Data
+
+```typescript
+// 1. Add to seed-data.json
+{
+ "my-custom-data": [
+ { "id": "1", "name": "Example 1" },
+ { "id": "2", "name": "Example 2" }
+ ]
+}
+
+// 2. Use in component
+import { useKV } from '@github/spark/hooks'
+
+function MyComponent() {
+ const [data, setData] = useKV('my-custom-data', [])
+
+ // Always use functional updates
+ const addItem = (newItem) => {
+ setData(current => [...current, newItem])
+ }
+
+ return (
+
+ {data.map(item => (
+
{item.name}
+ ))}
+
+ )
+}
+```
+
+## Troubleshooting
+
+### Data Not Loading
+- Check browser console for errors
+- Verify seed-data.json is valid JSON
+- Ensure data keys match KV store keys
+
+### Data Persisting After Clear
+- Hard refresh the browser (Ctrl+Shift+R)
+- Check for cached service workers (PWA)
+- Verify clearAllData completed successfully
+
+### Type Errors
+- Ensure seed data matches TypeScript interfaces
+- Update types in `/src/types/project.ts` if needed
+- Run type checking: `npm run type-check`
+
+## Future Enhancements
+
+Planned improvements:
+- Import/export seed data as JSON files
+- Version control for seed data
+- Seed data migration system
+- Seed data validation UI
+- Partial seed data loading
diff --git a/src/App.tsx b/src/App.tsx
index bed2eec..c0cace0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState, lazy, Suspense, useMemo } from 'react'
+import { useState, lazy, Suspense, useMemo, useEffect } from 'react'
import { Tabs, TabsContent } from '@/components/ui/tabs'
import { AppHeader, PageHeader } from '@/components/organisms'
import { LoadingFallback } from '@/components/molecules'
@@ -6,6 +6,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/componen
import { useProjectState } from '@/hooks/use-project-state'
import { useFileOperations } from '@/hooks/use-file-operations'
import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts'
+import { useSeedData } from '@/hooks/data/use-seed-data'
import { getPageConfig, getEnabledPages, getPageShortcuts, resolveProps } from '@/config/page-loader'
import { toast } from 'sonner'
@@ -74,6 +75,7 @@ function App() {
const fileOps = useFileOperations(files, setFiles)
const { activeFileId, setActiveFileId, handleFileChange, handleFileAdd, handleFileClose } = fileOps
+ const { loadSeedData } = useSeedData()
const [activeTab, setActiveTab] = useState('dashboard')
const [searchOpen, setSearchOpen] = useState(false)
@@ -81,6 +83,10 @@ function App() {
const [lastSaved] = useState(Date.now())
const [errorCount] = useState(0)
+ useEffect(() => {
+ loadSeedData()
+ }, [])
+
const pageConfig = useMemo(() => getPageConfig(), [])
const enabledPages = useMemo(() => getEnabledPages(featureToggles), [featureToggles])
const shortcuts = useMemo(() => getPageShortcuts(featureToggles), [featureToggles])
diff --git a/src/components/ProjectDashboard.tsx b/src/components/ProjectDashboard.tsx
index 4b43870..96163ed 100644
--- a/src/components/ProjectDashboard.tsx
+++ b/src/components/ProjectDashboard.tsx
@@ -14,6 +14,7 @@ import {
Warning
} from '@phosphor-icons/react'
import { ProjectFile, PrismaModel, ComponentNode, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig } from '@/types/project'
+import { SeedDataStatus } from '@/components/atoms'
interface ProjectDashboardProps {
files: ProjectFile[]
@@ -131,6 +132,8 @@ export function ProjectDashboard({
/>
+
+
Project Details
diff --git a/src/components/ProjectSettingsDesigner.tsx b/src/components/ProjectSettingsDesigner.tsx
index 0a4995c..f9a4419 100644
--- a/src/components/ProjectSettingsDesigner.tsx
+++ b/src/components/ProjectSettingsDesigner.tsx
@@ -11,6 +11,7 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
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'
+import { SeedDataManager } from '@/components/molecules'
interface ProjectSettingsDesignerProps {
nextjsConfig: NextJsConfig
@@ -134,6 +135,7 @@ export function ProjectSettingsDesigner({
Next.js ConfigNPM PackagesScripts
+ Data
@@ -504,6 +506,12 @@ export function ProjectSettingsDesigner({
+
+
+
+
+
+
diff --git a/src/components/atoms/SeedDataStatus.tsx b/src/components/atoms/SeedDataStatus.tsx
new file mode 100644
index 0000000..e6d7a4f
--- /dev/null
+++ b/src/components/atoms/SeedDataStatus.tsx
@@ -0,0 +1,60 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Database, Check, X } from '@phosphor-icons/react'
+import seedDataConfig from '@/config/seed-data.json'
+
+export function SeedDataStatus() {
+ const dataKeys = Object.keys(seedDataConfig)
+
+ const getDataCount = (key: string): number => {
+ const data = seedDataConfig[key as keyof typeof seedDataConfig]
+ return Array.isArray(data) ? data.length : 0
+ }
+
+ const getLabelForKey = (key: string): string => {
+ const labels: Record = {
+ 'project-files': 'Files',
+ 'project-models': 'Models',
+ 'project-components': 'Components',
+ 'project-workflows': 'Workflows',
+ 'project-lambdas': 'Lambdas',
+ 'project-playwright-tests': 'Playwright Tests',
+ 'project-storybook-stories': 'Storybook Stories',
+ 'project-unit-tests': 'Unit Tests',
+ 'project-component-trees': 'Component Trees',
+ }
+ return labels[key] || key
+ }
+
+ return (
+
+
+
+
+ Seed Data Available
+
+
+ Pre-configured data ready to load from database
+
+
+
+