How to Integrate Bolt.new with CoSchedule

1// lib/coschedule.ts
2export interface HeadlineAnalysisResult {
3  score: number;
4  wordCount: number;
5  characterCount: number;
6  readingGrade: string;
7  sentiment: 'positive' | 'neutral' | 'negative';
8  tips: string[];
9  wordBalance: {
10    common: number;
11    emotional: number;
12    power: number;
13    uncommon: number;
14  };
15  headline: string;
16}
17
18export async function analyzeHeadline(headline: string): Promise<HeadlineAnalysisResult> {
19  const apiKey = process.env.COSCHEDULE_API_KEY;
20  if (!apiKey) throw new Error('COSCHEDULE_API_KEY is not set');
21  if (!headline?.trim()) throw new Error('Headline is required');
22
23  const trimmed = headline.trim();
24  if (trimmed.length > 200) throw new Error('Headline must be 200 characters or less');
25
26  const response = await fetch('https://api.coschedule.com/headline-analyzer/analyze', {
27    method: 'POST',
28    headers: {
29      'Content-Type': 'application/json',
30      'Authorization': `Bearer ${apiKey}`,
31    },
32    body: JSON.stringify({ headline: trimmed }),
33  });
34
35  if (!response.ok) {
36    const errorText = await response.text();
37    throw new Error(`CoSchedule API error ${response.status}: ${errorText}`);
38  }
39
40  const data = await response.json();
41
42  // Normalize CoSchedule API response to our interface
43  return {
44    score: data.score || data.overallScore || 0,
45    wordCount: data.wordCount || trimmed.split(/\s+/).length,
46    characterCount: trimmed.length,
47    readingGrade: data.readingGrade || data.readingLevel || 'Unknown',
48    sentiment: data.sentiment || 'neutral',
49    tips: data.improvements || data.suggestions || data.tips || [],
50    wordBalance: {
51      common: data.wordBalance?.common || data.commonWords || 0,
52      emotional: data.wordBalance?.emotional || data.emotionalWords || 0,
53      power: data.wordBalance?.power || data.powerWords || 0,
54      uncommon: data.wordBalance?.uncommon || data.uncommonWords || 0,
55    },
56    headline: trimmed,
57  };
58}

1// app/api/coschedule/analyze/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { analyzeHeadline } from '@/lib/coschedule';
4import { createClient } from '@supabase/supabase-js';
5
6// Simple in-memory cache for identical headline strings
7const cache = new Map<string, { result: Awaited<ReturnType<typeof analyzeHeadline>>; ts: number }>();
8const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
9
10export async function POST(request: NextRequest) {
11  const body = await request.json();
12  const { headline, saveToHistory = false } = body;
13
14  if (!headline?.trim()) {
15    return NextResponse.json({ error: 'Headline is required' }, { status: 400 });
16  }
17
18  if (headline.length > 200) {
19    return NextResponse.json({ error: 'Headline must be 200 characters or less' }, { status: 400 });
20  }
21
22  const cacheKey = headline.trim().toLowerCase();
23  const cached = cache.get(cacheKey);
24  if (cached && Date.now() - cached.ts < CACHE_TTL_MS) {
25    return NextResponse.json({ ...cached.result, fromCache: true });
26  }
27
28  try {
29    const result = await analyzeHeadline(headline);
30    cache.set(cacheKey, { result, ts: Date.now() });
31
32    if (saveToHistory) {
33      const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
34      const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
35      if (supabaseUrl && serviceKey) {
36        const supabase = createClient(supabaseUrl, serviceKey);
37        await supabase.from('headline_scores').insert({
38          headline: result.headline,
39          score: result.score,
40          word_count: result.wordCount,
41          character_count: result.characterCount,
42          tips: result.tips,
43        });
44      }
45    }
46
47    return NextResponse.json(result);
48  } catch (error) {
49    console.error('CoSchedule analyze error:', error);
50    return NextResponse.json(
51      { error: (error as Error).message || 'Analysis failed' },
52      { status: 500 }
53    );
54  }
55}

1// src/components/HeadlineComparison.tsx
2'use client';
3import { useState } from 'react';
4
5interface HeadlineResult {
6  headline: string;
7  score: number;
8  wordCount: number;
9  characterCount: number;
10  tips: string[];
11  loading?: boolean;
12  error?: string;
13}
14
15const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
16
17export function HeadlineComparison() {
18  const [input, setInput] = useState('');
19  const [results, setResults] = useState<HeadlineResult[]>([]);
20  const [progress, setProgress] = useState('');
21  const [isAnalyzing, setIsAnalyzing] = useState(false);
22
23  const analyzeAll = async () => {
24    const headlines = input
25      .split('\n')
26      .map((h) => h.trim())
27      .filter((h) => h.length > 0)
28      .slice(0, 10);
29
30    if (headlines.length === 0) return;
31
32    setIsAnalyzing(true);
33    const tempResults: HeadlineResult[] = headlines.map((h) => ({
34      headline: h, score: 0, wordCount: 0, characterCount: 0, tips: [], loading: true,
35    }));
36    setResults(tempResults);
37
38    const finalResults: HeadlineResult[] = [...tempResults];
39
40    for (let i = 0; i < headlines.length; i++) {
41      setProgress(`Analyzing ${i + 1} of ${headlines.length}...`);
42      try {
43        const res = await fetch('/api/coschedule/analyze', {
44          method: 'POST',
45          headers: { 'Content-Type': 'application/json' },
46          body: JSON.stringify({ headline: headlines[i] }),
47        });
48        const data = await res.json();
49        finalResults[i] = { ...data, loading: false };
50      } catch {
51        finalResults[i] = { ...finalResults[i], loading: false, error: 'Analysis failed' };
52      }
53      setResults([...finalResults]);
54      if (i < headlines.length - 1) await sleep(400);
55    }
56
57    setIsAnalyzing(false);
58    setProgress('');
59    setResults([...finalResults].sort((a, b) => b.score - a.score));
60  };
61
62  const scoreColor = (score: number) =>
63    score >= 70 ? 'bg-green-100 text-green-800' :
64    score >= 40 ? 'bg-yellow-100 text-yellow-800' :
65    'bg-red-100 text-red-800';
66
67  const winner = results.find((r) => !r.loading && !r.error);
68
69  return (
70    <div className="space-y-4">
71      <div>
72        <label className="block text-sm font-medium text-gray-700 mb-1">
73          Enter headlines (one per line, up to 10)
74        </label>
75        <textarea
76          value={input}
77          onChange={(e) => setInput(e.target.value)}
78          rows={6}
79          className="w-full border border-gray-300 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500"
80          placeholder="10 Tips for Better Productivity\nHow to Double Your Output This Week\nThe Productivity Secret Nobody Talks About"
81        />
82      </div>
83
84      <button
85        onClick={analyzeAll}
86        disabled={isAnalyzing || !input.trim()}
87        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
88      >
89        {isAnalyzing ? progress : 'Analyze All Headlines'}
90      </button>
91
92      {results.length > 0 && (
93        <div className="space-y-2">
94          {results.map((r, i) => (
95            <div key={i} className="flex items-start gap-3 p-3 border border-gray-200 rounded-md">
96              <span className={`text-sm font-bold px-2 py-1 rounded ${r.loading ? 'bg-gray-100 text-gray-400' : scoreColor(r.score)}`}>
97                {r.loading ? '...' : r.score}
98              </span>
99              <div className="flex-1 min-w-0">
100                <p className="text-sm font-medium truncate">{r.headline}</p>
101                {!r.loading && !r.error && (
102                  <p className="text-xs text-gray-500">{r.wordCount} words · {r.characterCount} chars</p>
103                )}
104                {r.error && <p className="text-xs text-red-500">{r.error}</p>}
105              </div>
106              {i === 0 && !r.loading && !r.error && winner && (
107                <span className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded font-medium">Best</span>
108              )}
109            </div>
110          ))}
111        </div>
112      )}
113    </div>
114  );
115}

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[[plugins]]
7  package = "@netlify/plugin-nextjs"
8
9[build.environment]
10  NODE_VERSION = "20"
11  NEXT_TELEMETRY_DISABLED = "1"