Skip to main content

How to build your own custom app with Claude

Learn how to build your first Teachfloor App using Claude, the Teachfloor SDK, and CLI, without writing code. This step-by-step guide walks you from idea to a fully working app in about an hour.

Written by Filippo Schiano di Pepe

You don't need to be a developer to build a custom app for your academy. With an AI coding assistant doing the coding for you, you describe the app you want in plain English, watch it appear live in your dashboard, and refine it by simply asking for changes. This guide walks you through the exact process, from a blank folder to a working app, in about an hour.
​

To be transparent: any AI coding assistant works: Claude Code, Cursor, OpenAI Codex and others can all build Teachfloor apps.
​
What matters is giving the assistant the Teachfloor documentation, so it knows how to use our CLI and how to structure the app (the ready-made prompt in Step 3 does exactly that). For this guide, we'll use Claude as our example it's the tool we build our own apps with. If you use a different assistant, the steps are identical.
​

This is the same process we use internally: apps like lesson feedback surveys, NPS, comment threads, polls and idea boards were all built this way by describing them, not by coding them.
​

What you can build

Teachfloor apps are small tools that appear inside your dashboard on the pages you choose: a lesson, a module, the course overview. They can render in two ways: in a side panel (the "drawer") that opens on demand, or as a widget, a card that's always visible in the dashboard, perfect for progress panels or live counters. They can also show different things to different people ,for example, a feedback form to learners and a results dashboard to admins. Some ideas that work really well:

  • A lesson feedback widget (emoji rating + comment, with a satisfaction score for admins)

  • An NPS survey with automatic promoter/detractor scoring

  • Discussion threads or Q&A on each lesson

  • Polls and quizzes configured by admins

  • An idea board where learners post and upvote suggestions

What you'll need

  • A Teachfloor account with admin access to your academy (ideally a test academy, so you can experiment freely)

  • A course with at least one lesson in it (so your app has a page to appear on)

  • Claude Code — Claude's app for building software. It's available as a desktop app for Mac and Windows, or in the terminal (claude.com/claude-code). You'll need a Claude subscription that includes it.

  • Node.js 18 or newer — a free tool that runs the app on your computer while you build it. Download it at nodejs.org. Don't worry about what it does; Claude will use it, not you.

Step 1: Set up your tools (one time only)

Open Claude Code and, in your own words, ask it to set things up. For example:
​

""I want to build a Teachfloor app. Please check that Node.js is installed (install it if not), install the Teachfloor CLI, and log me in.""
​

Claude will run the installation for you. When it runs teachfloor login, your browser will open, click Accept, and you're connected to your academy. That's it.
​

If you prefer to do this part yourself, these are the three commands Claude will use:

npm install -g @teachfloor/teachfloor-cli teachfloor login teachfloor whoami

The last one simply confirms which account and organization you're connected to.
​

Step 2: Describe your app before building it

This is the most valuable ten minutes of the whole process. Before any code exists, write down (or discuss with Claude):

  1. What problem does the app solve? One sentence.

  2. Who uses it? Learners, admins, or both?

  3. What does each role see? A very common pattern: learners see a simple form, admins see the collected results. Same page, different view.

  4. Where should it appear? On every lesson page? On the course page? Everywhere?

  5. What can wait? Keep version 1 small. Filters, exports and extras can come later.

Tip: Claude is a great product-thinking partner. Describe your idea and ask "what would you suggest for version 1?" before you start building.
​

Step 3: Give Claude its instructions

Copy the prompt below, fill in the last paragraph with your own app idea, and paste the whole thing into Claude Code. It teaches Claude the Teachfloor-specific rules so it builds things right the first time.
​

I want to build a Teachfloor app. Follow these rules:  SETUP - Create the app with `teachfloor apps create <name>` and add views with   `teachfloor apps add view`. Docs: https://docs.teachfloor.com/docs/apps - Immediately after creating, run `npm install @teachfloor/extension-kit@latest`   (the scaffold may install an outdated version). - The manifest is teachfloor-app.json: it lists views (viewport + component)   and permissions (each with a user-facing "purpose"). You can edit it by hand.   After changing it, restart `teachfloor apps start`.  BUILDING THE UI - Use components from @teachfloor/extension-kit (Container, Group, Text,   Button, TextInput, Select, Switch, Badge, Tabs, BarChart...). - Read page context with useExtensionContext(): userContext.role tells you   who's looking ("admin" for admins; treat non-admins as learners), and   environment.path contains the course/module/element IDs (parse with regex). - Role-based render: admins see results/management, learners see the input UI. - Colors: never hardcode accent/background/border/text colors. Read them from   the `theme` object returned by useExtensionContext() (it carries the   customer's brand color and light/dark mode) and compute them inside the   component. Keep semantic colors (green = good, red = bad) fixed. - Do not auto-open the drawer on page load. Only close it when leaving.  DATA - Storage types: 'appdata' (shared across the whole organization) and   'userdata'/collections (private per user — NOT readable by admins). - If admins must see everyone's submissions, store them in appdata:   one key per page (e.g. feedback_<elementId>) holding { userId: entry }. - Use store()/retrieve() from the extension kit. Add appdata_read and   appdata_write permissions to the manifest, plus user_read.  WORKFLOW - `teachfloor apps start` uploads the manifest, opens the install page in my   browser, and runs a live-reload dev server on port 3000 (make sure port   3000 is free). Leave it running while we iterate. - When I'm happy: bump the version in the manifest and run   `teachfloor apps upload`. - Explain what you're doing in simple, non-technical language, and ask me to   confirm product decisions before building them.  MY APP Here's what I want to build: [describe your app: what it does, who sees what, and which pages it should appear on]

Step 4: Build it together

Now the fun part. Claude will create the app and run teachfloor apps start. Your browser opens on an installation page, click Install, then navigate to the page where your app lives (for example, open a lesson). You'll find your app's icon in the side panel.
​

From here, building is a conversation. Keep the preview open and ask for changes in plain English:

  • "Make the question editable by admins in a settings screen"

  • "Show a percentage score above the comments"

  • "Learners should be able to change their answer after submitting"

Every change appears in your dashboard within seconds — no reloading, no re-installing. If something looks wrong, describe what you see and Claude will fix it.
​

Step 5: Test it as a learner

You've been looking at the admin view. Before publishing, check the other side:

  1. Invite a test learner account to your course (or ask a colleague).

  2. Open the same page as the learner and try the full flow: submit, edit, resubmit.

  3. Go back to your admin account and confirm the results show up correctly.

Step 6: Publish it

When you're happy with the app, tell Claude to publish. It will bump the version number and run:

teachfloor apps upload

Your app now runs on Teachfloor's servers, you can close your computer and it keeps working for everyone in your academy. By default apps are private (only your organization can install them). If you'd like to offer yours to every Teachfloor customer, ask Claude to set distribution to public and submit it for marketplace review.
​

To update the app later, just reopen Claude Code in the app's folder, ask for the change, test with teachfloor apps start, and upload a new version.


If something goes wrong

  • The app doesn't load in the dashboard while building. Something else on your computer is using port 3000. Ask Claude: "free up port 3000 and restart the dev server."

  • A command fails with a generic error. Your login probably expired. Run teachfloor login again (one click in the browser) and retry.

  • Installing the app fails. Your plan has a limit on installed apps. Uninstall one you're not using from Settings → Apps, then try again.

  • Colors look wrong in dark mode. Tell Claude: "read all colors from the theme context instead of hardcoding them, and update the extension kit to the latest version."

Going further

Once your first app works, there's more to explore, just ask Claude for it:

  • A settings screen where admins configure the app without touching code

  • Widgets — always-visible dashboard cards, instead of the on-demand side panel

  • Realtime updates — learners see each other's votes and comments appear live

  • AI features — apps can generate text using Teachfloor's built-in AI permission

Some advanced capabilities (sending emails, syncing with external systems via webhooks and OAuth) require a developer and a backend server — a good moment to involve your technical team, with your working app as the starting point.
​

Happy building! If you create something your learners love, we'd love to hear about it at [email protected].

Did this answer your question?