Getting startedCreate your first app

Create your first app

This walkthrough takes you from an empty studio to a published app. You need a PhiWebs account and a workspace. If you do not have them yet, start with Getting started.

1. Open the studio

Go to studio.phiwebs.com. If you are not signed in, the studio sends you to the PhiWebs sign-in page and brings you back.

You land on Projects. Each project is one app. The top bar shows your name and the workspace you are working in.

2. Start a new project

Click New project and fill in the form:

  • Name: what you call the app, for example Lotus Yoga.
  • What should it be? (optional): a sentence or two about the app.

A site for my yoga studio with a class schedule and a booking form.

Click Create project. What you wrote becomes your first message, and the work starts right away.

Be concrete about the things your app handles: classes, bookings, members, articles. Those become the data your pages read and write.

Already have a project file you downloaded before? Use Open from file instead and choose a .pwpack, .tgz or .zip file of up to 25 MB.

3. Watch it being built

The project screen has two sides:

  • Chat, on the left. You write here; the agent answers and lists the steps it is taking.
  • Preview, on the right. Your app, running. It updates as the agent works. You can type a page path, reload, and switch between desktop and phone width.

The first time you open a project it takes a moment to start. The status next to the project name shows Starting, Working or Ready.

Sometimes the agent asks you a question, with answers to pick from. Choose one or write your own and click Answer, or click Skip.

On a narrow screen, the Chat and Preview tabs at the top switch between the two sides.

4. Keep changing it

Say what to build or change, one message at a time:

  • “Add a page with our opening hours.”
  • “Make the header dark blue.”
  • “Only members should see the booking page.”

Press Enter to send and Shift+Enter for a new line. The preview reloads after each change.

The buttons in the top bar open more tools on the right-hand side:

  • Images: upload your logo and photos, or generate an image. Then ask in the chat, for example “Use logo.png as the logo”.
  • Packs: the blocks and patterns the agent builds with. Add a pack your workspace has installed.
  • App: visitor sign-in and people, records, connections and visitor AI.
  • Files: the app’s files, read only.
  • History: every change is saved, and you can restore any earlier version.

Working in the studio covers each of these.

5. Run the checks

Click Checks, then Run checks. The studio opens every page and tries the forms, like a visitor would. Each problem it finds has a Fix button that asks the agent to fix it.

6. Publish

Click Publish. When it finishes, a box says Your app is live and shows the address, for example:

https://lotus-yoga-x7k2m9.phiwebs.app

The address is the project name followed by a short random ending. Use Copy to copy it and share the link. On a wide screen the address also stays in the top bar, next to Publish.

If publishing stops because the app has problems, the studio opens Checks for you. Fix the problems there, then publish again.

Every publish is saved as a new version. Click Publish again any time to put your latest changes live.

7. Take it with you

The Export menu downloads your work at any point:

  • Download project: a .pwpack file you can open again later with Open from file.
  • Download web app: the built site, ready to host anywhere.

Next steps

OverviewWorkspaces