FitGrade AI

AI-powered sewing pattern fit and grading assistant. Enter your body measurements, paste a pattern size chart, and get personalized size recommendations with grading instructions.

Features

• AI-Powered Chart Parsing: Paste any size chart text and let AI extract structured data
• Smart Fit Recommendations: Get size recommendations for bust, waist, and hip zones
• Grading Instructions: When different sizes are needed, get step-by-step grading guidance
• Visual Fit Indicator: See at a glance if each zone is tight, good fit, or loose
• Editable Data: Manually adjust parsed chart values for accuracy
• Unit Toggle: Work in inches or centimeters
• Fit Preferences: Choose from fitted, standard, relaxed, or oversized ease

Tech Stack

• Next.js 16+ (App Router, Turbopack)
• TypeScript
• Chakra UI v3 (React component library)
• AI SDK with OpenAI integration
• Zod for validation

Setup

1. Install dependencies

npm install

2. Set up environment variables

Create a .env.local file:

# Optional: Enable AI-powered chart parsing
OPENAI_API_KEY=your_openai_api_key_here

Note: The app works without an OpenAI API key - it will use mock data for parsing, which is great for demos.

3. Start the dev server

npm run dev

Open http://localhost:3000 to see the app.

4. Run tests

npm test

90-Second Demo Script

1. Landing Page (10s)

   • Open the app at http://localhost:3000
   • Read the "How it works" section
   • Click "Start Now"

2. Enter Measurements (15s)

   • Enter sample measurements: Bust 36", Waist 28", Hip 40"
   • Toggle between inches/cm to show unit conversion
   • Select "Standard" fit preference

3. Parse Size Chart (20s)

   • Click "Load Sample (Body)" to load a sample chart
   • Click "Parse Chart with AI"
   • Show the parsed table is editable

4. View Results (25s)

   • See the recommended sizes by zone
   • Notice grading is required (bust S, hip L scenario)
   • Show the fit visualization
   • Read the generated grading instructions

5. Adjust Settings (20s)

   • Change fit preference to "Relaxed"
   • Watch recommendations update live
   • Edit a measurement in the chart table
   • See results recalculate automatically

API Endpoints

POST /api/parse-chart

Parse a size chart text into structured JSON.

Request:

{
  "text": "Size chart text here...",
  "defaultUnit": "in"
}

Response:

{
  "chartType": "body",
  "units": "in",
  "sizes": ["XS", "S", "M", "L", "XL"],
  "measurements": ["bust", "waist", "hip"],
  "table": {
    "S": { "bust": 32, "waist": 26, "hip": 36 }
  },
  "notes": []
}

POST /api/grading-notes

Generate grading instructions for a fit scenario.

Request:

{
  "userMeasurements": { "bust": 36, "waist": 28, "hip": 40, "units": "in" },
  "fitPreference": "standard",
  "chartType": "body",
  "units": "in",
  "recommendedSizes": { "bust": "M", "waist": "S", "hip": "L" },
  "gradingPath": ["waist:S", "hip:L"]
}

Response:

{
  "summary": "Grading between sizes is recommended...",
  "steps": ["Start with size M at the bust...", "Grade to size L at the hip..."],
  "cautions": ["Create a muslin test garment first..."]
}

Project Structure

src/
├── app/
│   ├── page.tsx              # Landing page
│   ├── app/page.tsx          # Main application
│   └── api/
│       ├── parse-chart/      # Chart parsing endpoint
│       └── grading-notes/    # Grading notes endpoint
├── components/
│   └── fitgrade/             # FitGrade UI components
│       ├── MeasurementForm.tsx
│       ├── ChartPaste.tsx
│       ├── EditableChartTable.tsx
│       ├── ResultsPanel.tsx
│       └── SilhouetteViz.tsx
└── lib/
    ├── types.ts              # TypeScript types & Zod schemas
    ├── fitEngine.ts          # Pure fit calculation functions
    ├── mockData.ts           # Sample data & mock responses
    └── openai.ts             # OpenAI integration

Fit Engine Logic

The fit engine uses ease targets based on fit preference (in cm):

Preference	Bust Ease	Waist Ease	Hip Ease
Fitted	1 cm	0.5 cm	1 cm
Standard	3.5 cm	2 cm	3.5 cm
Relaxed	7.5 cm	4 cm	7.5 cm
Oversized	14 cm	8 cm	14 cm

For body measurement charts, the engine finds the size where:

• Chart measurement ≈ User measurement (closest match)

For finished garment charts, the engine finds the size where:

• (Garment measurement - User measurement) ≈ Target ease