| id | live_view_index |
| name | LiveView Skills Index |
| description | Skills for opening and driving agent-controllable visualization
components in the Pantheon UI sidebar — interactive viewers the agent
can open, control, and read back. Viewers: Vitessce (spatial / single-
cell omics), Viv (bioimage / microscopy), plus agent-generated apps.
|
| tags | ["live-view","visualization","vitessce","viv","bioimage","spatial","single-cell","interactive"] |
LiveView — Agent-Controllable UI Components
A LiveView is an interactive component the agent opens in the Pantheon
UI's right sidebar, then drives and observes through the live_view tools.
Unlike a static plot image, a LiveView is live: the agent changes its state
and the user sees it update; the user interacts with it and the agent reads
the result back.
Load the relevant skill file before building a visualization.
Architecture — only the LiveView SDK runtime is built in. Every viewer
is a plugin: a folder skills/live_view/<name>/ holding <name>.md
(this guide), adapter.js (a setup(lv, root) module), and an optional
demo.json. open_live_view either resolves a named viewer plugin
(view_type="vitessce") or loads an agent-generated component
(view_type="custom" + module_url). Adding a viewer = dropping a new
<name>/ folder here; no app code changes.
Available skills
Vitessce — spatial / single-cell / imaging data
Open a Vitessce browser to explore spatial transcriptomics, single-cell, and
microscopy-imaging datasets: spatial scatterplots, gene-expression coloring,
heatmaps, cell-set selection, image layers.
Skill file: vitessce/vitessce.md
When to use:
- Visualizing spatial transcriptomics (10x Visium, Xenium, MERFISH, …)
- Single-cell data with embeddings (UMAP/t-SNE) the user should explore
- Cell segmentations as interactive objects — click/hover a cell,
colour by type or gene. (Just viewing boundaries on an image → use Viv;
Vitessce does not render clean boundaries.)
- Spatial omics where cells/sets/embeddings matter, not just the image
Viv — bioimage / microscopy viewer
Open a Viv viewer for high-resolution, multiplexed bioimaging — OME-TIFF
and OME-Zarr (OME-NGFF): multichannel fluorescence, microscopy, IF/IMC/
CODEX, whole-slide images. Channel colors, contrast, pan/zoom, overview.
Skill file: viv/viv.md
When to use:
- The data is an image — OME-TIFF / OME-Zarr microscopy
- Multichannel fluorescence the user wants to recolour / adjust
- Cloud-hosted or local bioimages (served via
serve_local_data)
- Overlaying a cell segmentation / showing cell boundaries on an image
(boundaries as an extra channel — the preferred way to view a mask)
Mol* — 3D molecular structures
Open a Mol* viewer for 3D macromolecular structures — proteins, nucleic
acids, complexes — from the RCSB PDB, the AlphaFold DB, or a local
.pdb / .cif file. Rotate, zoom, inspect; AlphaFold models colour by
pLDDT.
Skill file: molstar/molstar.md
When to use:
- Showing a protein / nucleic-acid 3D structure (experimental or predicted)
- Visualising an AlphaFold prediction
- Any
.pdb / .cif structure file (see also the structural_biology skill
for obtaining / predicting structures)
IGV — genome browser (tracks on a reference)
Open an IGV.js genome browser to view BAM/CRAM alignments, VCF variants,
BED/GFF annotations, bigWig coverage — on a reference genome (hg38, mm10,
custom FASTA, …). Pan, zoom, jump to a gene or locus.
Skill file: igv/igv.md
When to use:
- "Look at this region in a genome browser" — RNA-seq pileups, ChIP/ATAC
peaks, variant calling, splice junctions, CRISPR-screen hits
- Any BAM/CRAM/VCF/BED/GFF/bigWig on a reference genome
- A gene symbol or coordinate range to display
Gosling — designed genomic figures (Vega-Lite-like grammar)
Open a Gosling.js view for designed genomic visualisations — circular
ideograms, multi-track / multi-sample layouts, comparative dual-genome
views, custom encodings. Driven by a declarative JSON spec.
Skill file: gosling/gosling.md
When to use:
- Circular chromosome ideograms / circos-style plots
- Designed multi-track or sample-faceted genomic figures
- Comparative dual-genome / synteny visualisations
- Anything that's hard to build with matplotlib but easy with a grammar
- Use IGV instead if the task is to look at a BAM / VCF / BED file at a
locus; the two viewers do not overlap.
Cytoscape — biological networks & pathways
Open a Cytoscape.js view for interactive networks — protein-protein
interactions, signalling / metabolic / regulatory pathways, ontology
graphs. Nodes + edges as JSON, built-in layouts (cose, breadthfirst,
circle, dagre, ...), CSS-like stylesheet by selectors.
Skill file: cytoscape/cytoscape.md
When to use:
- PPI networks (STRING, BioGRID, IntAct)
- Signalling / metabolic / regulatory pathways
- Gene-regulatory networks (TF → target)
- Any graph the user benefits from interactively (drag, hover, zoom)
MSA — multiple sequence alignment viewer
Open a multiple-sequence-alignment view (EBI Nightingale's
<nightingale-msa>) for protein or DNA alignments. Standard colour
schemes (clustal, taylor, hydro, zappo, ...), configurable tile sizes.
Skill file: msa/msa.md
When to use:
- Display a pre-computed alignment from MAFFT / MUSCLE / Clustal / MMseqs2
- Compare orthologs at a functional site / domain
- Pair with
phylotree for tree + alignment side-by-side
RDKit — 2D small-molecule depictions
Render 2D depictions of small molecules from SMILES / MOL block using
RDKit-JS (WebAssembly build). Complements molstar (3D macromolecules)
— RDKit is the canonical 2D view for drugs, metabolites, organics.
Skill file: rdkit/rdkit.md
When to use:
- A SMILES (or list) to view as a 2D structure
- Pull drugs / metabolites from ChEMBL / PubChem / DrugBank → render
- Display the substrate / product of a reaction
- Highlight substructures or specific atoms on a molecule
Phylotree — phylogenetic trees
Open a phylotree.js view for an interactive phylogenetic tree from a
Newick string. Linear or radial layout, branch-length-scaled; rerooting,
ladderise, clade collapse built in.
Skill file: phylotree/phylotree.md
When to use:
- Show a phylogeny from IQ-TREE / RAxML / FastTree / MrBayes / BEAST
- Inspect / collapse / reroot a clade interactively
- Pair with
msa for tree + alignment side-by-side
Generate a custom LiveView app
Write your own interactive component with the LiveView SDK when no existing
viewer fits — a bespoke dashboard, custom plot, or tailored data view that
the agent can still open, drive, and observe.
Skill file: live-view-app.md
When to use:
- The data / interaction doesn't match a ready-made viewer
- You need a tailored view of analysis output
- You want a custom interactive control surface for the user
The live_view tools
| Tool | Purpose |
|---|
open_live_view(view_type, title, state, module_url?) | Open a viewer plugin (e.g. view_type="vitessce") or a custom component (view_type="custom" + module_url); returns view_id |
serve_local_data(path) | Expose a workspace file/dir over HTTP+CORS; returns a fetchable URL |
live_view_update(view_id, patch) | Deep-merge a partial-state patch (drive it) |
live_view_set_state(view_id, state) | Replace the whole state |
live_view_get_state(view_id) | Read state, status, and diagnostics — incl. the user's own edits |
live_view_call(view_id, action, args) | Invoke a component-defined action |
live_view_screenshot(view_id) | Render the view to an image — observe_images it to see it |
list_live_views() / close_live_view(view_id) | List / close |
Workflow: open_live_view → verify (live_view_get_state for
diagnostics, live_view_screenshot to see it — status: ready does NOT
mean it rendered correctly) → drive with live_view_update →
live_view_get_state before the next move. Never treat reading back your
own live_view_update value as verification.
