Build a tool for FirstLine

Publish a page from Claude

Fastest. FirstLine staff signed in to Claude.

Example: A weekly homework page or a one-page explainer. Write the content in a Doc first, with nothing about an individual student in it.

1. In Claude: "Turn this into a single mobile-friendly HTML page. FirstLine colors: navy #002F60, orange #E47727. Font: Open Sans." Paste your content.
2. The page appears in the panel on the right. Use Preview to see it. Ask for changes in the chat; each one updates the same page.
3. At the top of that panel click Share → Publish. Copy the link (claude.ai/artifact/…).
4. Who can open it: people signed in to FirstLine’s Claude. Nobody without a Claude account can open it, even with the link, so it is not for families or students. Send the link to one colleague to check it opens for them.
5. To update: keep working in the same chat, then Share → Publish again. The link stays the same.

An interactive checklist that remembers each person’s ticks

Staff. Each viewer’s ticks stay in their own browser.

Example: A weekly team checklist that lives on paper today.

1. Paste the checklist into Claude: "Make an interactive checklist page. Remember each viewer’s ticks in their own browser. FirstLine colors, Open Sans."
2. In Preview: tick three boxes, reload, and confirm they stayed ticked.
3. Share → Publish. Copy the link and write down who can open it once you have tested.
4. Ticks live in each person’s browser. They do not follow someone to another device, and nobody else sees them.

A small tool with shared entries

A sign-up or simple shared tracker for staff.

Example: A sign-up sheet for PD sessions, or a shared list of who is covering which duty.

1. Ask Claude for a page whose entries are shared across everyone who opens it. This uses a page capability for shared data that FirstLine’s Claude administrator enables.
2. Publish, share it with the staff who need it, and write down who can see and who can edit.
3. Not for student information, and not for anything that sends email.

Ask questions of FirstLine’s data: the BQ Project

Ask in plain English; see only your own students.

Example: "Which of my students missed more than three days this month?" answered from the real attendance data.

1. In claude.ai, open Projects, then the Organization tab, and choose BigQuery Student Data. It is shared with all of FirstLine, so nobody has to add you.
2. In the Project, when it asks you to connect BigQuery, sign in with your own FirstLine Google account. The connection knows who you are, and the data only returns the students you are allowed to see: your school, or several schools if you lead more than one.
3. If it asks which project ID to use, the answer is fls-teacher-data.
4. Ask in plain English. Never paste student data into the chat; the connection is the only door.
5. An empty answer usually means "not one of your students", not missing data.

Pull FirstLine data into a Sheet, then publish it

A school’s live tracker, refreshed by a person through Claude.

Example: A real FirstLine tool: one school’s 3rd and 4th grade mastery tracker. Data comes from the BQ Project and a few other sources into a Sheet, with Claude helping automate the pull. An Apps Script web app turns the Sheet into a page with tabs, filters and a support status for each student.

1. Pull the data you need through the BQ Project into a Sheet, with Claude doing the work.
2. Publish the Sheet as a page with an Apps Script web app: the Google page, "A Sheet as a live web page".
3. Set who can see it before anyone opens it. A page with student names and scores must open only for the staff who work with those students. Use Execute as: User accessing the web app and share the Sheet only with those staff. Execute as: Me plus Anyone within FirstLine Schools shows every student to every FirstLine account.
4. Someone has to refresh it. When it should update with nobody pulling the data, or other schools want the same page, it has outgrown this route: Move an Apps Script tool to code.

A public page: Google Sites

Families. Anyone with the link.

Example: The homework page: a weekly page families open on a phone. Write it in a Doc first: week, reading, math, a note home, links. Remove anything about an individual student.

1. Open sites.google.com/new signed in with your FirstLine account. Choose Blank site.
2. Paste the content section by section. Themes → custom: primary color #002F60, accent #E47727, font Open Sans, the logo from the branding guide.
3. Publish (top right). Web address: something short like grade5-homework. The site lives at sites.google.com/firstlineschools.org/grade5-homework.
4. Who can view my site → Manage. For families, set the published site to Anyone. Leave the draft restricted to you and any co-editor.
5. Open the link in a private browser window to see exactly what a parent sees.
6. To update: edit, then Publish again. The address never changes.

A page only some people can open

FirstLine accounts, one school, or a named team.

Example: A weekly team checklist: publish it restricted to your team, and confirm someone outside the team is refused.

1. Google Sites, restricted. Build the page as above, then Publish → Who can view my site → Manage.
2. Whole network: under the published site choose Restricted, then Anyone at FirstLine Schools with the link. A named team or one school: keep Restricted and add each address, or a Google Group, as a published viewer.
3. Test it: open the link in a private window with no FirstLine sign-in. You should get a request-access screen.
4. Or an Apps Script web app, when you want your own design. In any Sheet: Extensions → Apps Script. Replace Code.gs with the code below. File → New → HTML, name it Index, and paste the page Claude made you.
   Code.gsCopy

   function doGet() {
     return HtmlService.createHtmlOutputFromFile('Index')
       .setTitle('Team checklist')
       .addMetaTag('viewport', 'width=device-width, initial-scale=1');
   }

5. Deploy → New deployment → gear icon → Web app. Execute as: User accessing the web app, so the page runs with each viewer’s own permissions. Who has access: Anyone within FirstLine Schools. Deploy, authorize, and copy the URL ending in /exec.
6. Later changes: Deploy → Manage deployments → pencil → Version: New version → Deploy. The /exec URL stays the same.

A Sheet as a live web page

The page shows the current Sheet every time it opens.

Example: A duty schedule or club roster your team keeps in a Sheet becomes a page. It is the same route the school mastery tracker uses, with data pulled from the BQ Project.

1. In the Sheet: Extensions → Apps Script. In Code.gs:
   Code.gsCopy

   function doGet() {
     const sheet = SpreadsheetApp.getActive().getSheetByName('Schedule');
     const rows = sheet.getDataRange().getDisplayValues();   // strings, as shown in the Sheet
     const t = HtmlService.createTemplateFromFile('Index');
     t.header = rows[0];
     t.rows = rows.slice(1);
     return t.evaluate().setTitle('Schedule')
       .addMetaTag('viewport', 'width=device-width, initial-scale=1');
   }

2. File → New → HTML, name it Index. Ask Claude for a mobile-friendly table in FirstLine colors that uses these lines:
   Index.htmlCopy

   <table>
     <tr><? for (const h of header) { ?><th><?= h ?></th><? } ?></tr>
     <? for (const r of rows) { ?>
       <tr><? for (const c of r) { ?><td><?= c ?></td><? } ?></tr>
     <? } ?>
   </table>

3. Deploy → New deployment → Web app. Then decide Execute as, which decides who sees what:
4. Execute as: Me. The page reads the Sheet as you, so viewers don’t need access to the Sheet, and every viewer sees the whole tab. Fine for a duty schedule. Not for anything about a student or a staff member unless Who has access is narrowed to match.
5. Execute as: User accessing the web app. The page reads the Sheet as the viewer. Share the Sheet only with the people who should see it, and everyone else is refused. Use this for anything about students. Each viewer approves the script once, on their first visit.
6. Who has access: Anyone within FirstLine Schools, or Anyone only if the tab holds nothing personal. Copy the /exec URL, change a cell, reload: the change shows.
7. Code changes later: Manage deployments → pencil → New version → Deploy.

Charts from a Sheet: Looker Studio

Charts, filters, scheduled refresh.

Example: The same Sheet as a report with a chart and a filter.

1. lookerstudio.google.com → Create → Report.
2. Add data → Google Sheets → pick the spreadsheet and the tab. Tick Use first row as headers. Add.
3. Add a chart → Table. Set Dimension and Metric from the field list. One chart that answers one question.
4. Share → Manage access. Link settings: Restricted, then Anyone at FirstLine Schools with the link can view. For named people, add their addresses.
5. Freshness: Resource → Manage added data sources → Edit → Data freshness. Sheets sources refresh every 15 minutes to 12 hours.
6. Viewers see whatever the source Sheet contains. Looker Studio does not filter by who is looking, so if people should see different slices, this is not the tool.
7. Write the definition of each number under its chart in a text box. That stops the "why is your number different" conversation.

A PD survey that sends each presenter their own results

A form that runs itself every week.

Example: After each PD session, staff answer five questions on a phone. Every Friday at 3, each presenter gets an email with their own average rating and comments from the week, and nobody else’s. It runs in test mode, sending everything to you, for a week first.

1. Write it down first, in a Doc: the questions; whether answers are anonymous or named; who sees the Sheet (the PD lead, not the presenters); and a list of things it must never do: "never sends one presenter’s comments to another", "never sends outside @firstlineschools.org".
2. At forms.google.com → Blank form, add five questions with these exact titles: Session (Dropdown), Presenter (Dropdown), How useful was this session? (Linear scale, 1 to 5), One thing you will use (Paragraph), What would make it better? (Paragraph). Make the first three required.
3. Anonymous or named: Settings → Responses. Turn on Restrict to users in FirstLine Schools and its trusted organizations either way. For anonymous, set Collect email addresses to Do not collect: people still sign in, but their address isn’t recorded. For named, choose Verified. Say which at the top of the form, because people answer differently.
4. Responses → Link to Sheets → Create a new spreadsheet. Leave the Form Responses 1 tab alone.
5. In the Sheet, add a tab named Presenters: column A each presenter’s name exactly as it appears in the Presenter dropdown, column B their FirstLine email. Row 1 is headers.
6. Extensions → Apps Script. Replace Code.gs with this and Save. If you changed a question title, change it in the Q list at the top.
   Code.gsCopy

   // PD survey: every Friday, each presenter gets their own results from the past week.
   // The question titles below must match the Form exactly. Change them here if yours differ.
   const TEST_MODE = true;                         // flip to false only after a week of clean test sends
   const TEST_TO   = Session.getEffectiveUser().getEmail();
   const Q = {
     session:   'Session',
     presenter: 'Presenter',
     rating:    'How useful was this session?',
     use:       'One thing you will use',
     better:    'What would make it better?',
   };
   
   function weeklyPresenterResults() {
     const book = SpreadsheetApp.getActive();
     const all = book.getSheetByName('Form Responses 1').getDataRange().getValues();
     const col = {};
     Object.keys(Q).forEach(k => { col[k] = all[0].indexOf(Q[k]); });
   
     // Presenters tab: column A the name exactly as in the Form's dropdown, column B their email.
     const emails = {};
     book.getSheetByName('Presenters').getDataRange().getValues().slice(1)
       .forEach(r => { if (r[0]) emails[r[0]] = r[1]; });
   
     const since = new Date(Date.now() - 7 * 864e5);
     const byPresenter = {};
     all.slice(1).filter(r => new Date(r[0]) > since).forEach(r => {
       const p = r[col.presenter];
       (byPresenter[p] = byPresenter[p] || []).push(r);
     });
   
     Object.keys(byPresenter).forEach(p => {
       const rows = byPresenter[p];
       const to = TEST_MODE ? TEST_TO : emails[p];
       if (!to) { console.log('no email on the Presenters tab for', p); return; }
       const avg = rows.reduce((s, r) => s + Number(r[col.rating] || 0), 0) / rows.length;
       const sessions = [...new Set(rows.map(r => r[col.session]))].join(', ');
       const list = c => rows.map(r => r[c]).filter(t => t !== '').map(t => '<li>' + esc(t) + '</li>').join('') || '<li>None</li>';
       MailApp.sendEmail({
         to,
         subject: (TEST_MODE ? '[TEST for ' + p + '] ' : '') +
                  'Your PD feedback this week: ' + avg.toFixed(1) + ' / 5 from ' + rows.length + (rows.length === 1 ? ' person' : ' people'),
         htmlBody: '<p>Sessions: ' + esc(sessions) + '</p>' +
                   '<p><b>One thing people will use</b></p><ul>' + list(col.use) + '</ul>' +
                   '<p><b>What would make it better</b></p><ul>' + list(col.better) + '</ul>',
       });
       console.log('sent', p, rows.length);                 // shows in Executions
     });
   }
   
   function esc(t) {
     return String(t).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }

7. Pick weeklyPresenterResults from the function list and click Run. Approve the permissions with your FirstLine account. In test mode, every presenter’s email comes to you, marked [TEST for Name], so you can read exactly what each would get.
8. Triggers (clock icon, left rail) → Add Trigger: function weeklyPresenterResults, Time-driven → Week timer → Every Friday → 3pm to 4pm. Save.
9. Each Friday, open Executions (left rail). Every run is a row with its status and log lines, including any presenter missing from the Presenters tab.
10. After a week of clean test emails, set TEST_MODE = false and save. Triggers pick up saved code at once; there is nothing to redeploy.
11. Off switch: Triggers → the trigger’s menu → Delete trigger. A trigger runs under the account that created it and stops without telling anyone when that person leaves. Hand it over before you go.
12. Presenters never get the Sheet itself. A Sheet has no per-person view, so the email is how each one sees only their own results.
13. To see which sessions land across the whole year, or compare schools, put a chart on it with Looker Studio. Comparing year over year is the point where it belongs on the dedicated back end.

Publish a page with GitHub Pages

Public: anyone with the address, even from a private repository. A real HTML page.

Example: The homework page again, as one HTML file Claude made for you (index.html).

1. At github.com/new: Owner firstline-schools if you have been added, otherwise your own account. Name it, e.g. grade5-homework. Visibility Private or Public: either way, the page itself is public to anyone with the address. Create repository.
2. Add file → Upload files. Drop in index.html. Commit changes.
3. Settings → Pages. Source: Deploy from a branch. Branch: main, folder / (root). Save.
4. Wait about a minute and reload Settings → Pages. The address appears: https://firstline-schools.github.io/grade5-homework/.
5. Small edits right in the browser: open the file, click the pencil icon, change it, Commit changes. About a minute later the page shows it. For bigger changes, upload a new index.html, or use claude.ai/code (see the back end page for how).

Start a tool

Once per tool. You fill in one form; your tool arrives ready to build.

Example: A form staff fill in on a phone, where each school’s leaders see only their own school’s entries, and a monthly count for the network.

1. You: make a free GitHub account at github.com/signup with your FirstLine email, and turn on two-factor authentication when it asks. Once, ever.
2. You: write down, in a Doc, what the tool does, who uses it, and what each person may see. Ask the person who does the work how they do it today before you decide who the tool is for.
3. You: fill in the FirstLine GitHub requests form. Choose Set up a back-end tool, and give your GitHub username, a short name for the tool (lowercase with hyphens, like pd-survey), who uses it, and which FirstLine data it needs.
4. FirstLine’s GitHub admins: add you to FirstLine’s GitHub, make your tool from the starter kit, and connect it to Google Cloud with the data you asked for.
5. You: get two emails. One is a GitHub invitation: click Accept. The other gives your tool’s name and web address. Your tool already works: open the address and you see a blank FirstLine page that already knows who you are.
6. You: open claude.ai/code, choose your tool from the list, paste your Doc and say: "Here is what I want this tool to do. Ask me questions until you understand it, then write it up as the plan. Don’t build anything yet." Claude writes the plan into your tool; read it, and correct anything it got wrong.
7. From here on, every change is the six moves in Make one change.

Keep your own data

Your tool’s own database, instead of a Sheet in someone’s Drive.

Example: A PD survey tool keeps every response; a walkthrough tool keeps each leader’s notes. Because it lives in BigQuery next to FirstLine’s data, you can compare it over time and across schools, and line it up with rosters or scores.

1. Tell Claude what to keep, in plain words: "Each response should keep the session, the presenter, a 1 to 5 rating, and two comments." Claude adds it to your tool’s list of tables. Merge the change as usual.
2. Open your tool and press Create tables. The tool creates them itself, in its own dataset in FirstLine’s tools project. Nobody else has to do anything.
3. Every row records who added it and when, automatically. Nothing is ever deleted; a wrong entry is marked void with a reason.
4. Adding a column later is a new change: tell Claude, merge, press Create tables again.
5. Today a tool’s own data lives in BigQuery, built for comparing over time. Firestore, a database built for records people edit all day, is being tested as a second option. See Where data lives.

Make one change

The same six moves, every time.

1. At claude.ai/code, under the box where you type, choose your repository. Leave the branch on main.
2. Type what you want and press Enter. One change per request.
3. Claude reads the repository (starting with CLAUDE.md), writes the code and its tests, and commits to a new branch. You watch it work.
4. When it finishes you see a line like +42 -18. Click it and read what changed, file by file. You are the reviewer; if something is wrong, say so in the same conversation.
5. Click Create PR and open it as a full pull request.
6. On GitHub, wait for the green tick, then Merge pull request. About two minutes later the change is live. Open the tool and use it.
7. Keep the branch current. Claude’s branch is copied from main when the conversation starts and doesn’t move. If anything has merged since, start your next request with: "Merge the latest main into this branch before you start, and tell me anything that conflicts."

When you get stuck

Everything here you do yourself, in the browser.

1. The tool says its tables are missing: open the tool and press Create tables.
2. You need a real job title or school name: press the lookup buttons on the tool’s setup page and copy the result into your chat.
3. The tool says it needs a permission it can’t give itself: press Copy the request and send it to the person the tool names.
4. The check is red on your pull request: click Details, copy the red lines into your chat and ask for a fix. A red test means the change broke something the tool promised: fix the code, not the test.
5. The deploy is red after a merge: Actions tab → the red run → the failed step → copy the red lines into your chat. The previous version keeps running while you fix it.
6. Claude tells you to run a command: tell it you have no terminal and ask for another way.
7. Four things need an administrator, and the tool names them when it hits one: a password or API key; FirstLine data the tool wasn’t set up to read; making it reachable without a FirstLine sign-in; changing a Cloud Run setting.

Move an Apps Script tool to code

For a tool that works and has outgrown its Sheet.

Example: The school mastery tracker: data pulled through the BQ Project into a Sheet, published with Apps Script. As code, it reads FirstLine’s data directly with nobody pulling it, each school sees only its own students, and every change is recorded.

1. Keep the Apps Script version running. People keep using it until the new one matches it.
2. Start a tool from the starter kit (Start a tool). In the setup request, list everything the Sheet is built from: which FirstLine data (rosters, assessments, attendance) and anything outside the warehouse. The FirstLine data becomes a direct read; the reply says how the rest gets in.
3. Put the Apps Script code in the repository so Claude can read the rules instead of guessing them. In the script editor, open each file (Code.gs, Index.html and the rest), copy it, and on GitHub use Add file → Create new file to save it under apps-script/ with the same name.
4. Write down what the page already does: a screenshot of every tab, each filter, each status and the exact rule that sets it (for example: 75–100% strong, 65–74% approaching, 50–64% partial, 0–49% significant gap), and who may see it (staff at that school).
5. First request in claude.ai/code: "Read the plan and everything in apps-script/. Don’t write code yet. Tell me how you would build this, which data you would read, and every rule you can’t find in either." Answer its questions; it adds your answers to the plan.
6. Build one tab at a time, starting with the Overview, one change per pull request.
7. Check the numbers against the old page. Pick ten students and compare them side by side. Every difference is either a bug or a rule the plan missed; fix the plan or the code, then check again.
8. When they match, send people the new address. Then retire the old page: in the script editor, Deploy → Manage deployments → select it → Archive.

A tool students use

Approval first. This is the only route.

Example: A multiplication game that remembers which facts each student has mastered, picks up where they left off, and shows the teacher who needs help. Not a Claude page (students have no Claude accounts), not a Sheet in your Drive, not an outside service.

1. Write five decisions in a Doc: what it is for; what it remembers; what it never collects (name, photo, free text about a child); how it knows which student it is (their FirstLine school account, or an anonymous code the teacher holds); who sees what; when data is deleted.
2. Take the Doc to your supervisor and the academic lead for the subject. The answer is yes, no, or a smaller yes.
3. Start the tool as above, saying in the setup request that students will use it.
4. Build the smallest playable version first, one change at a time.
5. Pilot with one class, teacher in the room. Check it against the plan, and ask a second AI to attack it against that list. Save what it finds.
6. Sign-off before any other class uses it (see Before people use it).