Build a Plasmid Map Viewer with OpenCode

New to OpenCode? Start with OpenCode setup, model providers and course budget, then return here for your chosen app.

Where does EcoRI cut my plasmid — and can I trust the answer?

Before a cloning experiment you open a plasmid file and ask: which enzymes cut, and where? Online tools answer in a second, but you rarely see how the answer was made. Plasmid Map Viewer reads a GenBank or FASTA file on your own computer, lists the features written in the file, and marks where the enzymes on your list find their site — in a table and on a circular map.

You will build it with OpenCode, one request at a time, and check every number yourself: EcoRI must appear exactly once, at position 396. The app runs in your browser; nothing is uploaded. The practice sequence is pUC19, a common cloning vector, from the public NCBI GenBank record L09137. It is real public data, not synthetic. The course added four features to a copy of the record and made the enzyme list and one broken file. Your own sequence comes in Step 16.

The app shows what the file and the enzyme list say. It does not check whether a construct will work.

(opens in a new tab)

You will finish with: your own index.html that opens pUC19.gb (opens in a new tab), lists EcoRI with exactly one site at position 396, and exports the labelled circular map as an SVG image.

First watch the 2:08 result tour. It shows where you are going. The numbered steps below are the lesson: what to click in OpenCode, what to paste, and what must appear before you continue.

Silent, with on-screen explanations. OpenCode scenes are captures from the recorded build; app scenes operate the actual OpenCode-generated app. Captions and highlights were added afterwards. Read the transcript (opens in a new tab) · Download the movie (opens in a new tab).

Use: keep 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, pUC19 files, enzyme list and the exact prompts (opens in a new tab). Extract the ZIP first: Windows right-click → Extract All; Mac double-click.

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.

Words you will meet

• GenBank file (.gb): a text file with a header, a FEATURES list of named regions, and the sequence after the word ORIGIN.
• FASTA file (.fasta): one name line starting with >, then only the sequence.
• Recognition site: the short DNA word an enzyme looks for. EcoRI looks for GAATTC.
• Strand: DNA has two. The file shows the top strand. The bottom strand, read in its own direction, is the reverse complement: reversed, with A↔T and C↔G swapped.
• Palindrome: a site that reads the same on both strands, like GAATTC. It is one site, not two.
• Topology: whether the molecule is a ring (circular, like a plasmid) or a straight piece (linear).

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.

The kit also contains the finished app, the recorded checkpoints (checkpoints/…) and the exact prompts.

1. Get OpenCode readyLink to step

Do

1. Open an ordinary website. Complete your university Wi-Fi sign-in if prompted.
2. Install OpenCode Desktop: follow Step 1 of Set up OpenCode in the L1 book Start With OpenCode.
3. 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

1. In Finder or File Explorer, create a folder named plasmid-viewer in Documents.
2. From the extracted reference kit, copy the whole data folder into plasmid-viewer. It holds pUC19.gb, enzymes.json (opens in a new tab) and three practice files.
3. In OpenCode, click Home → Add project.
4. Select your plasmid-viewer folder. Click Select folder.
5. Click New session.

Success: the new-session screen shows plasmid-viewer below the message box.

(opens in a new tab)

If different: another folder name → return Home and add the correct folder. data missing → copy it in now; OpenCode reads it in later steps.

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.

(opens in a new tab)

Success: a model name is displayed. The next step checks that it answers.

If different: no working model or no access → ask the instructor to confirm the seminar connection. This recording used Space Bunny Free; free availability is not guaranteed.

Agent control: if Plan is visible, select Build before requesting edits. In the recorded interface the selector is hidden and Build is the default.

4. Start your OpenCode coachLink to step

Do: click once in the message box. Paste this block. Click the upward-arrow Send button.

Be my patient app-building coach. I am a beginner.
We will build Plasmid Viewer in this folder, one step at a time.
Use one index.html with inline HTML, CSS and JavaScript,
no packages, server or network calls.
The data folder holds a public pUC19 GenBank record and an enzyme list.
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 plasmid-viewer. Next: create the first screen."

Wait: while OpenCode works, Send turns into Stop. Continue only when Stop is gone.

(opens in a new tab)

Success: OpenCode replies Ready. No index.html exists yet.

If different: an access or quota error → return to Step 3. Do not reinstall OpenCode to fix a model quota.

5. Create the first screenLink to step

Do: paste this into the same session and click Send.

Create only index.html in this project: Plasmid Viewer, one file with
inline HTML, CSS and JavaScript, no packages, no server, no network calls.
Clean light design, dark teal heading, system fonts, labelled controls.
Add a file input labelled "Open sequence file" accepting .gb, .gbk,
.fasta and .fa. Read the chosen file locally in the browser.
GenBank: take name, length and topology (circular or linear) from the
LOCUS line, the description from DEFINITION, and the sequence from the
ORIGIN section (drop the numbers and spaces).
FASTA: name from the > line; say "not stated in the file" for topology.
Show Name, Description, Length (bp), Topology and the file name.
Check that the counted bases match the LOCUS length.
Accept only A, C, G, T and N. If ORIGIN is missing, the sequence is empty
or has other characters, show a visible error that names the problem
and clear any previous result.
At first show "No sequence yet. Open a GenBank or FASTA file."
No features, maps or enzymes yet. Save index.html.
Tell me how to open it, then wait.

Wait: this took about 3–4 minutes in the recording. You may see tool names such as Read, Write and Edit. Continue when Stop is gone.

(opens in a new tab)

Success: the reply says index.html was created, and the file is in your plasmid-viewer folder.

If different: code appears only in the chat → send “Save that code as index.html in this project. Tell me the saved path.” A permission question → allow the edit only if it names your project folder.

6. Open the app and read pUC19Link to step

Do

1. In Finder or File Explorer, open plasmid-viewer and double-click index.html. If a text editor opens, right-click → Open With → your browser.
2. Under Open sequence file, click the file button (in Chrome it says Choose File).
3. Select data/pUC19.gb. Click Open.

(opens in a new tab)

Success: Name SYNPUC19CV · Length 2686 · Topology circular · Description Cloning vector pUC19c, complete sequence. (NCBI calls this record pUC19c; its sequence is the standard pUC19.)

If different: tell OpenCode what you did and saw: “I opened data/pUC19.gb. I expected SYNPUC19CV, 2686 bp, circular. I see [exact text]. Fix only that.”

7. Keep your first working versionLink to step

Do: copy the whole plasmid-viewer folder beside the original. Name the copy plasmid-viewer-01-working. Keep working in the original.

Success: two folders exist. Both contain index.html.

If stuck: the kit's checkpoints/05-first-screen/index.html is the recorded version of this stage. Copy it into a new recovery folder together with data; do not overwrite your own work.

8. Add the feature table and the circular mapLink to step

Do: paste this into OpenCode and click Send. Wait until Stop is gone.

I opened data/pUC19.gb: SYNPUC19CV, 2686 bp, circular.
Now read the FEATURES section of the opened GenBank file.
Show a table "Features (from the file)" with type, label, start, end
and strand. Label = the /label, /gene, /product or /note qualifier,
whichever comes first. Locations like 146..469, complement(146..469)
and join(...) must work; complement means strand −.
Never add a feature the file does not list.
Below the table draw a circular map as inline SVG for circular sequences:
position 1 at the top, clockwise, a labelled tick every 500 bp, and each
feature as a labelled arc on its strand (outside for +, inside for −).
Leave out the whole-length source feature from the map.
For linear sequences draw a straight horizontal map instead.
FASTA files have no features: say "This file lists no features".
Keep the summary, file input and error handling. Save index.html.
Tell me what to check, then wait.

complement(146..469) is how GenBank writes “on the bottom strand, from 146 to 469”. SVG is a drawing format the browser shows directly and you can later save as a file.

Success: OpenCode says it updated index.html.

If different: it asks which file to read → answer “data/pUC19.gb in this project.”

9. Check the features against the fileLink to step

Do: switch to the app tab, refresh (Windows Ctrl+R, Mac Command+R), then open data/pUC19.gb again. A refresh forgets the chosen file.

(opens in a new tab)

Success: five rows, exactly:

The map shows four arcs; the − strand arcs sit inside the circle.

Now see where annotation comes from: open data/L09137-as-downloaded.gb (opens in a new tab), the NCBI record exactly as downloaded. The table shows one row, source. The course added the other four features to the copy pUC19.gb. The app does not invent features; a feature missing from the file is missing from the app.

If different: a feature appears that the file does not list → send “The table shows [feature], but pUC19.gb does not list it. Show only features written in the file.”

Keep: copy the project as plasmid-viewer-02-working. Recorded recovery file: checkpoints/06-features-map/index.html.

10. Add the enzymes and their sitesLink to step

Do: send this request. It took about 8 minutes in the recording; wait until Stop is gone.

The feature table shows 5 rows and the map draws 4 labelled arcs.
Now add restriction sites. The enzyme list is data, not code:
copy the exact text of data/enzymes.json into a
<script type="application/json" id="enzyme-list"> block and read it
from there. Add a file input "Load enzyme list (JSON)" that replaces it
with another file in the same format; reject a wrong format visibly.
Show one checkbox per enzyme with its site, all ticked at the start.
Search the whole sequence for each site and its reverse complement.
For circular sequences also find sites that run across the end back
to position 1. A palindromic site counts once, not twice.
Show a results table: enzyme, site, number of sites, positions, strand
(both for a palindrome, + or −). Position = the first base of the
matched stretch on the top strand, 1-based as in GenBank.
Enzymes with no site say "no site".
Mark the ticked enzymes' sites on the map as labelled ticks.
Keep everything else working. Save index.html. Tell me what to check.

Why these rules: enzymes.json is a plain list of names and sites in JSON, a simple text format for lists. Keeping it as data means you can change the list without touching code — you do that in Step 15. 1-based means the first base of the sequence is position 1, as in GenBank. A circular plasmid has no real end, so a site can start near 2686 and finish at 1 or 2.

Success: OpenCode says it added the enzyme list, the results table and ticks on the map.

If different: it hard-codes the enzymes inside the JavaScript → send “Keep the enzymes only in the enzyme-list JSON block, copied from data/enzymes.json. The code must read them from there.”

11. Check every site yourselfLink to step

Do: refresh the app, open data/pUC19.gb, and read the results table.

(opens in a new tab)

Success: the table matches these answers, which the course computed separately:

The two hard rows are BsmBI. At 51 its site reads only on the bottom strand (−). At 2683 it runs across the end: bases 2683–2686, then 1–2. A search that skips the bottom strand or the end finds none or one of them. The course also checked the numbering against public references: New England Biolabs' pUC19 sequence file is identical base by base and places the cloning site at 396–452, from the EcoRI site to the HindIII site (447–452). Another pUC19 record may start at a different base; then every position shifts.

If different:

• EcoRI shows 2 sites at 396 → send “EcoRI's site GAATTC is a palindrome. Count it once, strand both. Expected: 1 site at 396.”
• BsmBI shows only 51 → send “BsmBI must also be found at 2683, where the site runs across the end of the circular sequence back to position 1.”
• BsmBI shows nothing at 51 → send “Also search the reverse complement. BsmBI's site reads on the bottom strand at 51.”

12. Correct what OpenCode got wrongLink to step

The first recorded build passed every number in Step 11. The map did not: the six labels in the cloning site sit on top of each other.

(opens in a new tab)

Do: if your map shows the same pile of labels, send what you see and what must stay. If your labels are already readable, skip to Step 13.

The results table is right: EcoRI has one site at 396.
But on the circular map the labels of the six sites between 396 and 452
(EcoRI, SmaI, BamHI, XbaI, PstI, HindIII) lie on top of each other
and cannot be read. Keep every tick at its true position. Move only
the labels apart, outside the circle, each joined to its tick by a thin
leader line, so that no two labels overlap. Make the map large enough.
Do not change the tables, positions, features or enzyme list.
Save index.html and tell me what to check.

(opens in a new tab)

In the recording the labels no longer overlapped, but the map stayed small and the text was tiny. A second, equally specific request fixed that:

The labels no longer overlap, but the map is small and the text is tiny.
Let the page use up to 1100 px width and let the map fill its card.
Map text at least 13 px. Put labels of ticks on the right half of the
circle in a column on the right and labels on the left half in a column
on the left, each column sorted by position, so leader lines do not cross
the circle. Show the position next to each enzyme name, e.g. EcoRI 396.
Do not change the tables, positions, features or enzyme list.
Save index.html and tell me what to check.

Refresh the app and open data/pUC19.gb.

(opens in a new tab)

Success: every label is readable and carries its position, from BsmBI 51 to PvuII 628, plus BsmBI 2683 on the left. The results table still says EcoRI 1 site at 396. Some leader lines still cross the circle; that is cosmetic, and the positions are right.

If different: the numbers in the table changed → send “The table changed after the map fix. Restore EcoRI 1 site at 396 and BsmBI 51 and 2683. Change only the map labels.”

Keep: copy the project as plasmid-viewer-03-working. Recorded recovery file: checkpoints/09-bigger-map/index.html.

13. Open a broken fileLink to step

Do: open data/pUC19.gb, then open data/broken-no-origin.gb (opens in a new tab). It is the same record with the whole sequence (the ORIGIN section) removed.

(opens in a new tab)

Success: the red message GenBank ORIGIN section is missing. appears. The sequence details, tables and map from pUC19 are gone, so no old result looks like the new file's result.

Recover: open data/pUC19.gb again. Everything returns.

If different: the old map stays visible → send “After I open broken-no-origin.gb the pUC19 map is still shown. Show the error and clear every previous result until a valid file is opened.”

14. Add SVG export and the honesty statementLink to step

Do: send:

The map is readable now. Next, three small additions.
1. Add a button "Export map (SVG)" that downloads the current map,
with its ticks and labels, as plasmid-map-<name>.svg. Disable it
until a valid sequence is loaded and after an error.
2. Show this sentence under the heading, always visible:
"This viewer shows what the file and the enzyme list say.
It does not check whether a construct works."
3. Under the feature table add: "Annotation comes from the file.
A feature missing here is missing from the file."
Do not change the tables, positions, features, map or enzyme list.
Save index.html and tell me what to check.

Refresh, open data/pUC19.gb, and click Export map (SVG). Open the downloaded file from Downloads in your browser.

Success: the two sentences are visible. The download is named plasmid-map-SYNPUC19CV.svg and shows the same map with EcoRI 396.

If different: the exported map is black or unlabelled → send “The exported SVG loses its colours and labels. Put the styles inside the exported SVG so it looks the same outside the app.”

15. Make it yoursLink to step

Do

1. Send this to OpenCode:

Change only the visible heading to "My Plasmid Viewer".
Keep the browser title consistent.
Do not change parsing, features, map, enzymes, positions or export.
Save index.html and tell me which lines changed.

2. Now change the enzyme list without any code. In a plain-text editor (Windows Notepad; Mac TextEdit → Format → Make Plain Text), create a file with exactly this text and save it in plasmid-viewer as my-enzymes.json:

[
  {"name": "EcoRI", "site": "GAATTC"},
  {"name": "BamHI", "site": "GGATCC"},
  {"name": "HindIII", "site": "AAGCTT"},
  {"name": "KpnI", "site": "GGTACC"}
]

3. Refresh the app, open data/pUC19.gb, then click Load enzyme list (JSON) and select my-enzymes.json.

(opens in a new tab)

Success: the heading reads My Plasmid Viewer. The table now lists four enzymes; KpnI has 1 site at 408. EcoRI is still 1 site at 396.

If different: a message says the format is invalid → check that every line but the last ends with a comma and that the quotes are straight ("), not curly. TextEdit may have saved my-enzymes.json.rtf; save again as plain text.

16. Try your own permitted sequenceLink to step

Privacy first: unpublished constructs and sequences from collaborators are confidential. The app itself runs only in your browser and uploads nothing. OpenCode is different: never paste an unpublished sequence into a model chat, and never ask OpenCode to read the file, without permission from the sequence owner.

Do

1. Export a sequence you may use as GenBank (.gb) or FASTA (.fasta) from your lab's tool (SnapGene, Benchling, ApE) or from NCBI.
2. Save a copy in a folder outside plasmid-viewer, for example Documents/my-sequences. OpenCode can read every file inside the project folder; a file outside it stays out of reach. In the app, click Open sequence file and select your copy.
3. Pick one enzyme whose sites you already know from your lab's own map. Compare positions.

Success: name and length match your source, and the known enzyme's positions match — or differ by the same amount for every site, which means your map starts counting at a different base.

Watch the topology: a FASTA file does not say whether the sequence is circular. Open data/pUC19.fasta (opens in a new tab) to see the effect: topology not stated in the file, no features, and BsmBI shows only 51. The site across the end (2683) is missed, because the app reads the FASTA as a straight line. For plasmids, prefer GenBank files that say circular.

If different: an error names a character such as R or Y → your file uses ambiguity letters. Do not edit the sequence to make it pass; ask OpenCode for that specific change first, using the practice file, not your own sequence.

17. Continue in a fresh sessionLink to step

Do: send:

Read index.html, then create README.md with: how to open the app,
the supported files (GenBank .gb/.gbk and FASTA), where the data is
processed, the enzyme list format and how to load another list,
the position rule, and these checks with data/pUC19.gb:
EcoRI one site at 396, BsmBI 51 (−) and 2683 (+, across the end),
NotI no site. Say the viewer does not check whether a construct works.
Record this next task: a "Treat as circular" option for FASTA files.
Do not implement it. Do not change index.html. Tell me what you created.

Then click New session. If the button below the message box says New project, click it, select your original plasmid-viewer folder, and click Select folder. Confirm plasmid-viewer 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.

(opens in a new tab)

Success: the new session names a local sequence viewer, opening index.html beside the data folder, and the Treat as circular task — read from your files, not remembered.

If different: empty project → check the folder. Wrong facts → correct README.md before continuing.

18. Let a colleague use it, then make your next improvementLink to step

Do

1. Give a colleague a copy of index.html, README.md and the data folder. Ask them to follow the README and find EcoRI without your help.
2. Save a checkpoint. Choose one improvement and write your own request. Good first choices: the Treat as circular option from README, or support for sites with N. 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.

A limit you should know: the enzyme list may contain N (any base), but this version does not search it correctly. Loading BglI (GCCNNNNNGGC) shows no site, yet pUC19 has BglI sites at 245 and 1813. A restriction map is only as good as the enzyme list and the search behind it — which is why you check known answers.

Success: your colleague reports EcoRI at 396 on their own. Your new behaviour works, and EcoRI is still 1 site at 396 and BsmBI still 51 and 2683. 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 plasmid viewer, three checkpoints, a README for tomorrow and a way to keep improving it with your coach.

The method behind these steps

Structure it: one question — where do my enzymes find their sites? — split into file → features → sites → map. Understand it: positions, strands and the circular end, checked against answers computed separately. Choose tools: one offline HTML file, a public GenBank record, the enzyme list as data. Build it: one request per step, a check after each, a precise correction when something is wrong. See T01-L01 · From Idea to Working Result: The Four-Quadrant Method.