How to Integrate Ubersuggest with V0

Before building the integration, you need an API key from Ubersuggest. The Ubersuggest API is available to paid subscribers — the Individual plan and above include API access. If you are on the free tier, you will need to upgrade to access the API. Log in to your Ubersuggest account at app.neilpatel.com. Navigate to your account settings — look for a profile icon or your name in the top-right corner and click on it to open the account menu. Select 'Account Settings' or 'API Keys' from the dropdown. In the API section, you will find your API key displayed or a button to generate one. Copy this key — it is a long alphanumeric string that authenticates your API requests. Keep this key secure: it has access to your Ubersuggest subscription's API quota, and someone with your key could exhaust your monthly query limits. Before moving on, verify your API key works by testing a simple request. You can use your browser's address bar or a tool like Postman to call: `https://app.neilpatel.com/api/keywords_for_keyword?country=us&language=en&keyword=seo+tools` with a header `Authorization: Bearer YOUR_API_KEY`. If you get a JSON response with keyword data, your key is working. If you get a 401 error, double-check the key value and make sure your Ubersuggest plan includes API access. Note the specific Ubersuggest API endpoints you plan to use — the keyword suggestions endpoint, domain overview endpoint, and content ideas endpoint each have different paths and query parameters. The Ubersuggest API documentation is available in your account dashboard.

With your API key ready, switch to V0 to generate the frontend SEO dashboard. This step is purely about the visual layout — V0 will generate the React components with the right inputs, tables, and metric displays. You will connect them to the real Ubersuggest API in the next step. In V0's chat panel, describe the specific SEO dashboard layout you want. For a keyword research tool, describe the search input, results table columns, and any metric visualizations you need. Be specific about what data columns you want to display so V0 generates the right table headers and data mapping. V0 will generate a component with shadcn/ui Table and Input components, Tailwind styling, and a fetch call structure pointing to your planned API route path. Review the preview to check: - The keyword search input and submit button are prominently placed - The results table has the right columns with appropriate alignment (numbers right-aligned, text left-aligned) - Loading states are shown while fetching (skeleton rows or a spinner) - The difficulty score badges use color coding to communicate risk at a glance - The empty state message clearly prompts the user to start a search If the preview looks good, push to GitHub using V0's Git panel. If you want to refine anything — more columns, different layout, additional filtering — iterate with follow-up prompts before pushing. V0 is great for rapid UI iteration at this stage.

Now create the secure server-side API route that fetches data from Ubersuggest. Clone your GitHub repository locally and create the file `app/api/ubersuggest/keywords/route.ts`. This route accepts a `keyword` query parameter from the frontend, appends your Ubersuggest API key via the Authorization header, fetches keyword data from Ubersuggest's API, and returns the results as clean JSON to your React component. The Ubersuggest API uses Bearer token authentication — you pass your API key in the `Authorization: Bearer YOUR_KEY` request header. Do not put the API key in the URL as a query parameter, as this would expose it in server logs. Structure the API route to handle both the keyword suggestions endpoint and any additional Ubersuggest endpoints you plan to use. For the keyword suggestions, the API returns an array of keyword objects each containing the keyword string, search volume, SEO difficulty, paid difficulty, and CPC. Transform this array into a clean format before returning it — strip any internal Ubersuggest fields your React component does not need, and ensure number fields are typed correctly. For the country and language parameters that Ubersuggest's API accepts, either hardcode them for your team's primary market or accept them as optional query parameters from the frontend for multi-market SEO research. Add response caching to avoid burning API quota on repeated searches of the same keyword. Use Next.js's built-in fetch caching with `next: { revalidate: 3600 }` — keyword data does not change significantly within an hour, and this cache significantly reduces your API call count.

1// app/api/ubersuggest/keywords/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const UBERSUGGEST_API_KEY = process.env.UBERSUGGEST_API_KEY;
5const UBERSUGGEST_BASE_URL = 'https://app.neilpatel.com/api';
6
7interface UbersuggestKeyword {
8  keyword: string;
9  vol: number;
10  cpc: number;
11  paid: number;
12  sd: number; // SEO difficulty
13}
14
15export async function GET(request: NextRequest) {
16  const { searchParams } = new URL(request.url);
17  const keyword = searchParams.get('keyword');
18  const country = searchParams.get('country') ?? 'us';
19  const language = searchParams.get('language') ?? 'en';
20
21  if (!keyword) {
22    return NextResponse.json(
23      { error: 'keyword parameter is required' },
24      { status: 400 }
25    );
26  }
27
28  if (!UBERSUGGEST_API_KEY) {
29    return NextResponse.json(
30      { error: 'Ubersuggest API key is not configured' },
31      { status: 500 }
32    );
33  }
34
35  try {
36    const url = new URL(`${UBERSUGGEST_BASE_URL}/keywords_for_keyword`);
37    url.searchParams.set('keyword', keyword);
38    url.searchParams.set('country', country);
39    url.searchParams.set('language', language);
40
41    const response = await fetch(url.toString(), {
42      headers: {
43        Authorization: `Bearer ${UBERSUGGEST_API_KEY}`,
44        'Content-Type': 'application/json',
45      },
46      // Cache results for 1 hour to conserve API quota
47      next: { revalidate: 3600 },
48    });
49
50    if (!response.ok) {
51      const errorText = await response.text();
52      console.error(`Ubersuggest API error ${response.status}:`, errorText);
53      return NextResponse.json(
54        { error: `Ubersuggest API error: ${response.status}` },
55        { status: response.status }
56      );
57    }
58
59    const data = await response.json();
60
61    // Transform Ubersuggest response to clean format
62    const keywords = (data.keywords ?? []).map((kw: UbersuggestKeyword) => ({
63      keyword: kw.keyword,
64      monthlyVolume: kw.vol ?? 0,
65      seoDifficulty: kw.sd ?? 0,
66      paidDifficulty: kw.paid ?? 0,
67      cpc: kw.cpc ? `$${kw.cpc.toFixed(2)}` : '$0.00',
68    }));
69
70    return NextResponse.json({ keywords, total: keywords.length });
71  } catch (error) {
72    console.error('Ubersuggest fetch error:', error);
73    return NextResponse.json(
74      { error: 'Failed to fetch keyword data from Ubersuggest' },
75      { status: 500 }
76    );
77  }
78}

Your Ubersuggest API key must be stored as a server-only environment variable in Vercel Dashboard. This is critical — if you accidentally used a `NEXT_PUBLIC_` prefix, the key would be embedded in your JavaScript bundle and visible to anyone who views your site's source code. Always use server-only variables (no `NEXT_PUBLIC_` prefix) for API keys that authenticate paid services. Go to your Vercel Dashboard at vercel.com. Select your project and navigate to Settings → Environment Variables. Click 'Add New'. In the Name field, enter `UBERSUGGEST_API_KEY` exactly as written (matching what your API route reads with `process.env.UBERSUGGEST_API_KEY`). In the Value field, paste your Ubersuggest API key. Under Environments, keep 'Production', 'Preview', and 'Development' all checked — you want the key available across all deployment environments so testing in preview deployments also works. Click Save. Vercel encrypts the value and stores it securely. You will see the variable listed in the Environment Variables table with the value masked. For local development, create a `.env.local` file in your project root and add `UBERSUGGEST_API_KEY=your_actual_key_here`. Make sure `.env.local` is in your `.gitignore` (V0-generated Next.js projects include this by default). When running `npm run dev` locally, Next.js will read from `.env.local` automatically. After saving the variable in Vercel Dashboard, trigger a new deployment by pushing a small commit (or clicking Redeploy in the Vercel Dashboard). The API key only becomes available to the running deployment after a redeploy.

1# .env.local (never commit this file to git)
2UBERSUGGEST_API_KEY=your_ubersuggest_api_key_here

With the API route created and the API key configured in Vercel, update the V0-generated React component to connect to the real API. Clone your GitHub repository locally (or use V0's Dev Mode) and check the component file — V0 should have already generated a fetch call to `/api/ubersuggest/keywords`. Verify the fetch call uses the correct URL structure including the keyword query parameter. Check that the component maps the API response fields to the correct table columns. Your API route returns objects with `keyword`, `monthlyVolume`, `seoDifficulty`, `paidDifficulty`, and `cpc` fields. Confirm the component accesses these with the same field names (JavaScript is case-sensitive). The difficulty badge color logic in the component should use the `seoDifficulty` number (0-100) to determine color: values 0-33 should show a green badge, 34-66 a yellow badge, and 67-100 a red badge. This color coding lets users instantly see which keywords are low-competition versus highly competitive. Test the integration locally by running `npm run dev`. Enter a keyword in the search input and submit — you should see real Ubersuggest data populate the table within a few seconds. If you see an error, check the browser's Developer Tools → Network tab to see what the API route returned. Open the Vercel function logs if testing on a deployed version. Once the local integration works correctly, commit and push to GitHub. Vercel deploys automatically. After deployment, visit your Vercel URL and run a test keyword search to confirm the full integration works end-to-end in production. For complex multi-endpoint SEO dashboard implementations, RapidDev's team can help build out the domain overview and content ideas endpoints alongside the keyword research feature.

1// app/components/keyword-research-tool.tsx
2'use client';
3
4import { useState } from 'react';
5
6interface KeywordResult {
7  keyword: string;
8  monthlyVolume: number;
9  seoDifficulty: number;
10  paidDifficulty: number;
11  cpc: string;
12}
13
14function getDifficultyBadge(score: number) {
15  if (score <= 33) return { label: 'Low', className: 'bg-green-100 text-green-800' };
16  if (score <= 66) return { label: 'Medium', className: 'bg-yellow-100 text-yellow-800' };
17  return { label: 'High', className: 'bg-red-100 text-red-800' };
18}
19
20export function KeywordResearchTool() {
21  const [query, setQuery] = useState('');
22  const [results, setResults] = useState<KeywordResult[]>([]);
23  const [loading, setLoading] = useState(false);
24  const [error, setError] = useState<string | null>(null);
25  const [searched, setSearched] = useState(false);
26
27  const handleSearch = async (e: React.FormEvent) => {
28    e.preventDefault();
29    if (!query.trim()) return;
30
31    setLoading(true);
32    setError(null);
33    setSearched(true);
34
35    try {
36      const res = await fetch(
37        `/api/ubersuggest/keywords?keyword=${encodeURIComponent(query.trim())}`
38      );
39      if (!res.ok) throw new Error(`API error: ${res.status}`);
40      const data = await res.json();
41      setResults(data.keywords ?? []);
42    } catch (err) {
43      setError('Failed to fetch keyword data. Please try again.');
44    } finally {
45      setLoading(false);
46    }
47  };
48
49  return (
50    <div className="max-w-4xl mx-auto p-6">
51      <h1 className="text-2xl font-bold mb-6">Keyword Research</h1>
52
53      <form onSubmit={handleSearch} className="flex gap-3 mb-8">
54        <input
55          type="text"
56          value={query}
57          onChange={(e) => setQuery(e.target.value)}
58          placeholder="Enter a keyword..."
59          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
60        />
61        <button
62          type="submit"
63          disabled={loading}
64          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
65        >
66          {loading ? 'Searching...' : 'Search'}
67        </button>
68      </form>
69
70      {error && <div className="text-red-600 mb-4 p-3 bg-red-50 rounded-lg">{error}</div>}
71
72      {!searched && !loading && (
73        <div className="text-center text-gray-500 py-16">Search for a keyword to see results</div>
74      )}
75
76      {searched && !loading && results.length === 0 && !error && (
77        <div className="text-center text-gray-500 py-16">No keyword data found for "{query}"</div>
78      )}
79
80      {results.length > 0 && (
81        <table className="w-full text-sm">
82          <thead>
83            <tr className="border-b">
84              <th className="text-left py-3 px-2">Keyword</th>
85              <th className="text-right py-3 px-2">Monthly Vol</th>
86              <th className="text-center py-3 px-2">SEO Difficulty</th>
87              <th className="text-right py-3 px-2">Paid Diff</th>
88              <th className="text-right py-3 px-2">CPC</th>
89            </tr>
90          </thead>
91          <tbody>
92            {results.map((kw, i) => {
93              const badge = getDifficultyBadge(kw.seoDifficulty);
94              return (
95                <tr key={i} className="border-b hover:bg-gray-50">
96                  <td className="py-3 px-2 font-medium">{kw.keyword}</td>
97                  <td className="py-3 px-2 text-right">{kw.monthlyVolume.toLocaleString()}</td>
98                  <td className="py-3 px-2 text-center">
99                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${badge.className}`}>
100                      {kw.seoDifficulty} {badge.label}
101                    </span>
102                  </td>
103                  <td className="py-3 px-2 text-right">{kw.paidDifficulty}</td>
104                  <td className="py-3 px-2 text-right">{kw.cpc}</td>
105                </tr>
106              );
107            })}
108          </tbody>
109        </table>
110      )}
111    </div>
112  );
113}