New to OpenCode? Start with OpenCode setup, model providers and course budget, then return here for your chosen app.
Stop rebuilding the same spreadsheet view
Another experiment, another measurement file. You need to compare groups, notice missing values and send a colleague the relevant results. Bench Explorer turns those repeated spreadsheet actions into an app with a few clear controls.
You will build it with OpenCode: load a CSV, select an experiment, see its mean and chart, then export the selected rows. It runs locally in your browser and leaves the original CSV unchanged. The example uses measurements in millimetres—think root lengths or colony diameters. Start with four supplied rows; bring your own permitted data in Step 15.
The real result: an app you own and know how to change. You will practise the whole cycle below, including correcting a wrong result and reopening your work in a fresh session.
You will finish with: your own explorer that loads a CSV, filters by experiment (A = 12.00 mm, B = 8.00 mm), charts the rows and exports exactly the rows you selected.
Watch the guided build tour (2:19). Use the player’s full-screen button to see the controls clearly. Pause or replay any part.
Silent, with on-screen explanations. A guided replay combining genuine OpenCode session captures and interactions with the saved app builds; generation waits are removed. Read the descriptive transcript (opens in a new tab) · Download the movie (opens in a new tab).
Use: this manual beside OpenCode and your browser. Complete each Success check before continuing. Click any screenshot to enlarge it.
Files: reference kit: working app, three checkpoints and practice CSVs (opens in a new tab). Extract the ZIP first: Windows right-click → Extract All; Mac double-click. Keep it beside your project.
Your personal coach: Step 4 turns your OpenCode session into a one-step-at-a-time guide. For help later, paste the complete coach brief (opens in a new tab) into your project session and tell it your step number.
Files for this journey
Download everything at once as the reference kit (ZIP) (opens in a new tab), or single files as you reach the step that needs them. Save each file into your project folder under exactly this name. If a file opens in the browser instead of downloading, press Ctrl+S (Mac: Command+S) to save it.
| File | First used in |
|---|---|
measurements.csv (opens in a new tab) | Step 12 · Load a file yourself |
wrong-header.csv (opens in a new tab) | Step 13 · Make an error—and recover |
The kit also contains the finished app, the recorded checkpoints (checkpoints/…) and the exact prompts.
1. Get OpenCode readyLink to step
Do
- Open an ordinary website. Complete your university Wi-Fi sign-in if prompted.
- Install OpenCode Desktop: follow Step 1 of Set up OpenCode in the L1 book Start With OpenCode.
- Open OpenCode. For English labels, use Settings → Preferences → Language → English. In German: Einstellungen → Präferenzen → Sprache → English.
Success: OpenCode opens. Continue to the project; choose the model in Step 3.
If different: installation or Wi-Fi failure → use the seminar recovery card.
2. Open your projectLink to step
Do
- In Finder or File Explorer, create a folder named
bench-explorerin Documents. - In OpenCode, click Home → Add project.
- Select your
bench-explorerfolder. Click Select folder. - Click New session.
Success: the new-session screen shows bench-explorer below the message box.
If different: another folder name → return Home and add the correct folder.
3. Select a working modelLink to step
Do: click the model name below the message box. Select the model assigned for the seminar. Wait until its name appears below the box.
Success: a model name is displayed. The next step checks that it answers.
If different: no working model/access → ask the instructor to confirm the seminar connection. This recording used the existing Space Bunny Free selection; that is not a guarantee of continued free availability.
Agent control: if Plan is visible, select Build before requesting edits. In this recorded interface the agent selector is hidden and Build is the default; you do not need to find a missing button.
4. Start your OpenCode coachLink to step
Do: copy this block, paste it into OpenCode's message box and click the upward Send arrow.
Be my patient app-building coach. I am a beginner.
We will build Bench Explorer in this folder, one step at a time.
Use one index.html with inline HTML, CSS and JavaScript,
no packages or server.
Explain in at most four short lines: Do, See, Success, If different.
Wait for my result before continuing.
Never claim to see my browser unless you actually inspected it.
Do not create files yet. Reply:
"Ready. Your project is bench-explorer. Next: create the first screen."
Success: OpenCode replies Ready. Model access works.
If different: an access/quota error → return to Step 3. Do not reinstall the app to fix a model quota.
5. Create the first screenLink to step
Do: paste this into the same OpenCode session and send. Wait for it to finish.
Create only index.html in this project.
Build the first working Bench Explorer screen with inline HTML,
CSS and JavaScript, no packages, no server, no network calls.
Use a clean light interface with a dark teal heading,
generous spacing, system fonts, and accessible labelled controls.
Include a "Load example" button and a "Choose CSV" file input.
Load example displays these exact synthetic rows in a real table,
preserves the blank measurement, and shows "4 rows loaded":
sample_id,experiment,measurement,unit
S01,A,10,mm
S02,A,14,mm
S03,B,8,mm
S04,B,,mm
Choose CSV reads a selected UTF-8 CSV locally, with this exact
header and the same four columns. Handle standard quoted CSV fields
and validate the header before displaying data; show a useful inline error.
Initially show "No data yet. Click Load example."
Do not add filtering, statistics or charts yet.
Save the file, then tell me how to open it.
Keep your reply to Do, See, Success and If different.
Wait for me to try it.
Success: index.html exists inside your bench-explorer folder.
If different: code appears only in chat → send “Save that code as index.html in this project. Tell me the saved path.” If a permission request appears, allow the file edit only when it names your project.
6. Open the app and load four rowsLink to step
Do
- Switch to Finder/File Explorer and open
bench-explorer. - Double-click
index.html. If a text editor opens, right-click → Open With → your browser.
- Click Load example.
Success: four rows: S01=10, S02=14, S03=8, S04=blank. Units are mm.
If different: tell OpenCode the action and actual result: “I clicked Load example. I expected four rows. I see [exact result]. Fix only that.”
7. Keep your first working versionLink to step
Do: copy the whole project folder beside the original. Name the copy bench-explorer-01-working. Continue working in the original bench-explorer.
Success: there are two folders. Both contain index.html.
If stuck: the reference kit's checkpoints/01-first-screen/index.html is the recorded working version. Open it directly or copy it into a new recovery folder. Keep your own work.
8. Add the filter and meanLink to step
Do: send this to OpenCode.
I clicked Load example. I see all four rows and S04 is blank.
Now add a dropdown labelled "Experiment", with "All", "A" and "B"
from the loaded rows. Filter the table without changing the original rows.
Above it show "Rows shown", "Measurements", "Missing" and "Mean"
for that same selection. Blank means missing, not zero.
Mean excludes blanks and shows two decimals with mm.
No values means "No measurements".
For A expect 2 rows, 2 measurements, 0 missing, 12.00 mm.
For B expect 2 rows, 1 measurement, 1 missing, 8.00 mm.
All has 4 rows, 3 measurements, 1 missing, 10.67 mm.
Reject invalid numeric values, non-mm units or duplicate/empty sample IDs
with a visible error before accepting a new CSV.
Keep the example and file input working and preserve the visual design.
No chart or export yet. Save index.html.
Give me only the next action and expected result, then wait.
When finished, switch to the app tab, refresh, then click Load example.
Success: All shows 4 rows · 3 measurements · 1 missing · 10.67 mm.
If different: no new controls → confirm OpenCode saved the file, then refresh the correct browser tab.
9. Check A, then BLink to step
Do: choose A in the Experiment dropdown. Then choose B.
| Selection | Visible IDs | Measurements | Missing | Mean |
|---|---|---|---|---|
| A | S01, S02 | 2 | 0 | 12.00 mm |
| B | S03, S04 | 1 | 1 | 8.00 mm |
Success: your results match both rows of the table.
If B shows 4.00: send “B must exclude S04's blank measurement, not convert it to zero. Expected mean 8.00; actual 4.00. Correct the conversion, then wait.” Refresh, load and try B again.
Keep: copy your project as bench-explorer-02-working. Recorded recovery file: checkpoints/02-filter-mean/index.html in the kit.
10. Add the chart and exportLink to step
Do: send this to OpenCode.
A is 12.00 mm and B is 8.00 mm.
Add a labelled bar chart using inline SVG and the SAME filtered rows
as the table and mean. Label each sample and its value in mm.
Missing measurements say "Missing" and have no zero bar.
Keep the table as the text alternative.
Add "Export these rows" to download a CSV with the original header
and ONLY the filtered rows, preserving blanks and IDs.
Quote CSV fields correctly and neutralise spreadsheet-formula-like text fields.
Disable export before data is loaded.
Use a filename containing the experiment selection.
Preserve the current design, local-only behaviour and all existing validation.
Save index.html; tell me the next click and expected result, then wait.
Refresh the app, click Load example, leave Experiment on All.
Success: three bars. S02 is tallest; S03 is shortest; S04 says Missing.
If different: chart ignores the filter → send “The table filters correctly. Make the chart use that same filtered result.”
11. Export experiment ALink to step
Do
- Select A.
- Click Export these rows.
- Open the downloaded CSV from Downloads, using a spreadsheet or text editor.
Success: the exported file contains exactly these values:
sample_id,experiment,measurement,unit
S01,A,10,mm
S02,A,14,mm
If different: B rows in the export → send “The screen shows A, but the exported file contains B. Export the filtered rows only.”
Keep: copy the project as bench-explorer-03-working. Recorded recovery file: checkpoints/03-chart-export/index.html.
12. Load a file yourselfLink to step
Do: in the app, click Choose CSV. In the extracted reference kit, select data/measurements.csv (opens in a new tab), then click Open.
Success: the app shows the same four rows. All gives 10.67 mm; A gives 12.00 mm; B gives 8.00 mm.
If different: after refresh, select the file again. The browser does not automatically restore a previous file selection.
13. Make an error—and recoverLink to step
Do: click Choose CSV and select data/wrong-header.csv (opens in a new tab) from the kit.
The first recorded build kept the old rows beside the error. The correction below was needed; the screenshot shows the corrected result.
Success: a visible error names the required header. The old chart is not presented as the new file's result.
Recover: choose data/measurements.csv (opens in a new tab) again. The four rows return.
If different: send “After I select a wrong-header CSV, the old chart remains. Validate before displaying new data; show the error and clear the stale result. Disable export until I load a valid file or the example again.” Refresh, load the example and repeat the wrong-file check. The kit's root index.html includes this correction.
14. Make it yoursLink to step
Do: send this to OpenCode:
Change only the visible heading to "My Research Explorer".
Keep the browser title consistent.
Do not change data, filters, calculations, chart or export.
Save index.html and tell me which lines changed.
Refresh the browser and click Load example.
Success: your new heading appears. Selecting A still gives 12.00 mm.
If different: an unrelated feature changed → ask OpenCode to undo that part, or restore index.html from your checkpoint.
15. Try your own dataLink to step
Do
- Make a copy of a small, permitted dataset.
- In a spreadsheet, use the columns
sample_id,experiment,measurement,unitin that order. Each sample ID must be unique. Leave missing measurements blank. This version accepts numeric measurements in mm. - Save the copy as CSV UTF-8. Select it through Choose CSV.
- Locate a row you know. Select one experiment. Calculate its mean by hand and compare.
Success: the known row and mean match your source.
If your data uses different columns or units: do not relabel values incorrectly. Tell OpenCode the actual names/units and request that specific adaptation first. Keep the original file unchanged.
16. Continue in a fresh sessionLink to step
Do: send:
Create README.md with exact instructions for opening and using this app,
its supported CSV columns and units, where data is processed,
and the known A=12.00/B=8.00/All=10.67 example checks.
Name the roles of index.html and the input CSV. Do not invent features.
Record this next task: add sorting by measurement, keeping missing values last.
Do not implement sorting yet.
Then click New session. If the button below the message box says New project, click it, select your original bench-explorer folder, and click Select folder. Confirm bench-explorer appears below the box. Send:
Read README.md and index.html without editing.
Tell me the app's purpose, how to open it and the recorded next task.
Keep the answer to three bullets.
Success: the new session identifies your app and the sorting task from its files.
If different: empty project → check the folder. Incorrect instructions → correct README before continuing.
17. Let a colleague use itLink to step
Do: give a colleague a copy of index.html, README.md and the permitted sample CSV. Ask them to follow the README, select A and export it. Let them click without coaching.
Success: they obtain 12.00 mm and a CSV containing S01/S02 only.
If they stop: add the missing instruction to README. Repeat from that instruction.
18. Make your next improvementLink to step
Do: save a working checkpoint. Write your own request for one improvement—sorting, a clearer label or an appropriate additional statistic. Use:
Add [one behaviour] so [my user] can [purpose].
Keep [working features].
I will know it works when [visible result].
Tell me which part will change, implement only this improvement,
then wait for me to try it.
Success: the new behaviour works and A still gives 12.00, B 8.00. Record the next task in README.
If stuck: paste this into your coach chat:
I am on step [number].
I did: [exact action].
I expected: [result from the manual].
I see: [actual text/result, or describe a screenshot].
Give me one next action. Wait for my result.
Finish: you have a working app, source files, an export, recovery checkpoints and a way to continue with your own AI coach.
Recording details
Screenshots are real captures from OpenCode 2.0.16's web interface connected to the running Windows desktop installation, and the app it generated. Some are cropped for readability. App screenshots were captured in Chromium. Your generated layout may differ; the labels, rows and numerical checks define success. The reference kit preserves the recorded versions. Mac installation screens and a complete five-day classroom delivery were not recorded.