How to Build Your Own NCEA-Aligned AI Tutor (For Free!)

So I just spent the last 20 mins making my own web app! (well AI did….) I wanted to create an interactive writing tutor to help one of my students practice the skills he needs to complete the Level 2 Writing standard and gain UE Literacy. Here’s the workflow:

1. Add all the related NZQA Docs into a NotebookLM (Standard, Exemplars, Clarifications)
2. Ask NotebookLM to create a detailed knowledge base to be used for an interactive writing tutor.
3. Switch to Gemini and use this knowledge base and the Canvas tool to create a web app that is hosted by the free to use Sandbox.io (full, detailed instructions generated by AI below – it does get a bit complicated with Apps script, API key and Sandbox but every time I got stuck, I just asked Gemini)

And it works! Feel free to try the tutor out at this link: InkForge Writing Tutor

AI Generated instructions

As teachers, we know the potential of AI, but we also know the pitfalls: generic advice, hallucinated standards, and chatbots that just give students the answers instead of making them think.

Recently, I set out to build InkForge, an interactive AI tutor specifically aligned to the New Zealand NCEA Level 2 English Writing Standard (AS91101). I didn’t just want a chatbot; I wanted a live coach that guides students step-by-step, gamifies their learning, and strictly follows the grading boundaries (Achieved, Merit, Excellence).

The best part? You can build this entirely for free using tools you probably already have access to: Google Sites, Google Apps Script, and CodeSandbox.

Here is the step-by-step guide to building your own secure, embedded AI tutor.

The Architecture: How It Works

Think of this setup like a restaurant:

1. The Dining Room (React App / CodeSandbox): This is the visual chat interface the students see on your Google Site.
2. The Kitchen (Google Apps Script): This is a hidden middleman script living securely in your Google Drive.
3. The Chef (Gemini API): This is the actual AI brain processing the student’s text.

Why the middleman? If we put our secret AI API key right into the website, tech-savvy students could steal it and use up our quota. By using Google Apps Script as a middleman, the students only ever talk to your Google Drive, keeping your API key 100% hidden and secure!

Step 1: Get Your Free AI Brain (Gemini API Key)

1. Go to Google AI Studio.
2. Sign in with your Google account.
3. Click “Get API key” on the left menu and create a new key.
4. Copy that long string of letters and numbers and save it somewhere safe.

Step 2: Build the Secure Middleman (Google Apps Script)

1. Go to script.google.com and click New Project.
2. Delete the default code and paste the following:

// 1. Paste your Gemini API key inside the quotes below
const GEMINI_API_KEY = "PASTE_YOUR_API_KEY_HERE";

// 2. This function listens for messages from your React website
function doPost(e) {
  try {
    const requestData = JSON.parse(e.postData.contents);
    const geminiUrl = \`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=\${GEMINI_API_KEY}\`;
    
    const options = {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify(requestData),
      muteHttpExceptions: true
    };

    const response = UrlFetchApp.fetch(geminiUrl, options);

    return ContentService.createTextOutput(response.getContentText())
      .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({ error: error.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

3. Paste your real Gemini API key where it says PASTE_YOUR_API_KEY_HERE.
4. Click the Save (floppy disk) icon.
5. Click Deploy > New deployment. Select Web app (via the gear icon).
6. Crucial Settings:
   • Execute as: Me
   • Who has access: Anyone (or “Anyone within [Your School]” if you are on a school domain).
7. Click Deploy, authorize the permissions, and copy the Web App URL it gives you.

Step 3: Build the Front-End (The Chat Interface)

We need a place to host the visual React code so our Google Site can embed it.

1. Go to CodeSandbox.io and create a free account.
2. Start a new React sandbox.
3. In the Dependencies section on the left, search for and add lucide-react (this gives us our cool icons).
4. Open the public/index.html file. Right under the <head> tag, paste this line to turn on our design system:<script src="https://cdn.tailwindcss.com"></script>

The CSS (styles.css)

In your src folder, open or create styles.css and paste this to make it look premium:

@import url('[https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap](https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap)');

body {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  background-color: #0f172a; 
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.lucide-pen-tool { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5)); }
.prose strong { color: #fbbf24; font-weight: 600; }
.prose em { color: #94a3b8; font-style: italic; }
textarea:focus { outline: none; }

The App Code (App.jsx)

Open your App.jsx (or App.tsx) file. Delete everything and paste your main React code.

(Note: The React code block is quite large, so I’ve hosted the template here: [Insert Link to your CodeSandbox or GitHub gist of the React code]).

The most important part: At the top of that App.jsx file, look for the scriptUrl variable. Paste the Google Apps Script Web App URL you copied in Step 2 here. This links your front-end to your secure middleman!

Step 4: Embed on Your Google Site

1. Wait for your CodeSandbox mini-browser to refresh and show your app.
2. Copy the shareable URL address at the top of that CodeSandbox preview pane (it looks like https://xxxxxx.csb.app).
3. Open your Google Site in edit mode.
4. Click Embed -> By URL, and paste that link.
5. Resize the box to fill the screen, hit Publish, and you’re done!

Your students now have a completely custom, standard-aligned AI tutor embedded right in your class website.