← Vibe Coding: Build Your First App with AI

Putting your app online

Your app is a file you can send to anyone. Here is what it takes to give it a link instead, and how to turn the AI part back on without putting your key in the page.

The app you made in the workshop is a file, or a small folder, that opens when you double-click it. It is yours, it keeps working, and nothing on this page is needed to keep building it.

A link is a different thing. It needs a place to live, meaning a computer that stays on and hands your page to whoever opens the address. That service is called a host. This page walks through one host you can start with for free, and says plainly what it costs and what it does not do. Your file works with any host, so the steps are worth reading even if you choose a different one later.

You upload your folder to the host, and it answers with an address you can send to someone. Spacefast is a host from Automattic, the company behind WordPress.com, and it takes a first upload with no account. Checked November 9, 2026.

Two things to know before you send that address to anyone:

  • Your page is private at first. The address alone does not open for another person. You choose who can see it: named people, a private link you send, or the public.
  • An unclaimed page stops working. If you do not sign in and claim it, it serves for about 33 hours after your last upload, then stops. The claim link is the thing that keeps your page, so keep it. Signing in is free.

The easy way: drag it

Open drop.fast and drag your app folder onto the window. You get an address and a claim link. No install, no account.

Or ask your assistant

If you are working with an assistant that can run commands on your computer, say:

Put this app folder online with Spacefast
and give me the link. Then tell me how to
claim it so it does not expire. I am a
beginner, so do one step at a time and
explain before you act.

Your assistant has the host’s own instructions, so it can do the whole thing and report what it did.

The AI part, if you want it back

At the library, the AI was a Google service that was switched on for the evening and deleted afterwards. To have it at home you need your own key from Google AI Studio. It is free to start and it is yours, which also means it can be misused or run up a bill if it gets out. Treat it like a password.

The key must not go in the page. Your page is the file you send people, so anything inside it travels with it. The key goes in one setting on the host instead, and the page asks a small file on the host, which asks Google. That is the same arrangement the workshop used, with your key in place of the library’s.

Ask your assistant to do it in this order, and to check each step before starting the next:

  1. Put the AI call in a new file called functions/api/gemini.ts inside the folder you publish.
  2. Put the key in a setting on the host named GEMINI_API_KEY, never in a file.
  3. Upload the folder again, test the button with made-up text, and tell me what to check.

The file looks like this. Your assistant can copy it and change it.

// functions/api/gemini.ts
const HOST = "https://generativelanguage.googleapis.com";
const MODEL = "gemini-3.8-flash";

export async function POST(request: Request, context: { env: Record<string, string> }) {
  const { prompt } = await request.json();
  const key = context.env.GEMINI_API_KEY;
  if (!key) return Response.json({ error: "The AI key is not set." }, { status: 500 });

  const res = await fetch(`${HOST}/v1beta/models/${MODEL}:generateContent`, {
    method: "POST",
    headers: { "Content-Type": "application/json", "x-goog-api-key": key },
    body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] }),
  });
  if (!res.ok) return Response.json({ error: "The AI did not answer." }, { status: 502 });

  const data = await res.json();
  const text = data?.candidates?.[0]?.content?.parts?.[0]?.text;
  if (!text) return Response.json({ error: "The AI sent nothing back." }, { status: 502 });
  return Response.json({ text });
}

Two things worth knowing. The model name in that file is the one Google lists for its Gemini API, so check the name on Google’s page if the call fails. And a page with this file needs the command line to upload, because drag and drop only carries plain files. That is why this part is an ask for your assistant.

What it costs

The free plan needs no card and includes about a dollar of use a month. A page like yours, even with the AI button used a lot, stays inside that. Paid plans start at $5 a month if you want more room or your own domain name. Google bills your key separately, and at your volume that is likely nothing.

Before you send it to anyone

  • Made-up data only, the same rule as the workshop. No real names, health notes, money or ID numbers.
  • Look at who can open the page before you share the address, and change it if it is wrong.
  • Keep the key out of the page and out of anything you post or paste.
  • Say in the page that the AI can be wrong, because it can.
  • Load your folder back down before you stop using the host. Your file is the copy that lasts.

If you would rather not use a host

You do not have to. Send someone the file and they double-click it too. The cost is that they need the file, and phone users usually cannot open it that way.

A host is a company keeping your page on its computers. Read what it says about your data before you upload anything you would not put on the internet yourself. The file in your hand is the part nobody can take away.

These steps are from the host’s own instructions on the date above. If a screen does not match, tell your assistant what it says and ask it to check the host’s current instructions.