How to Integrate Bolt.new with RapidAPI

RapidAPI's marketplace has thousands of APIs organized by category — Finance, Sports, Weather, Translation, Social Media, E-commerce, Artificial Intelligence, and more. Before integrating with Bolt, spend a few minutes on RapidAPI's discovery process to understand what data the API returns and whether its free tier limits match your needs. To find and subscribe to an API: go to rapidapi.com, use the search bar or browse by category. Each API listing shows its pricing tiers, latency statistics, and popularity score. Look for APIs with a 'FREEMIUM' or 'FREE' tag in the top-left of the listing — these have a free tier that is sufficient for development and prototyping. Click the API, then click 'Subscribe to Test' on the free tier. Once subscribed, navigate to the API's 'Endpoints' tab. Find the endpoint you want to use (most APIs have multiple endpoints for different data types), click on it, and look for the 'Code Snippets' section on the right side. Select 'JavaScript > Fetch' or 'JavaScript > Axios' from the dropdown. This gives you pre-built code with the correct URL, headers, and request structure. Copy this snippet — you will paste it into a Bolt prompt shortly. For your RapidAPI key: go to rapidapi.com/developer/dashboard, select 'My Apps,' and find the 'Application Key' for your app (named 'default-application' if you have not renamed it). This single key authenticates every RapidAPI subscription. Store it securely — you will add it to your Bolt project's .env file.

1// Example of what RapidAPI auto-generates (JavaScript Fetch):
2const response = await fetch('https://open-weather13.p.rapidapi.com/city/London/EN', {
3  method: 'GET',
4  headers: {
5    'X-RapidAPI-Key': 'your-rapidapi-key-here',
6    'X-RapidAPI-Host': 'open-weather13.p.rapidapi.com'
7  }
8});
9const data = await response.json();
10console.log(data);

With the RapidAPI code snippet in hand, you have everything Bolt needs to generate a complete integration. The key is to describe both the API route (server-side proxy) and the UI component in a single prompt. Bolt understands the RapidAPI authentication pattern and will generate proper code that keeps your key server-side. The most effective prompt pattern includes: (1) the API endpoint URL, (2) the specific data fields you want to display, (3) a description of the UI component you want, and (4) an explicit instruction to use an environment variable for the key rather than hardcoding it. You do not need to paste the entire RapidAPI snippet — just the URL and any required query parameters are enough. Bolt will generate several files: an API route file (Next.js: app/api/[name]/route.ts, or a Vite server function) that handles the RapidAPI call, a React component that fetches from your local API route and displays the data, and TypeScript interfaces for the response data. The generated API route will use process.env.RAPIDAPI_KEY (for Next.js) or import.meta.env.VITE_RAPIDAPI_KEY (for Vite) — both are correct patterns, depending on your project type. After Bolt generates the code, review the API route to confirm: the X-RapidAPI-Key header uses an environment variable (not a hardcoded string), the X-RapidAPI-Host header matches the API's domain, and error handling is in place for failed API calls. If Bolt hardcoded the key in the generated code (it sometimes does on the first pass), prompt: 'Update the API route to use process.env.RAPIDAPI_KEY instead of the hardcoded key value.'

1// app/api/weather/[city]/route.ts (auto-generated by Bolt)
2import { NextResponse } from 'next/server';
3
4export async function GET(
5  request: Request,
6  { params }: { params: { city: string } }
7) {
8  const apiKey = process.env.RAPIDAPI_KEY;
9  
10  if (!apiKey) {
11    return NextResponse.json({ error: 'RapidAPI key not configured' }, { status: 500 });
12  }
13
14  const response = await fetch(
15    `https://open-weather13.p.rapidapi.com/city/${params.city}/EN`,
16    {
17      method: 'GET',
18      headers: {
19        'X-RapidAPI-Key': apiKey,
20        'X-RapidAPI-Host': 'open-weather13.p.rapidapi.com',
21      },
22      cache: 'no-store',
23    }
24  );
25
26  if (!response.ok) {
27    return NextResponse.json(
28      { error: `API error: ${response.status}` },
29      { status: response.status }
30    );
31  }
32
33  const data = await response.json();
34  return NextResponse.json(data);
35}

Bolt's code generation creates the placeholder for your API key, but you need to add the actual key value to the .env file. This is the step that makes the integration work in Bolt's preview environment. In Bolt, look for the .env file in the file tree (usually visible in the left sidebar under the file explorer). If it does not exist, click the '+' button to create a new file named '.env' in the project root. Add your RapidAPI key using the environment variable name that Bolt generated in the API route — typically RAPIDAPI_KEY. For Next.js API routes (server-side only), use the variable name without any prefix: RAPIDAPI_KEY=your-actual-key-here. For Vite projects where you might access the key from a Vite server function, still use no prefix for server-side variables. Only use VITE_ prefix for values that need to be accessible in the browser (your RapidAPI key should NOT be in the browser). After saving the .env file, you may need to restart Bolt's preview server for the environment variable to be picked up. Look for a refresh or restart button in the preview panel, or close and reopen the preview. Once the server restarts, the API route will have access to the key. An important WebContainer limitation to understand: in Bolt's development environment, outbound HTTP calls from your API route to RapidAPI work correctly — this is straightforward server-to-server HTTP. However, if any of the APIs you are using require incoming webhooks (for example, some RapidAPI services offer push notifications or streaming callbacks), those webhook URLs cannot point to your Bolt preview. You would need to deploy to Netlify or Bolt Cloud first to get a stable public URL, then register that URL as the webhook destination.

1# .env file in project root
2# Get your key at: https://rapidapi.com/developer/dashboard
3RAPIDAPI_KEY=your-rapidapi-key-here
4
5# If using multiple RapidAPI subscriptions, same key works for all:
6# RAPIDAPI_KEY is used by all API routes that call RapidAPI endpoints

Most RapidAPI free tiers have request limits — typically between 100 and 1,000 requests per month on the free plan, with paid tiers offering more. Burning through the free quota during development is a common problem, especially when hot module replacement causes components to re-fetch on every code change. Adding simple response caching in your API routes prevents this. Next.js API routes support caching via the fetch cache option. By setting a revalidation period, Next.js caches the API response and serves the cached version for subsequent requests within the time window. For data that does not change frequently (weather updates every 10 minutes, stock prices every 1 minute, sports scores in real-time), this caching dramatically reduces API calls during development. For Vite projects, you can implement caching using a simple in-memory Map in the API proxy, or use a caching middleware. The in-memory approach works for development; for production, use a Redis instance or the hosting platform's edge caching. Also implement proper error handling for RapidAPI's specific error responses. A 429 status means you have exceeded the rate limit (the response body includes details about when the limit resets). A 403 means the API key is invalid or you are not subscribed to that API tier. A 503 from a specific RapidAPI endpoint usually means that particular third-party API is temporarily down. Your error handling should distinguish these cases and show appropriate messages to users.

1// app/api/weather/[city]/route.ts with caching and error handling
2import { NextResponse } from 'next/server';
3
4export async function GET(
5  request: Request,
6  { params }: { params: { city: string } }
7) {
8  const apiKey = process.env.RAPIDAPI_KEY;
9  
10  if (!apiKey) {
11    return NextResponse.json(
12      { error: 'Server configuration error: API key missing' },
13      { status: 500 }
14    );
15  }
16
17  try {
18    const response = await fetch(
19      `https://open-weather13.p.rapidapi.com/city/${encodeURIComponent(params.city)}/EN`,
20      {
21        headers: {
22          'X-RapidAPI-Key': apiKey,
23          'X-RapidAPI-Host': 'open-weather13.p.rapidapi.com',
24        },
25        // Cache for 10 minutes (600 seconds)
26        next: { revalidate: 600 },
27      }
28    );
29
30    if (response.status === 429) {
31      return NextResponse.json(
32        { error: 'Rate limit exceeded. Please try again later.' },
33        { status: 429 }
34      );
35    }
36    
37    if (response.status === 403) {
38      return NextResponse.json(
39        { error: 'API access denied. Check your RapidAPI subscription.' },
40        { status: 403 }
41      );
42    }
43
44    if (!response.ok) {
45      return NextResponse.json(
46        { error: `API error: ${response.status} ${response.statusText}` },
47        { status: response.status }
48      );
49    }
50
51    const data = await response.json();
52    return NextResponse.json(data);
53    
54  } catch (error) {
55    return NextResponse.json(
56      { error: 'Failed to fetch weather data. Please check the city name.' },
57      { status: 500 }
58    );
59  }
60}

Bolt's WebContainer works well for testing outbound API calls during development — your API routes can call RapidAPI without issues. However, for a production deployment where users access the app publicly, you need to deploy to a hosting platform and configure the RAPIDAPI_KEY environment variable there. To deploy via Netlify: in Bolt, go to Settings > Applications and connect your Netlify account via OAuth if you have not already. Then click 'Publish' in the top-right corner of Bolt and select Netlify as the deployment target. Bolt runs npm run build, uploads the output, and provides you with a *.netlify.app URL. After the initial deployment, you need to add the RAPIDAPI_KEY environment variable to Netlify: go to your Netlify dashboard, find the deployed site, navigate to Site Settings > Environment Variables, and add RAPIDAPI_KEY with your actual key value. Trigger a redeploy from the Deploys tab for the environment variable to take effect — the first deployment will fail for any API calls because the variable is not yet set. For Vercel deployments (via GitHub): push your Bolt project to GitHub using Bolt's Git panel, then connect the repository to Vercel. In Vercel's project settings, go to Environment Variables and add RAPIDAPI_KEY. All Next.js API routes have access to process.env variables automatically on Vercel. Once deployed, test all your RapidAPI integrations on the live URL to verify they work in a real server environment. Occasionally, APIs that work in Bolt's preview (which uses the Next.js dev server) behave slightly differently in the production Next.js build — particularly around caching behavior and edge runtime compatibility.

1# Netlify environment variables via CLI (alternative to dashboard):
2npm install -g netlify-cli
3netlify login
4netlify env:set RAPIDAPI_KEY your-rapidapi-key-here
5netlify deploy --prod
6
7# Verify the variable is set:
8netlify env:list