How to Integrate Bolt.new with Canvas LMS

Before writing any code, you need a Canvas API token. Log in to your Canvas instance and navigate to Account (your avatar, top-left) → Settings. Scroll down to the 'Approved Integrations' section and click 'New Access Token.' Give it a descriptive name like 'Bolt Dashboard Dev' and optionally set an expiry date. Click 'Generate Token' and copy the token immediately — Canvas only shows it once. Also note your institution's Canvas base URL (e.g., https://canvas.university.edu). You will need both values as environment variables. For production applications intended for use by many users, Canvas supports OAuth 2.0 developer keys — your Canvas admin must create a developer key in the admin panel. Personal access tokens are appropriate for internal tools, prototypes, and single-user dashboards. Never commit either the token or the base URL to a public repository; treat the API token with the same care as a database password.

In your Bolt.new project, open the terminal and create a .env file at the project root. Add two variables: CANVAS_API_TOKEN with your token value and CANVAS_BASE_URL with your institution's Canvas domain. In Next.js, server-side environment variables without a NEXT_PUBLIC_ prefix are never bundled into client code — this is exactly what you want for API credentials. Once the .env file is saved, use Bolt's AI chat to generate the API route and frontend components. The AI will read your project structure and generate code that references process.env.CANVAS_API_TOKEN automatically. After you paste the prompt, Bolt will create the API route file and the frontend page. Review the generated code to confirm the token is only accessed in the API route, never in any client component file. If you see process.env.CANVAS_API_TOKEN in a file under the app/ directory that is not inside app/api/, ask Bolt to move that logic to the API route.

1# .env file — add to project root, never commit to git
2CANVAS_API_TOKEN=your_canvas_token_here
3CANVAS_BASE_URL=https://yourschool.instructure.com

Bolt's generated API route should handle authentication, make the Canvas API request, and return data to the frontend. Open app/api/canvas/courses/route.ts and verify the structure. Key things to check: the Authorization header uses 'Bearer' followed by the token (not 'Token' — Canvas accepts both but Bearer is more standard); the URL correctly combines CANVAS_BASE_URL with the API path; and error responses from Canvas are forwarded to the client with appropriate HTTP status codes. Canvas's API returns paginated results using Link headers in the response — a common oversight in AI-generated code is fetching only the first page of results. If your institution has more than 10 courses, you need pagination logic. The code below shows a production-ready API route with pagination support. Canvas also rate-limits API calls; for high-frequency polling apps, implement caching using Next.js's built-in fetch caching with a revalidate interval. The WebContainer preview will successfully make outbound calls to Canvas's servers, so you can verify the integration works before deploying.

1// app/api/canvas/courses/route.ts
2import { NextResponse } from 'next/server';
3
4interface CanvasCourse {
5  id: number;
6  name: string;
7  course_code: string;
8  enrollment_term_id: number;
9  workflow_state: string;
10}
11
12async function fetchAllPages<T>(url: string, token: string): Promise<T[]> {
13  const results: T[] = [];
14  let nextUrl: string | null = url;
15
16  while (nextUrl) {
17    const response = await fetch(nextUrl, {
18      headers: {
19        Authorization: `Bearer ${token}`,
20        'Content-Type': 'application/json',
21      },
22    });
23
24    if (!response.ok) {
25      throw new Error(`Canvas API error: ${response.status} ${response.statusText}`);
26    }
27
28    const data: T[] = await response.json();
29    results.push(...data);
30
31    // Parse the Link header for pagination
32    const linkHeader = response.headers.get('Link');
33    nextUrl = null;
34    if (linkHeader) {
35      const match = linkHeader.match(/<([^>]+)>;\s*rel="next"/);
36      if (match) nextUrl = match[1];
37    }
38  }
39
40  return results;
41}
42
43export async function GET() {
44  const token = process.env.CANVAS_API_TOKEN;
45  const baseUrl = process.env.CANVAS_BASE_URL;
46
47  if (!token || !baseUrl) {
48    return NextResponse.json(
49      { error: 'Canvas credentials not configured' },
50      { status: 500 }
51    );
52  }
53
54  try {
55    const courses = await fetchAllPages<CanvasCourse>(
56      `${baseUrl}/api/v1/courses?enrollment_state=active&per_page=50`,
57      token
58    );
59
60    return NextResponse.json({ courses });
61  } catch (error) {
62    const message = error instanceof Error ? error.message : 'Unknown error';
63    return NextResponse.json({ error: message }, { status: 500 });
64  }
65}

With a working API route, prompt Bolt to build a polished React dashboard that consumes it. The frontend page fetches from /api/canvas/courses using the native fetch API inside a useEffect hook or a library like SWR for automatic revalidation. Canvas courses include useful metadata: the name, course_code, current_grade and current_score if the user is enrolled as a student, and the number of students if the user is an instructor. Design the dashboard to show the most actionable information first. For a student view, upcoming assignment due dates pulled from /api/v1/courses/:id/assignments are more useful than raw grade numbers. For an instructor view, submission counts and ungraded work counts drive daily workflow. You can add multiple API routes — one for courses, one for assignments, one for announcements — and compose them in a tabbed layout on the frontend. Bolt's AI is excellent at generating Tailwind CSS layouts; describe the card design, grid structure, and color scheme you want and it will produce clean markup. Keep each component file under 300 lines to stay well within Bolt's context window limits and avoid AI confusion during subsequent edits.

1// app/canvas/page.tsx
2'use client';
3
4import { useEffect, useState } from 'react';
5
6interface Course {
7  id: number;
8  name: string;
9  course_code: string;
10  workflow_state: string;
11}
12
13export default function CanvasDashboard() {
14  const [courses, setCourses] = useState<Course[]>([]);
15  const [loading, setLoading] = useState(true);
16  const [error, setError] = useState<string | null>(null);
17
18  useEffect(() => {
19    fetch('/api/canvas/courses')
20      .then((res) => res.json())
21      .then((data) => {
22        if (data.error) throw new Error(data.error);
23        setCourses(data.courses);
24      })
25      .catch((err) => setError(err.message))
26      .finally(() => setLoading(false));
27  }, []);
28
29  if (loading) return <div className="p-8 text-center">Loading your courses...</div>;
30  if (error) return <div className="p-8 text-red-600">Error: {error}</div>;
31
32  return (
33    <div className="max-w-5xl mx-auto p-8">
34      <h1 className="text-3xl font-bold text-gray-900 mb-6">My Courses</h1>
35      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
36        {courses.map((course) => (
37          <div key={course.id} className="bg-white rounded-lg shadow p-5 border border-gray-100 hover:shadow-md transition-shadow">
38            <div className="text-xs font-mono text-blue-600 mb-1">{course.course_code}</div>
39            <h2 className="text-base font-semibold text-gray-800">{course.name}</h2>
40          </div>
41        ))}
42      </div>
43    </div>
44  );
45}

The Bolt.new WebContainer successfully makes outbound calls to Canvas, so your read-only dashboard works in preview. However, if you plan to use Canvas Live Events (webhooks for submission notifications) or if you want to share the dashboard with other users, you need a deployed URL. Connect your Bolt project to Netlify through Settings → Applications → Netlify → Connect. Bolt will build the Next.js project and deploy it to a *.netlify.app domain. Once deployed, navigate to the Netlify dashboard for your site, go to Site Configuration → Environment Variables, and add CANVAS_API_TOKEN and CANVAS_BASE_URL with your production values. Click 'Deploy site' in Netlify to trigger a fresh build with the new environment variables. Critical WebContainer note: Canvas Live Events webhooks cannot reach the Bolt preview URL because WebContainers do not accept incoming HTTP connections. The Live Events feature — which notifies your app when assignments are submitted, grades are posted, or course enrollments change — only works once you have a stable, publicly accessible URL from your Netlify deployment. Register your Netlify URL in Canvas Admin → Developer Keys → Live Events to enable real-time notifications.

1// app/api/canvas/webhook/route.ts
2import { NextResponse } from 'next/server';
3
4interface CanvasLiveEvent {
5  metadata: {
6    event_name: string;
7    event_time: string;
8    context_type: string;
9    context_id: string;
10  };
11  body: Record<string, unknown>;
12}
13
14export async function POST(request: Request) {
15  // Verify the webhook secret from Canvas
16  const authHeader = request.headers.get('Authorization');
17  const expectedSecret = process.env.CANVAS_WEBHOOK_SECRET;
18
19  if (!expectedSecret || authHeader !== `Bearer ${expectedSecret}`) {
20    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
21  }
22
23  const event: CanvasLiveEvent = await request.json();
24  const eventName = event.metadata?.event_name;
25
26  console.log(`Canvas Live Event received: ${eventName}`, {
27    context_type: event.metadata?.context_type,
28    context_id: event.metadata?.context_id,
29    event_time: event.metadata?.event_time,
30  });
31
32  switch (eventName) {
33    case 'submission_created':
34    case 'submission_updated':
35      // Process new or updated submission
36      console.log('Submission event:', event.body);
37      break;
38    case 'grade_change':
39      // Process grade change
40      console.log('Grade change event:', event.body);
41      break;
42    default:
43      console.log('Unhandled event type:', eventName);
44  }
45
46  // Always return 200 quickly — Canvas retries on non-2xx responses
47  return NextResponse.json({ received: true });
48}