🎻

ObieWebApp

 · Make Your Own Tool
← All tools

🔧 Make Your Own ObieApp Tool

Every tool in ObieWebApp was built by describing what was needed to Claude Code (Anthropic's AI coding assistant). You can do the same — describe a tool you need, give Claude the right context, and it writes the complete PyScript + JavaScript interface on top of the existing Python modules.

How it works

  1. Open Claude.ai/code or install the Claude Code CLI.
  2. Copy the starter prompt below and paste it into Claude.
  3. Replace the last line with a description of the tool you want.
  4. Claude reads the project rules, the existing tools, and the Python modules, then builds your tool.
What makes this work CLAUDE.md at the repo root contains explicit rules: which Python modules to use, how to structure the HTML, naming conventions, CSS patterns, and which versions of PyScript and Plotly to pin. Claude reads this first and follows it exactly — so new tools automatically match the look and feel of Explore, Convolve, and Acquire.

Not sure where to start?

Step-by-step: from zero to a live page

No coding experience needed. This takes about 15 minutes. All the services used here are free.

1

Create a free Claude account

Go to claude.ai and sign up for a free account if you don't have one. Claude is the AI assistant that will write the code for you.

2

Open a new Claude conversation and paste the starter prompt

Click New conversation, then scroll down to the Starter prompt section on this page and click Copy. Paste it into Claude's message box.

At the very bottom of the pasted text you'll see [describe your tool here] — replace that with what you want. For example: "A simple page that loads a TRF file and displays its FRF plot."

Press Enter. Claude will read the project rules and start writing your tool — this usually takes 1–2 minutes.

3

Save the files Claude produces

Claude will produce several files — typically index.html, main.py, pyscript.toml, and a .css file. Create a folder on your computer (e.g. MyObieApp) and save each file into it. You can copy the contents of each file from Claude's response and paste into a plain text editor (Notepad on Windows, TextEdit on Mac — make sure to save as plain text, not rich text).

You can also ask Claude to zip everything: just say "Can you give me all the files as a zip?"

💡 Tip — ask Claude to also generate a sample so you can test it: "Can you also give me a test TRF file I can use to try it out?"
4

Download one extra file: coi-serviceworker.js

This small file is required for the page to work correctly in Chrome. Go to this link, right-click anywhere on the page, choose Save as…, and save the file as coi-serviceworker.js into the same folder as your other files.

5

Create a free GitHub account

Go to github.com and sign up. GitHub is a free service that stores code online and can serve your page directly to anyone with a link — no server needed.

Already have a GitHub account? Skip ahead to step 6.
6

Create a new repository (think of it as a folder online)

Once logged in, click the + button at the top-right of GitHub and choose New repository. Give it a name (e.g. my-obie-tool), leave everything else as default, and click Create repository.

📁 A repository is simply a named folder on GitHub where your files live.
7

Upload your files

On the repository page you just created, click uploading an existing file (or Add file → Upload files). Drag all the files from your MyObieApp folder into the upload area. When done, scroll down and click Commit changes (this means "save").

Make sure index.html, main.py, pyscript.toml, your CSS file, and coi-serviceworker.js are all uploaded.
8

Turn on GitHub Pages (makes your page live)

In your repository, click Settings (top tab), then Pages in the left sidebar. Under Source, select Deploy from a branch, choose main as the branch, leave the folder as / (root), and click Save.

After about 60 seconds, GitHub will show you a green banner with your page's address — something like https://yourname.github.io/my-obie-tool/. Open it in Chrome and your tool is live.

⚠️ The page only works in Chrome or Edge — not Safari or Firefox. This is a browser limitation, not a problem with your tool.
9

Share the link

Copy the github.io address and send it to anyone. They just open it in Chrome — no installation, no account needed on their end.

To update the tool later, come back to Claude, describe what you want to change, and repeat steps 3–4 (just re-upload the changed files to GitHub and the live page updates automatically within a minute).

Starter prompt — copy and paste this

# ObieWebApp — new tool request # ───────────────────────────────────────────────────────── # Give Claude this whole block, then describe your tool below. I want to build a new tool for ObieWebApp — a browser-based violin acoustics toolkit built with PyScript + Plotly. Project context ─────────────── GitHub repo : https://github.com/chrisbuerginrogers/ObieApp Rules file : CLAUDE.md at the repo root ← read this first Python source: Python/ folder ← source of truth for all DSP Key rules (summarised — CLAUDE.md has the full detail) ─────────────────────────────────────────────────────── • Never reimplement signal processing — import from Python/ • Follow the HTML shell, CSS classes, and JS conventions in CLAUDE.md • This tool will be hosted on my own server, NOT inside the ObieApp repo — so the file location rule (Web/tools/<name>/) does not apply. Generate a self-contained folder I can deploy anywhere. • Include coi-serviceworker.js (copy from the ObieApp repo root) so SharedArrayBuffer works on any HTTPS host • PyScript version: 2026.3.1 | Plotly: 2.32.0 — do not change • Python files load from GitHub URLs in pyscript.toml (already the pattern used by Explore/Convolve/Acquire — follow that exactly) • Add a footer link: "Signal processing powered by <a href='https://github.com/chrisbuerginrogers/ObieApp'>ObieWebApp</a>" Please read CLAUDE.md and skim the existing tools (especially Web/tools/explore/ and Web/tools/acquire/) before writing anything. What I want to build ──────────────────── [describe your tool here — be as specific as you like]

Key resources

💻 GitHub Repository Full source code — Python signal processing, PyScript tools, shared JS/CSS 📋 CLAUDE.md Project rules file — architecture, HTML shell, naming conventions, pinned versions 🐍 Python Modules FRF, convolution, band averaging, file I/O — use these, never reimplement 🤖 Claude Code Anthropic's AI coding assistant — paste the starter prompt and describe your tool

What the Python modules can do

NeedModule
FRF / H1 estimationPython/processing/frf.py — FRFAccumulator, add_hit, compute_frf
ConvolutionPython/processing/convolution.py — convolve_it, convolve_with_frf
Band averagingPython/processing/bands.py — compute_bands
Read TRF / AvC / AvRPython/fileio/ — loaded via GitHub URL in pyscript.toml
Read MATLAB .matPython/fileio/mat_fileio.py — accepts file paths or raw bytes
Browser config / IndexedDBWeb/py/config.py
Browser-side DSPWeb/py/dsp.py

Example ideas

Batch comparison

Load all TRF files for a given instrument, compute statistics (mean, spread) across positions, and display a summary plot.

Mode tracker

Identify A0, B1−, B1+ peak frequencies automatically and track how they shift across multiple instruments or adjustments.

Band report

Select a folder of FRF files, compute band averages for each, and export a formatted HTML or CSV comparison table.

Before / after diff

Load two sets of measurements (e.g. before and after a setup change) and show the dB difference at each frequency.

WAV spectral view

Load a multi-position WAV file from Acquire, display individual hit waveforms and their FFTs side by side.

Custom auralization

Apply multiple FRFs in sequence (bridge + body + room) to a dry signal and compare the results interactively.

Hosting your tool

Claude will generate a self-contained folder (an index.html, a main.py, a pyscript.toml, and a CSS file). Because PyScript requires SharedArrayBuffer, the page must be served over HTTPS with the correct cross-origin headers — the included coi-serviceworker.js handles this automatically, so you just need a static HTTPS host. All of the following have a free tier and work with no server-side configuration:

ServiceHow to deploy
GitHub PagesPush the folder to a GitHub repo, go to Settings → Pages, set source to your branch. Free, reliable, HTTPS automatic.
NetlifyDrag and drop your folder onto netlify.com/drop. Live in seconds with a generated URL. Or connect a GitHub repo for auto-deploy on every push.
VercelRun npx vercel in your folder or connect a GitHub repo via the Vercel dashboard. HTTPS and custom domains included free.
Cloudflare PagesConnect your GitHub repo in the Cloudflare dashboard. Deploys on every push with global CDN and free HTTPS.

In all cases, also copy coi-serviceworker.js from the ObieApp repo into the root of your deployed folder — the starter prompt already instructs Claude to include it.

Tips for a good result Be specific about inputs and outputs: "load AvC files from a Data Folder, show a waterfall plot of all H positions, let me select a frequency range for the Y axis." Claude performs best when it can see the existing tools as reference — the starter prompt points it there automatically.