Build an AI Proposal Generator

# Example prompt for Claude Code
Create a Next.js 14 proposal generator app with:
- App router structure
- Supabase client setup with types
- API routes for Claude integration
- Tailwind CSS with professional theme
- TypeScript interfaces for Proposal, Template, Client
- Form components with react-hook-form
- PDF generation setup with @react-pdf/renderer

-- Supabase SQL for templates table
CREATE TABLE proposal_templates (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  sections JSONB NOT NULL DEFAULT '[]',
  industry TEXT,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Example section structure in JSONB
-- [
--   { "name": "Executive Summary", "prompt_hint": "Brief overview of proposed solution" },
--   { "name": "Scope of Work", "prompt_hint": "Detailed deliverables and milestones" },
--   { "name": "Timeline", "prompt_hint": "Project phases with dates" },
--   { "name": "Investment", "prompt_hint": "Pricing and payment terms" }
-- ]

// types/proposal.ts
export interface ClientIntake {
  // Company Information
  companyName: string;
  industry: string;
  companySize: 'startup' | 'smb' | 'enterprise';

  // Project Details
  projectType: string;
  problemStatement: string;
  desiredOutcomes: string[];

  // Constraints
  budgetRange: { min: number; max: number };
  timelineWeeks: number;

  // Contact
  contactName: string;
  contactEmail: string;
}

// app/api/generate-proposal/route.ts
import Anthropic from '@anthropic-ai/sdk';

const anthropic = new Anthropic();

export async function POST(request: Request) {
  const { intake, template } = await request.json();

  const sections = await Promise.all(
    template.sections.map(async (section: Section) => {
      const response = await anthropic.messages.create({
        model: 'claude-sonnet-4-20250514',
        max_tokens: 1024,
        messages: [{
          role: 'user',
          content: buildSectionPrompt(section, intake)
        }]
      });

      return {
        name: section.name,
        content: response.content[0].text
      };
    })
  );

  return Response.json({ sections });
}

// lib/prompts.ts

export const PROPOSAL_PROMPTS = {
  executiveSummary: (intake: ClientIntake) => `
You are a senior business consultant writing a proposal for ${intake.companyName}.

Write a compelling Executive Summary (250-350 words) that:
1. Acknowledges their challenge: "${intake.problemStatement}"
2. Positions our solution as the ideal fit
3. Highlights 2-3 key benefits aligned with their goals
4. Creates urgency without being pushy
5. Ends with a confident value proposition

Company context:
- Industry: ${intake.industry}
- Size: ${intake.companySize}
- Desired outcomes: ${intake.desiredOutcomes.join(', ')}

Write in a professional but warm tone. Use "we" for our firm and "you" for the client.
Avoid jargon. Be specific, not generic.`,

  scopeOfWork: (intake: ClientIntake) => `
You are a project manager drafting the Scope of Work for ${intake.companyName}.

Create a detailed Scope of Work that includes:

## Deliverables
List 5-7 specific deliverables based on: "${intake.problemStatement}"
Each deliverable should be measurable and tied to their outcomes.

## Methodology
Describe our approach in 3-4 phases:
- Discovery & Planning
- Development & Implementation
- Testing & Refinement
- Launch & Handoff

## Out of Scope
List 3-4 items explicitly excluded to set clear boundaries.

## Success Criteria
Define 3-5 measurable success metrics.

Budget context: $${intake.budgetRange.min.toLocaleString()} - $${intake.budgetRange.max.toLocaleString()}
Timeline: ${intake.timelineWeeks} weeks

Be specific to their industry (${intake.industry}) and company size (${intake.companySize}).`,

  timeline: (intake: ClientIntake) => `
Create a project timeline for a ${intake.timelineWeeks}-week engagement with ${intake.companyName}.

Structure as phases with:
- Phase name
- Duration (weeks)
- Key milestones
- Client touchpoints/review sessions

Project type: ${intake.projectType}
Include buffer time for revisions.
Add specific dates assuming project starts 2 weeks from today.

Format as a clear, scannable timeline that builds client confidence.`,

  investment: (intake: ClientIntake) => `
Write the Investment/Pricing section for ${intake.companyName}'s proposal.

Budget range provided: $${intake.budgetRange.min.toLocaleString()} - $${intake.budgetRange.max.toLocaleString()}

Include:
1. **Investment Summary**: Total project investment with brief justification
2. **Payment Schedule**: 3-4 milestone-based payments
3. **What's Included**: Bullet list of everything covered
4. **Optional Add-ons**: 2-3 upgrade options for future phases
5. **Terms**: Standard payment terms (Net 15, etc.)

Position the investment as valuable, not cheap. Connect cost to outcomes.
Use confident language: "Your investment" not "The cost".`
};

export function buildSectionPrompt(
  section: Section,
  intake: ClientIntake
): string {
  const promptBuilder = PROPOSAL_PROMPTS[section.key];
  if (promptBuilder) {
    return promptBuilder(intake);
  }

  // Fallback for custom sections
  return `Write the "${section.name}" section for a proposal to ${intake.companyName}.
Context: ${section.prompt_hint}
Company: ${intake.industry} ${intake.companySize}
Project: ${intake.problemStatement}
Keep it professional, specific, and under 400 words.`;
}

// components/SectionEditor.tsx
'use client';

import { useState } from 'react';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';

interface SectionEditorProps {
  section: { name: string; content: string };
  onUpdate: (content: string) => void;
  onRegenerate: (feedback: string) => Promise<string>;
}

export function SectionEditor({
  section,
  onUpdate,
  onRegenerate
}: SectionEditorProps) {
  const [content, setContent] = useState(section.content);
  const [feedback, setFeedback] = useState('');
  const [isRegenerating, setIsRegenerating] = useState(false);

  const handleRegenerate = async () => {
    setIsRegenerating(true);
    const newContent = await onRegenerate(feedback);
    setContent(newContent);
    setFeedback('');
    setIsRegenerating(false);
  };

  return (
    <div className="space-y-4 p-6 border rounded-lg">
      <h3 className="text-lg font-semibold">{section.name}</h3>

      <Textarea
        value={content}
        onChange={(e) => {
          setContent(e.target.value);
          onUpdate(e.target.value);
        }}
        rows={12}
        className="font-mono text-sm"
      />

      <div className="flex gap-4">
        <input
          type="text"
          placeholder="Feedback for regeneration (e.g., 'Make it more concise')"
          value={feedback}
          onChange={(e) => setFeedback(e.target.value)}
          className="flex-1 px-3 py-2 border rounded"
        />
        <Button
          onClick={handleRegenerate}
          disabled={isRegenerating}
        >
          {isRegenerating ? 'Regenerating...' : 'Regenerate'}
        </Button>
      </div>
    </div>
  );
}

// components/ProposalPDF.tsx
import {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
  Font
} from '@react-pdf/renderer';

// Register custom fonts for professional look
Font.register({
  family: 'Inter',
  src: 'https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff2'
});

const styles = StyleSheet.create({
  page: {
    padding: 50,
    fontFamily: 'Inter',
  },
  header: {
    marginBottom: 30,
    borderBottom: '2px solid #4F46E5',
    paddingBottom: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#1F2937',
  },
  subtitle: {
    fontSize: 14,
    color: '#6B7280',
    marginTop: 8,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#4F46E5',
    marginBottom: 12,
  },
  sectionContent: {
    fontSize: 11,
    lineHeight: 1.6,
    color: '#374151',
  },
  footer: {
    position: 'absolute',
    bottom: 30,
    left: 50,
    right: 50,
    textAlign: 'center',
    fontSize: 10,
    color: '#9CA3AF',
  },
});

interface ProposalPDFProps {
  proposal: {
    clientName: string;
    projectTitle: string;
    date: string;
    sections: Array<{ name: string; content: string }>;
  };
}

export function ProposalPDF({ proposal }: ProposalPDFProps) {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.header}>
          <Text style={styles.title}>{proposal.projectTitle}</Text>
          <Text style={styles.subtitle}>
            Prepared for {proposal.clientName} | {proposal.date}
          </Text>
        </View>

        {proposal.sections.map((section, index) => (
          <View key={index} style={styles.section}>
            <Text style={styles.sectionTitle}>{section.name}</Text>
            <Text style={styles.sectionContent}>{section.content}</Text>
          </View>
        ))}

        <Text style={styles.footer}>
          Confidential | Page 1 of 1 | Valid for 30 days
        </Text>
      </Page>
    </Document>
  );
}

-- Proposals table with tracking
CREATE TABLE proposals (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  template_id UUID REFERENCES proposal_templates(id),
  client_intake JSONB NOT NULL,
  sections JSONB NOT NULL,
  status TEXT DEFAULT 'draft',
  total_value DECIMAL(10,2),
  sent_at TIMESTAMPTZ,
  viewed_at TIMESTAMPTZ,
  responded_at TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Track proposal views
CREATE TABLE proposal_views (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  proposal_id UUID REFERENCES proposals(id),
  viewed_at TIMESTAMPTZ DEFAULT now(),
  ip_address INET,
  user_agent TEXT
);