How do I demo an AI app without a live API key?

An app that calls Gemini, OpenAI or Claude needs a key, and a key in a demo is a key given away. How to make its AI answer from samples, so a client can try it safely.

On this page

By Kaz Kato · Published 20 October 2026 · Updated 20 October 2026

Record good answers to the questions your demo will be asked, and have the app play them back instead of calling the model. A key in a demo’s browser code is a key every viewer can read, and on Roomi a container demo has no internet at all. Canned answers keep it safe, quick and the same for everyone.

This guide is for a demo whose whole point is its AI: a chatbot, an assistant, a summariser. It covers why the real call has to go, what a canned answer looks like, how to swap one in, and what to tell the client. Using mock data in an AI-built demo covers the rest of the app’s data, and container demos the rules a demo with a server keeps to.

Why can’t the demo call the model for real?

Four reasons. A key in the browser is published to every viewer, and Roomi’s secret scan stops a deploy that holds one. Every question runs on your account, wherever the key lives. A model rarely answers the same way twice, so a tour step built on one answer can let a viewer down. And a container demo has no internet.

  • The key would be published. Vite builds any setting whose name starts with VITE_ into the code it sends to the browser. It says those settings should never hold a secret, such as an API key. The rehearsal scans the project and the built files for secrets, and stops at any finding (the secret scan).
  • Every question is on your account. Google’s AI Studio is one example. An app built in Google AI Studio is private by default. People you share it with can see its code and make their own copy, and with edit permission change it; their API calls count toward your usage limits. A Claude artifact works the other way round. An artifact that calls Claude costs its maker nothing. Each person using it signs in with their own Claude account, and their use counts against their own plan.
  • The answers change. A tour step that says “look at the summary it wrote” needs that summary to be there, the same, for every viewer.
  • A container has no internet. A demo’s container on Roomi cannot reach the internet, so a call to a model from its server fails in the room.
Way to show the AI A key in the demo? Whose account each question runs on Same answer for every viewer? Runs in a Roomi room?
Call the model from the browser Yes, readable by every viewer Yours No No: the secret scan stops a build with a key in it
Call the model from your own server On the server Yours No No: a container demo has no internet
Share it from Google AI Studio Kept on Google’s server side Yours No Not a room: it is shared inside AI Studio
Canned answers in a room (ours) None Nobody’s Yes Yes

The AI Studio row is from Google’s own page. Google AI Studio keeps a web app’s Gemini API key as a secret on its server side, so it never reaches the code that runs in the browser.

What does a canned answer look like?

A short file of questions and answers, which the app reads instead of calling the model. Each answer is matched to a tour step or to a few keywords, and one fallback answer catches everything else. The fallback says plainly that this is a demo, and offers to run it live on a call.

Something like this, for an assistant built for an accountancy firm:

[
  {
    "match": ["overdue", "late", "chase"],
    "answer": "Four invoices are overdue, the oldest by 41 days: Fernhollow Joinery, £2,340. Want me to draft a reminder?"
  },
  {
    "match": ["summarise", "summary", "this client"],
    "answer": "Fernhollow Joinery has paid 11 of its last 12 invoices on time. Its spend is up on last year, mostly on payroll."
  },
  {
    "match": [],
    "answer": "This is a demo, so it answers a few sample questions. On a call, we can run it on your own."
  }
]

Every name and figure in it is invented. The shape is only an example: nothing in Roomi reads this file, your app does. If the real app streams its answer word by word, the sample can too. Ask for it to be played out a few words at a time, so it feels like the real thing.

How do I swap the model call for samples?

Find the one place the app calls the model, and replace it with a lookup in the samples file. Keep the real call for your own development, with no key in what you deploy. In a static demo the lookup runs in the browser; in a container demo, the server answers from the file.

  1. Find the call. It is usually one function or one route. Search for the model’s name, or ask your agent where the app calls it.
  2. Replace it with a lookup. The function takes the question, finds the closest match in the samples file, and returns its answer. With no match, it returns the fallback.
  3. Or leave the app’s code alone. Mock Service Worker is a library that answers an app’s network requests with mock responses, in the browser and in Node.js. Its docs name a live demo among its uses. A handler for the model’s address answers from the samples file instead.
  4. Take the key out. No .env file in the folder you deploy, and no setting the bundler will copy into the browser code. If a key was ever in a file you sent anyone, rotate it.
  5. Rehearse. On its own, roomi deploy is a rehearsal. It scans the project and the build for secrets, checks the tour’s steps, and shows what would go live. Nothing is published until you add --commit (the command line).

Ask your AI agent to do it

You do not need to write the lookup yourself. Ask the agent that built the app:

Make a demo version of this app that never calls the AI model. Replace every model call with answers from a file called demo-data/samples.json: one entry per tour step, matched by keywords, and one fallback answer that says this is a demo and offers a call. Remove the API key from the build. Nothing should reach the internet.

Read every answer it writes before you deploy. The client will read them as your product’s answers, so each one should be one you would be happy to stand behind.

Which questions should it be ready for?

The tour’s steps first, because the tour is what tells a viewer what to ask. Then the three to five questions a buyer in that trade always asks. Then the fallback, for everything else. A demo that answers a dozen questions well says more about the product than one that tries to answer anything.

  1. The tour’s steps. Each step that shows the AI asks one question and gets one good answer. The demo tour script template has a tour to start from.
  2. The trade’s questions. For an accountant: what is overdue, which client is at risk, what changed this month. Ask the client’s own team, if you can, what they would type first.
  3. The fallback. It turns a question the demo cannot answer into a next step: a call, run on their own questions.

What should the client be told?

That the answers are samples. Every room already says the demo runs on mock data. Say it again in the tour, where the AI first answers: these are sample answers, and on a call you will run it on their own questions. A client who knows that judges the product, not the sample.

The room’s own notice reads: “This demo runs on mock data. Nothing you do here reaches a real system.” A tour step can add the rest in your words. How to present a prototype to stakeholders covers the walk-through itself.

Does it work in a room?

Yes, as a static demo or a container demo. A front end that answers from a file in the browser is a static demo, which runs on every plan. An app whose server answers is a container demo, on Pro and above. On Pro, each person gets their own link, and you see their visits.

  • Static. The samples file is one more file in the build (static demos).
  • Container. The server reads the samples file from the image, and each private link gets its own copy of the demo.
  • Built in Gemini. A canvas has its own sharing rules. Who can see a shared Gemini canvas? covers them.

Swap the model for samples, rehearse it, and send each client their own link to try it.

Questions people ask

Will the client know the answers are canned?

Every room says the demo runs on mock data. Say it in the tour as well, and offer to run it live on their own questions during a call.

Can I show it live on a call instead?

Yes. Run it on your own machine, with your own key, and share your screen. Send the room to the rest of the people deciding, so they can try it later without you.

Who writes the canned answers?

You, or the AI agent you built the app with. Ask it to draft them from the tour’s steps, then read every one before you deploy: the client reads them as your product.

Sources

About the author

Kaz Kato, Co-founder & CTO, Roomi. Kaz co-founded Roomi with Tesh, whom he has built with since 2017: two startups that failed, one venture studio that didn’t, and an exit. More at katosan.co.uk.

Let them try the AI, with no key to leak.

Deploy it free as a static demo; a server and private links start on Pro.

Get started freeSee pricing