How to Integrate Bolt.new with Khan Academy API

Before building anything, it is essential to understand why Khan Academy API tutorials from before 2020 no longer work. Khan Academy launched their public API around 2012 alongside their developer documentation at api.khanacademy.org. The API provided endpoints for browsing the topic tree (/api/v1/topictree), retrieving individual exercises (/api/v1/exercises/{name}), and managing user data with OAuth authentication. This API was widely used by educators and developers to build supplementary learning tools. In late 2020, Khan Academy announced they were deprecating the public API, citing challenges with maintaining the API while focusing resources on the core product. They removed public API access and redirected developers to their embed options and official partner programs. As of 2026, attempts to call api.khanacademy.org endpoints return 404 or 403 errors. There is no replacement public API and no announced timeline for a new one. The official developer documentation at khanacademy.org/api redirects to their partner inquiry form. The practical implication for your Bolt.new project: do not attempt to build integration code that calls Khan Academy API endpoints — it will not work. Instead, plan your integration around the three active approaches: iframe embeds for video and exercise content, direct URL links to Khan Academy resources, and alternative open education APIs for structured content data.

Since you are building the application layer rather than consuming a live API, your Supabase database becomes the content backbone of your learning portal. Design tables that store the curated Khan Academy resources you want to present to your users. The core table, learning_resources, should have columns for a unique ID, title, subject category, description, the direct Khan Academy URL for linking, the YouTube video ID for embedding (Khan Academy's videos are all on YouTube — you can find the video ID from any Khan Academy video page by clicking Share), difficulty level, estimated completion time, and whether it is an exercise or video. A second table, user_progress, tracks which resources each authenticated user has started or completed. Prompt Bolt to create both tables in Supabase with appropriate Row Level Security policies: learning_resources should be publicly readable (anyone can browse the content library) but only admin-writable, while user_progress should allow users to read and write only their own records. Pre-populate the learning_resources table with real Khan Academy content — you can manually curate this using Khan Academy's topic tree at khanacademy.org/browsable. Bolt can generate a seed SQL file with INSERT statements for the initial content. Having real data in the table lets you see the portal working immediately rather than waiting to manually populate it after the UI is built.

1-- Supabase SQL: Create learning portal tables
2CREATE TABLE learning_resources (
3  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
4  title TEXT NOT NULL,
5  subject TEXT NOT NULL,
6  description TEXT,
7  khanacademy_url TEXT NOT NULL,
8  youtube_video_id TEXT,
9  difficulty TEXT CHECK (difficulty IN ('Beginner', 'Intermediate', 'Advanced')),
10  estimated_minutes INTEGER,
11  content_type TEXT CHECK (content_type IN ('video', 'exercise', 'article'))
12);
13
14ALTER TABLE learning_resources ENABLE ROW LEVEL SECURITY;
15CREATE POLICY "Public read access" ON learning_resources FOR SELECT USING (true);
16
17CREATE TABLE user_progress (
18  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
19  user_id UUID REFERENCES auth.users NOT NULL,
20  resource_id UUID REFERENCES learning_resources NOT NULL,
21  status TEXT CHECK (status IN ('started', 'completed')),
22  completed_at TIMESTAMPTZ,
23  UNIQUE(user_id, resource_id)
24);
25
26ALTER TABLE user_progress ENABLE ROW LEVEL SECURITY;
27CREATE POLICY "User own data" ON user_progress
28  USING (auth.uid() = user_id)
29  WITH CHECK (auth.uid() = user_id);

With the database ready, prompt Bolt to build the portal interface. The main learning page should fetch resources from Supabase and display them as browsable cards grouped by subject. Each card shows the resource title, subject badge, difficulty level, estimated time, a description, and the content type (video or exercise icon). For resources with a youtube_video_id, show a thumbnail image by constructing the YouTube thumbnail URL (https://img.youtube.com/vi/{video_id}/maxresdefault.jpg) — these thumbnail URLs are publicly accessible without any API key. For resources without a video, show a generic exercise icon. Clicking a card should either open a modal with an embedded YouTube player (for video resources) or open the Khan Academy URL in a new tab (for exercises). The modal approach keeps users in your app longer for video content. Include a subject filter sidebar or tabs so users can browse by subject. Add a progress indicator showing how many resources in each subject the logged-in user has completed. The portal page should use ISR-compatible data fetching so it loads fast — Supabase resources rarely change, making them ideal for caching. Bolt generates all of this from a descriptive prompt specifying the Supabase table structure and desired UI components.

1// components/LearningResourceCard.tsx
2import { useState } from 'react';
3
4interface Resource {
5  id: string;
6  title: string;
7  subject: string;
8  description: string;
9  khanacademy_url: string;
10  youtube_video_id: string | null;
11  difficulty: string;
12  estimated_minutes: number;
13  content_type: string;
14}
15
16interface LearningResourceCardProps {
17  resource: Resource;
18  isCompleted: boolean;
19  onMarkComplete: (resourceId: string) => void;
20}
21
22export function LearningResourceCard({ resource, isCompleted, onMarkComplete }: LearningResourceCardProps) {
23  const [showModal, setShowModal] = useState(false);
24
25  const thumbnailUrl = resource.youtube_video_id
26    ? `https://img.youtube.com/vi/${resource.youtube_video_id}/maxresdefault.jpg`
27    : null;
28
29  function handleClick() {
30    if (resource.youtube_video_id) {
31      setShowModal(true);
32    } else {
33      window.open(resource.khanacademy_url, '_blank', 'noopener noreferrer');
34    }
35  }
36
37  return (
38    <>
39      <div
40        onClick={handleClick}
41        className="bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer hover:shadow-md transition-shadow"
42      >
43        {thumbnailUrl && (
44          <img src={thumbnailUrl} alt={resource.title} className="w-full h-40 object-cover" />
45        )}
46        <div className="p-4">
47          <div className="flex items-center justify-between mb-2">
48            <span className="text-xs font-semibold bg-green-100 text-green-700 px-2 py-1 rounded">{resource.subject}</span>
49            {isCompleted && <span className="text-green-500 text-lg">✓</span>}
50          </div>
51          <h3 className="font-semibold text-gray-900 mb-1">{resource.title}</h3>
52          <p className="text-sm text-gray-500 mb-3 line-clamp-2">{resource.description}</p>
53          <div className="flex gap-2 text-xs text-gray-400">
54            <span>{resource.difficulty}</span>
55            <span>·</span>
56            <span>{resource.estimated_minutes} min</span>
57          </div>
58        </div>
59      </div>
60
61      {showModal && resource.youtube_video_id && (
62        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={() => setShowModal(false)}>
63          <div className="bg-white rounded-xl max-w-3xl w-full p-6" onClick={(e) => e.stopPropagation()}>
64            <h2 className="text-xl font-bold mb-4">{resource.title}</h2>
65            <div className="aspect-video mb-4">
66              <iframe
67                src={`https://www.youtube.com/embed/${resource.youtube_video_id}`}
68                className="w-full h-full rounded"
69                allowFullScreen
70                title={resource.title}
71              />
72            </div>
73            <div className="flex justify-between">
74              <a href={resource.khanacademy_url} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline text-sm">
75                Open on Khan Academy →
76              </a>
77              <button
78                onClick={() => { onMarkComplete(resource.id); setShowModal(false); }}
79                className="bg-green-600 text-white px-4 py-2 rounded text-sm"
80              >
81                Mark Complete
82              </button>
83            </div>
84          </div>
85        </div>
86      )}
87    </>
88  );
89}

While Khan Academy's API is gone, the Open Library API (a project of the Internet Archive) provides free, active, and well-documented access to millions of books, subjects, and educational topics. No API key or registration is required. The primary search endpoint is https://openlibrary.org/search.json — pass a q (query) or subject parameter and receive structured JSON with titles, authors, cover image IDs, and subject classifications. Cover images load from https://covers.openlibrary.org/b/id/{cover_id}-M.jpg. This makes Open Library a practical supplement for learning portals: you can offer book recommendations alongside Khan Academy video lessons. For example, after a user finishes a Khan Academy algebra video, your portal can suggest related math books from Open Library. Build an API route in Bolt that proxies Open Library search requests, which avoids CORS issues during development. The Open Library API works from Bolt's WebContainer during development because it is an outbound HTTP call — the WebContainer supports outbound requests to external APIs. You can build and test the complete Open Library integration without deploying. The Wikimedia REST API at en.wikipedia.org/api/rest_v1/page/summary/{topic} is another excellent free source — it returns a page summary and thumbnail image for any topic in Wikipedia, which you can display as a brief subject introduction alongside your curated Khan Academy resources.

1// app/api/search-books/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const { searchParams } = new URL(request.url);
6  const subject = searchParams.get('subject') || 'mathematics';
7
8  const response = await fetch(
9    `https://openlibrary.org/search.json?subject=${encodeURIComponent(subject)}&limit=8&fields=title,author_name,cover_i,first_publish_year,key`,
10    { next: { revalidate: 3600 } }
11  );
12
13  const data = await response.json();
14
15  const books = (data.docs || []).map((book: Record<string, unknown>) => ({
16    title: book.title as string,
17    author: Array.isArray(book.author_name) ? (book.author_name as string[])[0] : 'Unknown',
18    coverUrl: book.cover_i
19      ? `https://covers.openlibrary.org/b/id/${book.cover_i}-M.jpg`
20      : '',
21    publishYear: book.first_publish_year,
22    openLibraryUrl: `https://openlibrary.org${book.key}`,
23  }));
24
25  return NextResponse.json({ books });
26}

Deploying a Khan Academy learning portal is straightforward because the application has no incoming webhook requirements — all data flows are either reads from Supabase or outbound API calls to Open Library and YouTube thumbnail CDNs. During development in Bolt's WebContainer, the complete portal works: Supabase queries execute, Open Library API calls return book data, and YouTube embeds load. The only WebContainer limitation is irrelevant for this integration — there are no incoming webhooks to receive. Push your Bolt project to GitHub and connect it to Netlify or Vercel. Set three environment variables in your hosting dashboard: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, and SUPABASE_SERVICE_ROLE_KEY (for any admin operations). No Khan Academy or YouTube API keys are required since you are using public embed URLs. After deployment, verify the portal loads on the production URL, resources display with thumbnails, YouTube embeds play correctly, and user progress saves to Supabase when a logged-in user marks a resource complete. The Open Library API integration also works on the deployed version without any additional configuration — the API is public and does not require CORS headers for server-side calls.

1// next.config.ts — ensure images from YouTube and Open Library load
2import type { NextConfig } from 'next';
3
4const nextConfig: NextConfig = {
5  images: {
6    remotePatterns: [
7      {
8        protocol: 'https',
9        hostname: 'img.youtube.com',
10      },
11      {
12        protocol: 'https',
13        hostname: 'covers.openlibrary.org',
14      },
15    ],
16  },
17};
18
19export default nextConfig;