14 KiB
order, title, description
| order | title | description |
|---|---|---|
| 5 | Lab 5 - API & Harnesses | Generate an Open WebUI API key, connect one of three coding harnesses, and build a small Zork-style game. |
Lab 5 - API & Harnesses
In this lab, we will:
- Generate a personal API key inside Open WebUI
- Install one of three coding harnesses
- Configure that harness to talk to Open WebUI as the backend
- Use the harness to build a small Zork-style game
This lab stays on a single high-level track, but Objectives 2 and 3 branch into three harness paths.
Pick one harness, complete its branch, then rejoin the common Zork objective at the end.
To start this lab, one web service has been preconfigured:
- Open WebUI - http://:8080
Objective 1 Execute: Generate an Open WebUI API Key
Before we install any harness, we need a key that lets the harness call the same model backend exposed through Open WebUI.
Execute: Sign in to Open WebUI
- Navigate to
http://<YOUR STUDENT IP>:8080. - Sign in with the same account you used in Lab 4, or the credentials supplied by your instructor.
- Confirm that you can reach the normal chat screen before continuing.
Execute: Create a personal access token
According to the Open WebUI reference docs, API keys are created from Settings -> Account and authenticate with the same permissions as the user who created them.
- Click your avatar in the lower-left corner.
- Open Settings.
- Open Account.
- Locate the API Keys section.
- Copy the key immediately and store it somewhere safe for the duration of the lab.
Execute: Sanity-check the key from the terminal
Run a quick authenticated request against the Open WebUI model list endpoint. You should receive JSON back instead of an authentication error.
curl http://<YOUR STUDENT IP>:8080/api/models \
-H "Authorization: Bearer YOUR_OPENWEBUI_API_KEY"
If this request works, your harness will use the same key for later steps.
Objective 2 Execute: Choose and Install a Harness
All three branches ultimately talk to the same Open WebUI backend. The difference is the user interface and configuration style for each harness.
Select a path to reveal that harness's instructions throughout the rest of the lab. Select the same card again if you want to hide the harness-specific instructions and return to the shared overview.
Execute: Install the harness you want to use
Path A
Install OpenCode
OpenCode is a terminal-native coding agent. Its official docs recommend either the install script or the npm package.
curl -fsSL https://opencode.ai/install | bash
opencode --version
If you prefer npm and already have Node.js installed:
npm install -g opencode-ai
opencode --version
Once installed, stay in the terminal. We will configure OpenCode in Objective 3.
Path B
Install Kilo Code for VS Code
Kilo Code is primarily used through the editor UI. For this Linux-first lab flow, use VS Code on the student workstation and install the extension from the marketplace.
- Open VS Code.
- Open the Extensions view.
- Search for Kilo Code.
- Click Install.
- Reload VS Code if prompted.
- Open the project folder you want to work in before moving to Objective 3.
Path C
Install Factory Droid
Factory's Droid harness runs in the terminal and supports BYOK custom models through Factory configuration files.
curl -fsSL https://app.factory.ai/cli | sh
droid --version
If the shell needs to be reloaded after install, open a fresh terminal and rerun droid --version.
Objective 3 Execute: Configure Your Harness for Open WebUI
For all three harnesses, the common backend values are:
Base URL-http://<YOUR STUDENT IP>:8080/apiAPI Key-YOUR_OPENWEBUI_API_KEYModel ID- Any model ID returned by Open WebUI, such asqwen3.5:4b
The shared idea is simple: your harness sends requests to Open WebUI's authenticated API endpoints instead of directly to a cloud provider.
Execute: Apply the configuration for your chosen harness
Path A
Configure OpenCode
OpenCode supports OpenAI-compatible providers through its JSON config. Create either a project-local opencode.json file or a global config under ~/.config/opencode/opencode.json.
It can also be easier to start opencode once, and exit with /exit. Use the following example to help structure your opencode.json file.
{
"$schema": "https://opencode.ai/config.json",
"provider": {
"openwebui": {
"name": "Open WebUI",
"options": {
"baseURL": "http://<YOUR STUDENT IP>:8080/api",
},
"models": {
"qwen3.5:4b": {
"name": "Qwen 3.5 4B"
}
}
}
},
"model": "openwebui/qwen3.5:4b"
}
After saving the config, you can login with opencode auth login:
After logging in, start OpenCode from your project directory:
cd /path/to/your/project
opencode
Path B
Configure Kilo Code in VS Code
Kilo Code's documented workflow is provider-driven through the extension settings UI. Use the following values when creating or editing your provider profile.
API Provider-OpenAI CompatibleOpenAI Base URL-http://<YOUR STUDENT IP>:8080/apiAPI Key-YOUR_OPENWEBUI_API_KEYModel ID-qwen3.5:4bor another model exposed by Open WebUIApproval Mode- Leave the safer default enabled for your first run
- Open the Kilo Code panel in VS Code.
- Open its provider or API settings.
- Select OpenAI Compatible as the provider.
- Paste in the base URL and API key values above.
- Pick a model ID that exists in Open WebUI.
- Start a new task to verify Kilo Code can connect successfully.
curl /api/models check from Objective 1. The harness and the curl command use the same authentication path.
Path C
Configure Factory Droid
Factory's BYOK documentation supports custom model entries in ~/.factory/config.json. Because Open WebUI exposes a chat-completions-compatible API, use the generic-chat-completion-api provider type.
{
"custom_models": [
{
"model_display_name": "Open WebUI - Qwen 3.5 4B",
"model": "qwen3.5:4b",
"base_url": "http://<YOUR STUDENT IP>:8080/api",
"api_key": "YOUR_OPENWEBUI_API_KEY",
"provider": "generic-chat-completion-api",
"max_tokens": 4096
}
]
}
After saving the config:
- Launch
droid. - Open the model selector with
/model. - Choose your new custom Open WebUI model entry.
- Start a new session in the target project directory.
Objective 4 Execute: Build a Tiny Zork Clone
At this point, all three branches reconnect. The rest of the lab is the same no matter which harness you chose.
Execute: Start your harness session
opencode inside the project directory.
droid, type "/mission", and ensure you've selected your custom model for each phase.
Execute: Give the harness a shared prompt
Use the following prompt as your starting task. Ensure you are in Plan mode (or a Droid Mission):
You are helping me build a tiny terminal adventure game in Python.
Create a Zork-style prototype with:
- at least 5 connected rooms
- movement commands like north, south, east, and west
- a simple inventory system
- one collectible key
- one locked room or door
- a short win condition
Use clean, readable Python and keep everything runnable from the terminal.
After writing the code, explain how to launch the game and what commands the player can use.
Explore: Execute the result
Once your harness produces the first version, keep pushing it with follow-up prompts:
- Ask it to add a help command.
- Ask it to improve room descriptions.
- Ask it to prevent impossible movement.
- Ask it to add one extra puzzle or hidden interaction.
Alternatively, reflect if you'd instead focused on using a Spec Driven development flow. How might the AI model perform more accurately as the requirements become more complicated?
Checkpoint: What success can look like
Before finishing the lab, confirm that your game can:
- Start from the terminal without errors.
- Accept basic movement commands.
- Let the player pick up at least one item.
- Use that item to unlock progress.
- Reach a clear win state.
Conclusion
In this lab, we:
- Generated an Open WebUI API key.
- Installed a harness of our choice.
- Connected that harness back to Open WebUI.
- Used the harness to build a small but complete coding exercise.
You should now have a repeatable pattern for testing other harnesses against the same Open WebUI deployment. We've also shown how a full local stack can work, from model selection, inference, harness installation, to real coding work.