How to Integrate Bolt.new with Screaming Frog

1// Install dependencies first
2// Run in Bolt's terminal:
3// npm install papaparse cheerio
4// npm install -D @types/papaparse @types/cheerio
5
6// Verify installation in your component:
7import Papa from 'papaparse';
8import * as cheerio from 'cheerio';
9
10console.log('Papa Parse version:', Papa.SCRIPT_PATH);
11console.log('Cheerio available:', typeof cheerio.load === 'function');

1// components/ScreamingFrogViewer.tsx
2'use client';
3import { useState, useCallback } from 'react';
4import Papa from 'papaparse';
5
6interface CrawlRow {
7  Address: string;
8  'Status Code': string;
9  'Title 1': string;
10  'Title 1 Length': string;
11  'Meta Description 1': string;
12  'H1-1': string;
13  'Response Time': string;
14  [key: string]: string;
15}
16
17type Filter = 'all' | '404' | 'missing-title' | 'missing-h1';
18
19export default function ScreamingFrogViewer() {
20  const [rows, setRows] = useState<CrawlRow[]>([]);
21  const [filter, setFilter] = useState<Filter>('all');
22
23  const handleFile = useCallback((file: File) => {
24    Papa.parse<CrawlRow>(file, {
25      header: true,
26      skipEmptyLines: true,
27      complete: (results) => setRows(results.data),
28    });
29  }, []);
30
31  const filtered = rows.filter((row) => {
32    if (filter === '404') return row['Status Code'] === '404';
33    if (filter === 'missing-title') return !row['Title 1']?.trim();
34    if (filter === 'missing-h1') return !row['H1-1']?.trim();
35    return true;
36  });
37
38  const rowStyle = (row: CrawlRow) => {
39    if (row['Status Code'] === '404') return { background: '#fee2e2' };
40    if (parseInt(row['Title 1 Length']) > 60) return { background: '#fef3c7' };
41    if (!row['H1-1']?.trim()) return { background: '#fed7aa' };
42    return {};
43  };
44
45  return (
46    <div style={{ padding: 24 }}>
47      <h2>Screaming Frog Report Viewer</h2>
48      <input
49        type="file"
50        accept=".csv"
51        onChange={(e) => e.target.files?.[0] && handleFile(e.target.files[0])}
52      />
53      <div style={{ margin: '12px 0', display: 'flex', gap: 8 }}>
54        {(['all', '404', 'missing-title', 'missing-h1'] as Filter[]).map((f) => (
55          <button
56            key={f}
57            onClick={() => setFilter(f)}
58            style={{ fontWeight: filter === f ? 'bold' : 'normal' }}
59          >
60            {f === 'all' ? `All (${rows.length})` : f}
61          </button>
62        ))}
63      </div>
64      {filtered.length > 0 && (
65        <table style={{ borderCollapse: 'collapse', width: '100%', fontSize: 13 }}>
66          <thead>
67            <tr>
68              {['Address', 'Status Code', 'Title 1', 'Title 1 Length', 'H1-1', 'Response Time'].map((h) => (
69                <th key={h} style={{ border: '1px solid #ccc', padding: 6, background: '#f3f4f6' }}>{h}</th>
70              ))}
71            </tr>
72          </thead>
73          <tbody>
74            {filtered.map((row, i) => (
75              <tr key={i} style={rowStyle(row)}>
76                {['Address', 'Status Code', 'Title 1', 'Title 1 Length', 'H1-1', 'Response Time'].map((col) => (
77                  <td key={col} style={{ border: '1px solid #ccc', padding: 6, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
78                    {row[col] ?? ''}
79                  </td>
80                ))}
81              </tr>
82            ))}
83          </tbody>
84        </table>
85      )}
86    </div>
87  );
88}

1// app/api/seo/analyze/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import * as cheerio from 'cheerio';
4
5export async function GET(request: NextRequest) {
6  const url = request.nextUrl.searchParams.get('url');
7  if (!url) {
8    return NextResponse.json({ error: 'url parameter is required' }, { status: 400 });
9  }
10
11  let html: string;
12  try {
13    const res = await fetch(url, {
14      headers: { 'User-Agent': 'SEOBot/1.0 (analysis tool)' },
15      signal: AbortSignal.timeout(10000),
16    });
17    if (!res.ok) throw new Error(`HTTP ${res.status}`);
18    html = await res.text();
19  } catch (err) {
20    return NextResponse.json(
21      { error: `Could not fetch URL: ${err instanceof Error ? err.message : 'Unknown'}` },
22      { status: 422 }
23    );
24  }
25
26  const $ = cheerio.load(html);
27
28  const title = $('title').first().text().trim();
29  const metaDesc = $('meta[name="description"]').attr('content') ?? '';
30  const h1s = $('h1').map((_, el) => $(el).text().trim()).get();
31  const canonical = $('link[rel="canonical"]').attr('href') ?? '';
32  const robots = $('meta[name="robots"]').attr('content') ?? '';
33  const imagesWithoutAlt = $('img:not([alt]), img[alt=""]').length;
34
35  return NextResponse.json({
36    url,
37    title: {
38      text: title,
39      length: title.length,
40      pass: title.length >= 10 && title.length <= 60,
41    },
42    metaDescription: {
43      text: metaDesc,
44      length: metaDesc.length,
45      pass: metaDesc.length >= 50 && metaDesc.length <= 155,
46    },
47    h1Count: h1s.length,
48    h1Tags: h1s,
49    canonicalUrl: canonical,
50    robotsMeta: robots,
51    imagesWithoutAlt,
52  });
53}

1// Add to ScreamingFrogViewer.tsx — export filtered results
2import Papa from 'papaparse';
3
4const exportFiltered = () => {
5  const csv = Papa.unparse(filtered);
6  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
7  const url = URL.createObjectURL(blob);
8  const a = document.createElement('a');
9  a.href = url;
10  a.download = `seo-issues-${filter}-${new Date().toISOString().split('T')[0]}.csv`;
11  a.click();
12  URL.revokeObjectURL(url);
13};
14
15// Add button to the filter row:
16<button onClick={exportFiltered} disabled={filtered.length === 0}>
17  Export {filtered.length} rows as CSV
18</button>