How to Integrate Bolt.new with Robinhood API (Stock Data)

Before writing any code, it is worth spending two minutes understanding the API landscape for stock data — this will save you from building on an unstable foundation. Robinhood has never published an official API. What shows up in GitHub searches is robin-stocks and similar Python libraries that reverse-engineer Robinhood's private mobile app endpoints. These libraries work by accepting your actual Robinhood username and password, which means (1) they store your trading credentials in your code, (2) Robinhood actively patches or changes private endpoints without notice, and (3) automated access violates Section 3 of Robinhood's Terms of Service and can lead to permanent account suspension. Several high-profile projects using these libraries were broken overnight when Robinhood added device fingerprinting to its authentication flow in late 2024. For building a portfolio tracker or stock dashboard, three legitimate providers cover every use case. Alpha Vantage (alphavantage.co) is the most beginner-friendly: sign up with your email, receive an API key instantly, and start querying the GLOBAL_QUOTE endpoint for current prices. The free tier allows 25 requests per day with a rate limit of 5 per minute, which is sufficient for a personal dashboard. Finnhub (finnhub.io) offers a more generous free tier of 60 API calls per minute and includes websocket streaming for real-time quotes on the free plan — genuinely useful for live dashboards. Polygon.io (polygon.io) has a generous free tier for historical data and is popular among developers building backtesting tools or research apps. For this guide, pick Finnhub for its generous free rate limit and real-time websocket support. Go to finnhub.io, click 'Get free API key,' sign up with email, and copy the API key from your dashboard. Keep it handy — you will add it to your .env file in the next step.

Now open Bolt.new and start a new Next.js project. The most important architectural decision is keeping your market data API key on the server side — never expose it in client-side React components where anyone can read it in browser DevTools. Bolt's AI will generate a Next.js API route that acts as a proxy: your React frontend calls /api/stocks, which in turn calls Finnhub using the secret key stored in process.env. This pattern works seamlessly in Bolt's WebContainer during development because outbound HTTPS calls are fully supported. Paste the following prompt into Bolt's chat interface to scaffold the entire project in one go. The prompt specifies TypeScript throughout, includes a .env placeholder, creates the API route proxy pattern, and builds the React dashboard component with real-time polling built in. Bolt will generate all files needed — you just need to add your real API key afterward. After Bolt generates the project, review the generated files. You should see: (1) app/api/stocks/route.ts containing the server-side Finnhub call, (2) app/page.tsx or a components/StockDashboard.tsx with the React UI and useEffect polling logic, (3) a .env.example file with FINNHUB_API_KEY=your_key_here as a placeholder. Verify that the API route reads from process.env.FINNHUB_API_KEY and that no API key is hardcoded in any component file.

1// app/api/stocks/route.ts
2import { NextResponse } from 'next/server';
3
4const FINNHUB_BASE = 'https://finnhub.io/api/v1';
5
6interface QuoteResponse {
7  c: number;  // current price
8  d: number;  // change
9  dp: number; // change percent
10  pc: number; // previous close
11}
12
13export async function GET(request: Request) {
14  const { searchParams } = new URL(request.url);
15  const symbols = searchParams.get('symbols')?.split(',') ?? [];
16  const apiKey = process.env.FINNHUB_API_KEY;
17
18  if (!apiKey) {
19    return NextResponse.json({ error: 'FINNHUB_API_KEY not configured' }, { status: 500 });
20  }
21
22  if (symbols.length === 0) {
23    return NextResponse.json({ error: 'No symbols provided' }, { status: 400 });
24  }
25
26  try {
27    const quotes = await Promise.all(
28      symbols.map(async (symbol) => {
29        const res = await fetch(
30          `${FINNHUB_BASE}/quote?symbol=${symbol}&token=${apiKey}`
31        );
32        const data: QuoteResponse = await res.json();
33        return {
34          symbol,
35          currentPrice: data.c,
36          change: data.d,
37          changePercent: data.dp,
38          previousClose: data.pc,
39        };
40      })
41    );
42    return NextResponse.json({ quotes });
43  } catch (error) {
44    return NextResponse.json({ error: 'Failed to fetch stock data' }, { status: 500 });
45  }
46}

With the project scaffolded, you need to provide your real Finnhub API key so the API route can authenticate with Finnhub's servers. In Bolt.new, environment variables for Next.js projects are stored in a .env file at the project root. Server-side variables (without the NEXT_PUBLIC_ prefix) are only accessible in API routes and server components — they never reach the browser bundle, which is exactly what you want for an API key. In the Bolt file explorer on the left sidebar, locate the .env file Bolt generated. Click it to open it in the editor. You will see the placeholder: FINNHUB_API_KEY=your_key_here. Replace your_key_here with the actual API key you copied from your Finnhub dashboard. Save the file. The Next.js dev server inside Bolt's WebContainer will automatically pick up the new environment variable on the next API request — you do not need to restart anything. If Bolt did not generate a .env file, you can prompt it: 'Create a .env file in the project root with FINNHUB_API_KEY=your_key_here.' Then manually replace the placeholder with your key. Never commit your actual API key to version control — if you later push this project to GitHub, add .env to your .gitignore file first. Bolt typically generates a .gitignore that already excludes .env, but it is worth verifying. One important note about WebContainer behavior: outbound HTTPS calls from the Next.js API route to Finnhub's servers work perfectly during development in Bolt's browser-based runtime. You should see real stock price data in the preview immediately after adding the key. What will not work in the preview is Finnhub's webhook functionality for real-time event notifications — that requires a publicly accessible URL, which the WebContainer cannot provide. For the polling-based dashboard in this guide, that limitation does not apply.

1# .env
2# Server-side only — never use NEXT_PUBLIC_ prefix for API keys
3FINNHUB_API_KEY=your_finnhub_api_key_here
4
5# The NEXT_PUBLIC_ prefix would expose this key in the browser bundle
6# DO NOT write: NEXT_PUBLIC_FINNHUB_API_KEY=... for secret keys

A basic watchlist is useful, but a portfolio tracker becomes much more powerful when users can add their own tickers and track position values. This step upgrades the dashboard with an input field for adding new ticker symbols, localStorage persistence so the watchlist survives page refreshes, and optional share count fields so the dashboard can calculate total portfolio value (price × shares = position value). Prompt Bolt to extend the existing dashboard with these features. The key technical requirement is that localStorage is accessed only inside a useEffect hook — accessing it during server-side rendering will cause an error because localStorage does not exist on the server. Bolt's generated code should already follow this pattern for a Next.js app, but it is worth double-checking. The updated component maintains a watchlist array in React state, initialized from localStorage on mount. When the user types a ticker and clicks 'Add,' the app validates the symbol (non-empty, uppercase letters only) and adds it to the list. When the symbol list changes, the polling interval re-initializes to fetch data for all current symbols. A remove button on each card lets users clean up their watchlist. This pattern works entirely within the WebContainer and requires no backend changes — all state is managed in the browser.

1// hooks/useStockWatchlist.ts
2import { useState, useEffect, useCallback } from 'react';
3
4const STORAGE_KEY = 'stock-watchlist';
5const DEFAULT_TICKERS = ['AAPL', 'MSFT', 'GOOGL'];
6
7export function useStockWatchlist() {
8  const [tickers, setTickers] = useState<string[]>(DEFAULT_TICKERS);
9
10  // Load from localStorage only on client (avoid SSR mismatch)
11  useEffect(() => {
12    const saved = localStorage.getItem(STORAGE_KEY);
13    if (saved) {
14      try {
15        setTickers(JSON.parse(saved));
16      } catch {
17        setTickers(DEFAULT_TICKERS);
18      }
19    }
20  }, []);
21
22  const addTicker = useCallback((symbol: string) => {
23    const upper = symbol.toUpperCase().trim();
24    if (!upper || tickers.includes(upper)) return;
25    const updated = [...tickers, upper];
26    setTickers(updated);
27    localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
28  }, [tickers]);
29
30  const removeTicker = useCallback((symbol: string) => {
31    const updated = tickers.filter((t) => t !== symbol);
32    setTickers(updated);
33    localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
34  }, [tickers]);
35
36  return { tickers, addTicker, removeTicker };
37}

Your stock dashboard works perfectly in Bolt's WebContainer preview, but the .env file approach for environment variables is specific to local and Bolt development. When you deploy to a hosting provider, you must configure environment variables through that platform's dashboard — the .env file does not get deployed (and should not, since it contains your secret key). For deployment to Bolt Cloud (the easiest path), click the 'Publish' button in the top-right corner of the Bolt interface. After the initial publish, go to your project's Settings in Bolt Cloud, find the Environment Variables section, and add FINNHUB_API_KEY with your actual key. Save and trigger a redeploy. Your API route will then have access to the key via process.env.FINNHUB_API_KEY in the production environment. For Netlify deployment, connect your GitHub repository to Netlify (or use Bolt's native Netlify integration under Settings → Applications). In the Netlify dashboard, go to Site settings → Environment variables → Add a variable. Set the key as FINNHUB_API_KEY and the value as your Finnhub API key. Trigger a new deploy. Netlify injects environment variables at build time for static values and at runtime for serverless functions — Next.js API routes run as Netlify Functions and will correctly receive the variable. After deployment, test the live URL to confirm stock prices are loading. If you see a 500 error from the API route, check that the variable name matches exactly (FINNHUB_API_KEY, case-sensitive) in both your code and the hosting platform. Note that Finnhub's free tier API key works on any domain — no domain registration is required for the free plan.

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[[plugins]]
7  package = "@netlify/plugin-nextjs"
8
9# Environment variables set in Netlify Dashboard:
10# FINNHUB_API_KEY = your_finnhub_api_key_here
11#
12# Do NOT hardcode API keys here — use Netlify's
13# Environment Variables UI under Site settings → Environment variables