Files
LLM-Labs/content/labs/lab-5-api-and-harnesses.md
T
2026-04-19 15:23:12 -06:00

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
Lab Flow Guide
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

  1. Navigate to http://<YOUR STUDENT IP>:8080.
  2. Sign in with the same account you used in Lab 4, or the credentials supplied by your instructor.
  3. 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.

  1. Click your avatar in the lower-left corner.
User Settings

  1. Open Settings.
  2. Open Account.
  3. Locate the API Keys section.
API Key

  1. Copy the key immediately and store it somewhere safe for the duration of the lab.
If you do not see API Keys: Open WebUI requires the feature to be enabled globally, and your user account needs permission to generate keys. Ask your instructor for help before continuing.

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.

Path A OpenCode Terminal-first coding agent Path B Kilo Code VS Code Editor-driven coding assistant Path C Factory Droid Advanced CLI harness with powerful Spec Driven Development (Missions)

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.

  1. Open VS Code.
  2. Open the Extensions view.
  3. Search for Kilo Code.
  4. Click Install.
  5. Reload VS Code if prompted.
  6. Open the project folder you want to work in before moving to Objective 3.
Tip: Kilo Code supports several providers and local-model options. In this lab, we will use its OpenAI Compatible provider flow so it can target Open WebUI.

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/api
  • API Key - YOUR_OPENWEBUI_API_KEY
  • Model ID - Any model ID returned by Open WebUI, such as qwen3.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:

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 Compatible
  • OpenAI Base URL - http://<YOUR STUDENT IP>:8080/api
  • API Key - YOUR_OPENWEBUI_API_KEY
  • Model ID - qwen3.5:4b or another model exposed by Open WebUI
  • Approval Mode - Leave the safer default enabled for your first run

  1. Open the Kilo Code panel in VS Code.
  2. Open its provider or API settings.
  3. Select OpenAI Compatible as the provider.
  4. Paste in the base URL and API key values above.
  5. Pick a model ID that exists in Open WebUI.
  6. Start a new task to verify Kilo Code can connect successfully.
Kilo Code Settings

Provider Settings

Tip: If model discovery fails, go back to your terminal and rerun the 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:

  1. Launch droid.
  2. Open the model selector with /model.
  3. Choose your new custom Open WebUI model entry.
  4. 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 Terminal Session Run opencode inside the project directory.
Kilo Code VS Code Task Open the repo folder and start a new Kilo Code task from the side panel.
Factory Droid CLI Session Run 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:

  1. Ask it to add a help command.
  2. Ask it to improve room descriptions.
  3. Ask it to prevent impossible movement.
  4. 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:

  1. Start from the terminal without errors.
  2. Accept basic movement commands.
  3. Let the player pick up at least one item.
  4. Use that item to unlock progress.
  5. Reach a clear win state.

Conclusion

In this lab, we:

  1. Generated an Open WebUI API key.
  2. Installed a harness of our choice.
  3. Connected that harness back to Open WebUI.
  4. 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.