How to Integrate Bolt.new with Ubersuggest

1// lib/seo-api-info.ts
2export function checkSeoApiConfig() {
3  const config = {
4    googleSearchConsole: !!process.env.GOOGLE_SEARCH_CONSOLE_KEY,
5    moz: !!(process.env.MOZ_ACCESS_ID && process.env.MOZ_SECRET_KEY),
6    dataForSEO: !!(process.env.DATAFORSEO_LOGIN && process.env.DATAFORSEO_PASSWORD),
7  };
8
9  console.log('SEO API Configuration:');
10  Object.entries(config).forEach(([key, isSet]) => {
11    console.log(`  ${key}: ${isSet ? 'configured' : 'NOT configured'}`);
12  });
13
14  return config;
15}
16
17// Ubersuggest note: no API available
18// Use these alternatives:
19// - Google Search Console API: free, authoritative data for your own sites
20// - Moz API: keyword difficulty + domain authority, free tier available
21// - DataForSEO API: comprehensive keyword data, pay-per-use

1// app/api/gsc/keywords/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const siteUrl = request.nextUrl.searchParams.get('siteUrl');
6  const days = parseInt(request.nextUrl.searchParams.get('days') ?? '28');
7
8  if (!siteUrl) {
9    return NextResponse.json({ error: 'siteUrl is required' }, { status: 400 });
10  }
11
12  const serviceAccountJson = process.env.GOOGLE_SERVICE_ACCOUNT_JSON;
13  if (!serviceAccountJson) {
14    return NextResponse.json({ error: 'Google service account not configured' }, { status: 500 });
15  }
16
17  const serviceAccount = JSON.parse(serviceAccountJson);
18
19  // Get JWT access token for service account
20  const now = Math.floor(Date.now() / 1000);
21  const jwtPayload = {
22    iss: serviceAccount.client_email,
23    scope: 'https://www.googleapis.com/auth/webmasters.readonly',
24    aud: 'https://oauth2.googleapis.com/token',
25    exp: now + 3600,
26    iat: now,
27  };
28
29  // Note: Use a JWT library like 'jose' in production
30  // This simplified version shows the pattern
31  const endDate = new Date().toISOString().split('T')[0];
32  const startDate = new Date(Date.now() - days * 86400000).toISOString().split('T')[0];
33
34  try {
35    // Exchange service account for access token first (simplified)
36    const tokenRes = await fetch(
37      `https://searchconsole.googleapis.com/webmasters/v3/sites/${encodeURIComponent(siteUrl)}/searchAnalytics/query`,
38      {
39        method: 'POST',
40        headers: {
41          'Content-Type': 'application/json',
42          // In production, use proper JWT signing with the service account private key
43          Authorization: `Bearer ${process.env.GSC_ACCESS_TOKEN}`,
44        },
45        body: JSON.stringify({
46          startDate,
47          endDate,
48          dimensions: ['query'],
49          rowLimit: 20,
50          orderBy: [{ fieldName: 'clicks', sortOrder: 'DESCENDING' }],
51        }),
52      }
53    );
54
55    const data = await tokenRes.json();
56    const keywords = (data.rows ?? []).map((row: any) => ({
57      keyword: row.keys[0],
58      clicks: row.clicks,
59      impressions: row.impressions,
60      ctr: Math.round(row.ctr * 1000) / 10,
61      position: Math.round(row.position * 10) / 10,
62    }));
63
64    return NextResponse.json({ siteUrl, dateRange: { startDate, endDate }, keywords });
65  } catch (error) {
66    const message = error instanceof Error ? error.message : 'Unknown error';
67    return NextResponse.json({ error: message }, { status: 500 });
68  }
69}

1// app/api/moz/keywords/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const keyword = request.nextUrl.searchParams.get('keyword');
6  if (!keyword) {
7    return NextResponse.json({ error: 'keyword is required' }, { status: 400 });
8  }
9
10  const accessId = process.env.MOZ_ACCESS_ID;
11  const secretKey = process.env.MOZ_SECRET_KEY;
12  if (!accessId || !secretKey) {
13    return NextResponse.json({ error: 'Moz credentials not configured' }, { status: 500 });
14  }
15
16  const credentials = Buffer.from(`${accessId}:${secretKey}`).toString('base64');
17
18  try {
19    const response = await fetch('https://lsapi.seomoz.com/v2/keyword_metrics', {
20      method: 'POST',
21      headers: {
22        Authorization: `Basic ${credentials}`,
23        'Content-Type': 'application/json',
24      },
25      body: JSON.stringify({
26        keywords: [keyword.trim()],
27        include_serp_features: true,
28      }),
29    });
30
31    if (!response.ok) {
32      throw new Error(`Moz API error: ${response.status}`);
33    }
34
35    const data = await response.json();
36    const result = data?.results?.[0] ?? {};
37
38    return NextResponse.json({
39      keyword,
40      difficulty: result.difficulty ?? 0,
41      opportunity: result.opportunity ?? 0,
42      volume: result.volume ?? 0,
43      organicCtr: result.organic_ctr ?? 0,
44      difficultyLabel:
45        result.difficulty < 30 ? 'Easy' :
46        result.difficulty < 60 ? 'Medium' : 'Hard',
47    });
48  } catch (error) {
49    const message = error instanceof Error ? error.message : 'Unknown error';
50    return NextResponse.json({ error: message }, { status: 500 });
51  }
52}

1// components/KeywordResearch.tsx
2'use client';
3import { useState } from 'react';
4
5type DataSource = 'moz' | 'dataforseo';
6
7interface KeywordResult {
8  keyword: string;
9  volume: number;
10  difficulty: number;
11  difficultyLabel: string;
12}
13
14export default function KeywordResearch() {
15  const [keyword, setKeyword] = useState('');
16  const [source, setSource] = useState<DataSource>('moz');
17  const [result, setResult] = useState<KeywordResult | null>(null);
18  const [loading, setLoading] = useState(false);
19  const [error, setError] = useState('');
20
21  const search = async () => {
22    if (!keyword.trim()) return;
23    setLoading(true);
24    setError('');
25    try {
26      const endpoint = source === 'moz'
27        ? `/api/moz/keywords?keyword=${encodeURIComponent(keyword)}`
28        : `/api/dataforseo/keywords?keyword=${encodeURIComponent(keyword)}`;
29      const res = await fetch(endpoint);
30      const data = await res.json();
31      if (!res.ok) throw new Error(data.error);
32      setResult(data);
33    } catch (e) {
34      setError(e instanceof Error ? e.message : 'Error fetching data');
35    } finally {
36      setLoading(false);
37    }
38  };
39
40  const difficultyColor =
41    (result?.difficulty ?? 0) < 30 ? '#22c55e'
42    : (result?.difficulty ?? 0) < 60 ? '#eab308'
43    : '#ef4444';
44
45  return (
46    <div style={{ maxWidth: 480, padding: 24 }}>
47      <h2>Keyword Research (Ubersuggest Alternative)</h2>
48      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
49        <input
50          value={keyword}
51          onChange={(e) => setKeyword(e.target.value)}
52          placeholder="Enter keyword..."
53          style={{ flex: 1, padding: 8, border: '1px solid #ccc', borderRadius: 4 }}
54          onKeyDown={(e) => e.key === 'Enter' && search()}
55        />
56        <select value={source} onChange={(e) => setSource(e.target.value as DataSource)}>
57          <option value="moz">Moz</option>
58          <option value="dataforseo">DataForSEO</option>
59        </select>
60        <button onClick={search} disabled={loading}>
61          {loading ? 'Searching...' : 'Search'}
62        </button>
63      </div>
64      {error && <p style={{ color: 'red' }}>{error}</p>}
65      {result && (
66        <div style={{ border: '1px solid #e5e7eb', borderRadius: 8, padding: 16 }}>
67          <strong>{result.keyword}</strong>
68          <p>Monthly Volume: {result.volume?.toLocaleString() ?? 'N/A'}</p>
69          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
70            <span>Difficulty:</span>
71            <span style={{ color: difficultyColor, fontWeight: 'bold' }}>
72              {result.difficulty} — {result.difficultyLabel}
73            </span>
74          </div>
75          <div style={{ height: 8, background: '#f3f4f6', borderRadius: 4, marginTop: 8 }}>
76            <div
77              style={{
78                height: '100%',
79                width: `${result.difficulty}%`,
80                background: difficultyColor,
81                borderRadius: 4,
82                transition: 'width 0.3s',
83              }}
84            />
85          </div>
86        </div>
87      )}
88    </div>
89  );
90}