Tildagon Tildagen

Become a one-shot wonder. Describe an app, let the AI cough up MicroPython, watch it run on your Tildagon badge. No IDE, no mpremote dance, no ampy, no regrets (mostly).

Vibe-code apps for the Tildagon badge (EMF Camp 2024) straight from your browser using either a local Ollama model or the Anthropic API. Generate, tweak, deploy, crash, paste the traceback back in, regenerate, repeat.

Features

• Dual LLM provider — local Ollama or hosted Anthropic (Claude)
• Web Serial deploy over MicroPython raw-paste (no driver install)
• Auto-rebuild of metadata.json so the badge menu picks it up
• Error feedback loop — paste a traceback and hit Generate again
• System prompt includes a condensed Tildagon API context
• Persists your last session in localStorage
• Single-page, vanilla stack: HTML + CSS + JS + a tiny PHP/Python proxy

Requirements

• A Chromium-based browser (Chrome, Edge, Brave) for the Web Serial API
• A Tildagon badge connected via USB
• One of:
  • Ollama running locally with a model pulled (e.g. ollama pull gpt-oss), or
  • An Anthropic API key (console.anthropic.com)

Quick Start

Option A — Python dev server (recommended, bundles the Anthropic proxy)

python3 webserver.py

It picks a free port, opens the browser, and exposes /api/anthropic for the Anthropic provider.

Option B — XAMPP / Apache

Drop the folder into htdocs/ and visit http://localhost/tildagen/. The included .htaccess routes api/anthropic to api/anthropic.php (requires mod_rewrite and PHP with cURL).

Option C — Plain static server (Ollama only)

python3 -m http.server 8000

The Anthropic provider will not work without the proxy — stick to Ollama in this mode.

Using It

1. Pick a provider in the sidebar (Ollama or Anthropic).

2. For Ollama, confirm the host (default http://localhost:11434) and pick a model from the dropdown. For Anthropic, paste your API key; it's stored only in your browser's localStorage.

3. Give the app a name (e.g. Pong). The badge will show Tildagen Pong.

4. Describe what the app should do in the instruction box.

5. Click Generate. The raw AI output streams into the Raw tab; the extracted code lands in the Code tab.

6. Click Connect Badge and pick the serial port — the badge shows up as TiLDAGON.

   

7. Click Push to Badge. Hold the reboop button for ~2 seconds to restart and see your app in the badge menu.

Error Recovery

If the app crashes on the badge:

1. Grab the traceback from the badge (via mpremote repl or the serial log).
2. Paste it into Paste Errors in the sidebar.
3. Click Generate again. The AI sees both the code and the errors and returns a fixed version.

Copy / Download

Above the code editor:

• Copy — copies app.py to the clipboard.
• Download — saves it as <app_folder_name>.py so you can commit it, share it, or flash it with mpremote manually.

Ollama Setup Notes

Ollama needs CORS enabled for browser access:

OLLAMA_ORIGINS="*" ollama serve

Recommended models (from fastest to smartest):

• gpt-oss — fast, good enough for simple apps
• gemma4 — should be ok for simple apps
• qwen3.5 — solid all-rounder

Anthropic Setup Notes

The browser can't call api.anthropic.com directly because of CORS, so requests go through a local proxy:

• webserver.py exposes POST /api/anthropic
• api/anthropic.php does the same for XAMPP/Apache

The proxy forwards your key via the x-api-key header. Nothing is persisted server-side — your key lives in localStorage only.

File Layout

File	Purpose
index.html	Single-page UI
style.css	Dark theme styles
app.js	Glue logic, system prompt with Tildagon API reference
ollama.js	Streaming Ollama chat client with code extraction
anthropic.js	Streaming Anthropic Messages client via the local proxy
serial.js	Web Serial → MicroPython raw-paste file transfer
webserver.py	Dev server + Anthropic proxy
api/anthropic.php	Anthropic proxy for XAMPP/Apache
.htaccess	Rewrite api/anthropic to the PHP proxy
logo.svg	Header logo

How It Works

The system prompt contains a condensed Tildagon API reference (buttons, ctx drawing, IMU, LEDs, event bus, common pitfalls) distilled from real badge apps. The LLM generates a single-file app.py with __app_export__ = TildagenApp. The serial module enters MicroPython raw REPL, negotiates raw-paste mode for proper flow control, creates /apps/tildagon_<name>/, writes app.py and metadata.json, then exits cleanly. No filesystem wipe required, no reflash, no pain.

Related Projects

Tildagen apps:

If you ship a Tildagon app generated with Tildagen, please tag your repo with both the tildagon-app and tildagen-app topics on GitHub so your creation shows up alongside everything else made with this tool.

Licence

Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0).

You may share and adapt this work for non-commercial purposes with attribution. For commercial use, contact weborder.uk.

See LICENSE for the full text.

Credits

Built by Ilya Titov / Web Order Ltd.