How to Integrate Moodle with V0

Before writing any code, you need to configure Moodle to accept API requests. Start by logging into your Moodle site as an administrator. Navigate to Site Administration → Advanced Features and check the box next to 'Enable web services', then save changes. Next, go to Site Administration → Plugins → Web Services → Manage Protocols and enable the REST protocol — this is what your Next.js API routes will use. Now create a service: go to Site Administration → Plugins → Web Services → External Services, click 'Add', give the service a name (e.g., 'V0 Integration'), and check 'Enabled'. After saving, click the service name to add the specific API functions your app needs. Add at minimum: core_course_get_courses, core_enrol_get_enrolled_users, and gradereport_user_get_grade_items. Add more functions as your app requires. Finally, generate a token: go to Site Administration → Plugins → Web Services → Manage Tokens, click 'Add' and select your Moodle user account and the service you just created. The generated token string is what you will store as MOODLE_TOKEN in Vercel. Note your Moodle site's base URL as well — you will need it as MOODLE_URL.

Create the Next.js API route that proxies requests to the Moodle Web Services REST API. Moodle's REST API has an unusual calling convention — all requests go to a single endpoint (your-moodle-url/webservice/rest/server.php) with query parameters specifying the function name, token, and moodlewsrestformat=json. Function-specific parameters are passed as additional query parameters. For example, to get all courses: GET /webservice/rest/server.php?wstoken={token}&wsfunction=core_course_get_courses&moodlewsrestformat=json. For functions that take parameters, append them: &courseids[0]=5&courseids[1]=6. Moodle returns errors as JSON objects with an exception field and message field, even when the HTTP status is 200 — similar to Slack's API. Your error handling must check for the exception field. Common exception types include webservice_access_exception (token invalid or function not allowed), moodle_exception (general Moodle error), and required_capability_exception (user lacks permission for the function). A unified API route that accepts the function name and parameters as a request body and proxies them to Moodle keeps your codebase clean and avoids creating separate routes for every Moodle function. Create the file at app/api/moodle/route.ts.

1// app/api/moodle/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const getMoodleUrl = (wsfunction: string, params: Record<string, string> = {}): string => {
5  const moodleUrl = process.env.MOODLE_URL;
6  const token = process.env.MOODLE_TOKEN;
7
8  const searchParams = new URLSearchParams({
9    wstoken: token || '',
10    wsfunction,
11    moodlewsrestformat: 'json',
12    ...params,
13  });
14
15  return `${moodleUrl}/webservice/rest/server.php?${searchParams.toString()}`;
16};
17
18// Generic Moodle API caller
19async function callMoodle<T>(
20  wsfunction: string,
21  params: Record<string, string> = {}
22): Promise<T> {
23  const url = getMoodleUrl(wsfunction, params);
24  const response = await fetch(url);
25
26  if (!response.ok) {
27    throw new Error(`Moodle HTTP error: ${response.status}`);
28  }
29
30  const data = await response.json();
31
32  // Moodle returns errors in the body even with HTTP 200
33  if (data.exception) {
34    throw new Error(`Moodle API error: ${data.message || data.exception}`);
35  }
36
37  return data as T;
38}
39
40// GET /api/moodle?action=courses
41// GET /api/moodle?action=course_students&courseId=5
42// GET /api/moodle?action=grades&courseId=5&userId=3
43export async function GET(request: NextRequest) {
44  const moodleUrl = process.env.MOODLE_URL;
45  const token = process.env.MOODLE_TOKEN;
46
47  if (!moodleUrl || !token) {
48    return NextResponse.json(
49      { error: 'Moodle is not configured — set MOODLE_URL and MOODLE_TOKEN' },
50      { status: 500 }
51    );
52  }
53
54  const { searchParams } = new URL(request.url);
55  const action = searchParams.get('action');
56
57  try {
58    switch (action) {
59      case 'courses': {
60        // Get all visible courses
61        const courses = await callMoodle<object[]>('core_course_get_courses');
62        // Filter to only return useful fields
63        const filtered = Array.isArray(courses)
64          ? courses
65              .filter((c: any) => c.visible === 1)
66              .map((c: any) => ({
67                id: c.id,
68                fullname: c.fullname,
69                shortname: c.shortname,
70                summary: c.summary,
71                categoryname: c.categoryname,
72                enrolledusercount: c.enrolledusercount,
73              }))
74          : [];
75        return NextResponse.json({ courses: filtered });
76      }
77
78      case 'course_students': {
79        const courseId = searchParams.get('courseId');
80        if (!courseId) {
81          return NextResponse.json({ error: 'courseId is required' }, { status: 400 });
82        }
83        const students = await callMoodle<object[]>(
84          'core_enrol_get_enrolled_users',
85          { courseid: courseId }
86        );
87        return NextResponse.json({ students });
88      }
89
90      case 'grades': {
91        const courseId = searchParams.get('courseId');
92        const userId = searchParams.get('userId');
93        if (!courseId || !userId) {
94          return NextResponse.json(
95            { error: 'courseId and userId are required' },
96            { status: 400 }
97          );
98        }
99        const grades = await callMoodle<object>(
100          'gradereport_user_get_grade_items',
101          { courseid: courseId, userid: userId }
102        );
103        return NextResponse.json({ grades });
104      }
105
106      default:
107        return NextResponse.json(
108          { error: `Unknown action: ${action}. Valid: courses, course_students, grades` },
109          { status: 400 }
110        );
111    }
112  } catch (error) {
113    const message = error instanceof Error ? error.message : 'Unknown error';
114    console.error('Moodle API error:', message);
115    return NextResponse.json({ error: message }, { status: 500 });
116  }
117}

With the API routes working, use V0 to generate the student-facing and instructor-facing interfaces that consume this data. Describe the specific learning dashboard layout you want — course cards with progress bars, grade tables, enrollment status, and any other learning data your institution needs. Be specific with V0 about the data shape returned by your API routes: each course has an id, fullname, shortname, summary, categoryname, and enrolledusercount. Grade data comes back as an array of grade items with itemname, gradeformatted, grademin, and grademax fields. Give V0 the API path (/api/moodle) and query parameter patterns so the generated code calls the right endpoints. For student dashboards, the component needs to know which user's data to load — either pass a userId prop from authentication context or build an email/username lookup flow. V0 handles complex data displays like sortable grade tables and category-filtered course grids well when you describe the layout in detail. After generating the dashboard, use V0's Git panel to push the code to GitHub and trigger a Vercel preview deployment where you can test the live data integration.

Set up the Moodle credentials in Vercel to complete the production deployment. Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add MOODLE_URL set to your Moodle site's base URL (e.g., https://moodle.yourschool.edu — no trailing slash). Add MOODLE_TOKEN set to the service token you generated in step 1. Neither variable should have the NEXT_PUBLIC_ prefix — both are server-only values. For local development, create .env.local with both variables and run npm run dev to test API routes against your real Moodle instance. Set variables for Production, Preview, and Development scopes in Vercel, then save and trigger a redeployment. After deployment, verify the course catalog loads correctly by opening the deployed URL. Common issues at this stage include CORS errors (which should not occur since requests go from Next.js server to Moodle server, not browser to Moodle) and SSL certificate issues if your Moodle instance uses a self-signed certificate in a development environment. For production Moodle installations with a valid SSL certificate, the integration works without additional configuration. If your Moodle instance is behind a firewall, ensure Vercel's outbound request IPs are whitelisted — Vercel publishes its IP range in their documentation.