Welcome to the AI Powered Product Teams classroom

This guide takes you from your one-time account details to a working popQorn project and your first Codex conversation in VS Code Web. You do not need to install Git, Node.js, PostgreSQL, Playwright, or VS Code on your computer.

Allow a few minutes for your first workspace to prepare the browser IDE and extensions. Later starts are faster.

Already in VS Code Web and ready to use AI? Jump to Start chatting with Codex.

Before you start

Have these details from your instructor:

• your Forgejo username or email address;
• your one-time password; and
• your assigned workspace host, such as aippt-ws-1.

Use a current Chrome, Edge, or Firefox browser. Save the new password in your password manager. Never share it with another participant.

1. Sign in to Forgejo

Open git.productteams.ai and select Sign in.

Enter the username or email address and one-time password supplied by your instructor, then select Sign in. Leave Remember this device clear on a borrowed or shared computer.

2. Replace the one-time password

Forgejo immediately asks for a new password. Enter the same new password in Password and Confirm password, then select Update password.

You should now see the Forgejo dashboard. Keep this browser tab signed in; Coder will use your Forgejo identity in the next step.

3. Sign in to Coder

Open lab.productteams.ai. Select Sign in with Forgejo (1). Do not use the email and password fields below it; those are reserved for platform recovery.

There is no separate student password for Coder. On your first successful Forgejo login, Coder creates your matching account automatically. Coder may remove punctuation from your displayed username—for example, first.last can appear as firstlast. This is expected.

4. Authorize Coder sign-in

Forgejo displays Coder Auth. Check that the page is on git.productteams.ai and the redirect is to lab.productteams.ai, then select Authorize Application (1).

This permission signs you in to Coder. A second, separate Forgejo permission for Git appears when you create your first workspace.

5. Choose the classroom workspace

On the empty Workspaces page, select the popQorn template (1).

Use the classroom template named exactly popQorn. The similarly named aippt and aippt-remote templates are infrastructure and fallback templates, not the normal class setup.

6. Connect your Forgejo account for Git

The new-workspace page initially shows Forgejo as Required. Select Login with Forgejo (1).

A small Forgejo window opens. It should say Coder Workspace Git and list repository read/write access. Select Authorize Application (1).

This lets the workspace clone, pull, and push using your own Forgejo permissions. Coder supplies the credential securely; you should not be asked for a Git password or token inside VS Code.

7. Create the workspace

After Forgejo shows Authenticated:

1. Enter a short workspace name (1), using lowercase letters, numbers, or hyphens.
2. Select the workspace host assigned by your instructor (2). The screenshot uses aippt-ws-1 only as an example—do not guess or borrow another group's host.
3. Leave Dotfiles URL empty unless you already maintain your own dotfiles repository.
4. Select Create workspace (3).

The workspace host cannot be changed later because it holds your persistent files and database. If your assigned host is not listed, stop and ask the instructor.

8. Wait for the first start

Coder shows build logs while it creates the workspace, clones popQorn, and prepares the browser IDEs. Keep the page open. Do not refresh merely because the log pauses during a download.

Continue when the status is green Running and the editor buttons are no longer dimmed. If you already have a prepared workspace, selecting its name takes you directly to this page.

9. Open VS Code Web

Select VS Code Web (1). This is the only editor used in this class; ignore the other editor and terminal buttons on this page.

Keep the Coder workspace page open in a browser tab. You will return to it later to open the application's port.

10. Trust the prepared class repository

The first VS Code Web window opens popQorn in Restricted Mode. Select Manage (1) in the banner.

Select Trust (1) under In a Trusted Folder.

Only do this for the instructor-provided aippt/popqorn repository. Trust enables the project's tasks, workspace settings, debugging, and extensions.

11. Install the remaining recommended extensions

The workspace template installs the core editor extensions automatically. After trusting the folder, VS Code may ask to install the remaining recommendations from the repository. If the notification appears, select Install (1).

VS Code may ask you to approve the emeraldwalk and Cucumber publishers. For this official class repository, select Trust Publishers & Install (1).

If the recommendation popup does not appear

1. Open Extensions from the left activity bar, or press Ctrl+Shift+X.
2. Enter @recommended in the Extensions search field.
3. Under Workspace Recommendations, select the cloud-arrow Install Workspace Recommended Extensions button. If that button is not visible, select Install beside each item that still has an Install button.
4. Approve the trusted publishers if VS Code asks.

The popQorn repository currently requires these ten workspace recommendations. The identifiers in parentheses are useful if you need to search for an extension individually:

• EditorConfig (EditorConfig.EditorConfig)
• shfmt (mkhl.shfmt)
• Vite+ Extension Pack (VoidZero.vite-plus-extension-pack)
• TypeScript Native Preview, sometimes displayed as TypeScript 7 (TypeScriptTeam.native-preview)
• Varlock Env Spec Language (varlock.env-spec-language)
• Run on Save (emeraldwalk.RunOnSave)
• markdownlint (DavidAnson.vscode-markdownlint)
• Even Better TOML (tamasfe.even-better-toml)
• Playwright Test for VS Code (ms-playwright.playwright)
• Cucumber (CucumberOpen.cucumber-official)

Installed recommendations show a settings gear or Disable/Uninstall, not an Install button. The Other Recommendations section is optional; do not install those extensions for the class unless the instructor asks you to.

The prepared setup includes EditorConfig, formatting and linting support, TypeScript, Vitest, Playwright, Cucumber, environment-file support, Markdown, TOML, and the repository's save hooks.

12. Start chatting with Codex

Codex is the AI coding agent we use in this class. It can read the project, explain unfamiliar code, edit files, and run commands for you. You can talk to it in plain language; you do not need to know IDE commands to get started.

1. Find the chat interface. In VS Code Web, look for the chat/speech-bubble button (1) near the top right of the window. Click it to open the chat panel, usually on the right side of the editor.
2. Switch to Codex. At the top of that panel, select the Codex tab (2). Check that you are typing into Codex before sending a message; VS Code also has other AI chat interfaces.

3. Select the approved model. Below the message box, click the model/effort control, which may initially say Custom Light. In its popup, click the model name (Custom) to open the model list. Select OpenAI: GPT-6.1 Sol (3), then click the message box to close the picker. Check that OpenAI: GPT-6.1 Sol now appears below your message. Sol 6.1 is the approved model for this class for now. Select it explicitly even if another model is already selected. If you cannot find it, ask the instructor.

If the panel is narrow, the model control may appear as an icon with the tooltip Select model. Drag the divider on the panel's left edge to the left to make the panel wider and reveal the labels. If an Introducing GPT-6.1 Sol popup appears on first opening Codex, select Continue with current model, then use the picker above to select the classroom's OpenAI: GPT-6.1 Sol entry.

4. Send your first message. Click the message box (4), type or paste the prompt below, and click the Send arrow (5). Wait for Codex's response.

   I am new to this project and VS Code Web. Read the project instructions and explain what PopQorn does, where its main parts are, and how you can help me work on it. Do not change any files yet.

5. Keep the conversation going. Ask a follow-up in the same message box, for example: "Explain that in simpler terms" or "Help me understand how the frontend talks to the backend." You can chat in your preferred language.

If you cannot find the chat panel or Codex tab

Open View → Command Palette… from the VS Code menu, or press F1 (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS). Type Codex: Open Codex Sidebar and select that command. This opens Codex directly; continue with model selection above. You can also click the Codex icon in the editor's activity bar if it is visible.

The classroom workspace already includes the Codex extension and shared AI access. You do not need a personal ChatGPT login or API key. If Codex asks you to sign in, its command is missing, or your first message returns an access or model error, show the instructor the message.

Reference: official OpenAI documentation for opening Codex in your IDE.

13. Open the project terminal

Open Terminal → New Terminal in VS Code Web, or press Ctrl+`. The prompt should start in /home/dev/workspace/popqorn.

Run this command if you want to confirm your location:

pwd

It should print /home/dev/workspace/popqorn. If it prints a different path, run:

cd /home/dev/workspace/popqorn

Run all commands below in this terminal, one at a time. Wait for each command to finish and return to the prompt before entering the next one.

14. Install the project dependencies

Run:

vp install

This installs the exact dependency versions recorded by the project. The first installation can take a few minutes. Warnings are not necessarily failures; continue only after the command finishes without an error.

15. Prepare the development environment

Run:

vp run env:setup

This configures the repository tools, generates environment types, and prepares your persistent development database. It is safe to run again if the setup was already completed.

If the command fails, do not guess at replacement package versions or paste a sudo command from the internet. Copy only the final non-secret error lines and show them to the instructor.

16. Start the application and find its port

Run:

vp run app:dev

Leave this command running. It starts both the backend and the Vite frontend. The terminal will not return to the prompt while the application is running.

Look near the top of the output for Vite's Local URL. The number after localhost: is the browser application's port. In the main popQorn checkout it is normally 5173, as shown below. A Git worktree may use a different port, so always use the number printed in your own terminal.

Also check that the backend eventually prints HTTP server listening. The backend normally listens on 3000, but that is an API port—not the page you want to open.

Do not open the localhost link from your laptop. localhost is inside the remote workspace, and VS Code Web does not tunnel it automatically.

17. Open the application port in Coder

Keep the development terminal running and open a new browser tab. Return to lab.productteams.ai, then open your existing workspace.

1. Select Open ports (1) on the main workspace resource.
2. Under Listening Ports, select the port that matched Vite's Local URL (2). The example uses 5173.

Ignore the other listeners unless the instructor asks for one. In particular, 3000 is the backend API, and the high-numbered port belongs to an editor service. You do not need to use Share Port; the listening port is already privately accessible to your signed-in Coder account.

Coder opens a secure workspace URL in a new tab. The address contains your workspace details and may differ from another student's address. Do not copy or construct it by hand.

18. Confirm that PopQorn is running

The page should show PopQorn and backend: ready. This confirms that the frontend, backend, Coder port proxy, and database are all working.

Return to VS Code Web to continue working, but leave the app:dev terminal running. After a code change, Vite normally refreshes the page automatically.

To stop the application later, focus the development terminal and press Ctrl+C. Run vp run app:dev again when you want to restart it.

Returning later

1. Open lab.productteams.ai and sign in with Forgejo if necessary.
2. Select your existing workspace. Do not create another workspace for the same class.
3. Select Start if it is stopped, wait for Running, and open VS Code Web.

Your files, installed editor components, and development database persist when the workspace is stopped and started. Do not delete the workspace. Stop it only when your instructor asks you to, especially if the workspace is shared with a group.

If something goes wrong

• Forgejo rejects the one-time password: check the username carefully and ask the instructor for a replacement credential. Do not keep guessing.
• Coder returns to its login page: sign in to Forgejo in another tab, then retry Sign in with Forgejo.
• Forgejo is not authenticated on the workspace form: select Login with Forgejo again and allow the popup. Check whether the browser blocked it.
• The assigned host is missing: do not select a different host; ask the instructor.
• The workspace remains Starting or an editor button keeps spinning: keep the build page open and show its latest non-secret log line to the instructor.
• VS Code opens in Restricted Mode: repeat the Manage → Trust step.
• Extensions are inactive or missing: trust the folder first, then open Extensions and install the workspace recommendations. Do not install unrelated extensions during class setup.
• You cannot find Codex or start chatting: follow Start chatting with Codex, including the Command Palette fallback. Select Sol 6.1 before sending your first message. Ask the instructor if the approved model is missing or access fails.
• env:setup reports Unable to locate package postgresql-client-18: stop and show the message to the instructor. The classroom workspace image needs correction; do not install a different PostgreSQL client version yourself.
• No application port appears: make sure vp run app:dev is still running and has not ended with an error. Wait for Vite's Local line, then reopen Open ports in Coder.
• The port opens an API response or an error: return to the terminal and use the Vite Local port, not the backend port. In the main checkout those are normally 5173 and 3000, respectively.
• The application opens but does not say backend: ready: check the app:dev terminal for the last backend error and show those non-secret lines to the instructor.
• VS Code Web or its terminal disconnects repeatedly: the corporate network may be blocking wildcard *.lab.productteams.ai traffic or WebSockets. Try code-server and tell the instructor which path failed.

Never paste a password, OAuth code, session token, or full launch URL into chat, a Git issue, or a screenshot.