F12
SNAP – AI layer for a low-code framework
SNAP is F12's low-code front-end framework, where the interface is built from Blockly blocks. We built an AI layer for it: it generates a block from a text description, modifies an existing block, fixes one from an error message, and explains one from a screenshot.
Tech stack
TypeScript
Cloudflare
JSON / XMLThe challenge
SNAP blocks are described in their own XML format. A general language model doesn't know it, so training data and prompts tailored to the format were needed.
What we delivered
- A browser extension to copy block XML, which became the training data
- 598 training examples in 3 areas: events, host elements, HTML elements
- Fine-tuning scripts: upload, train, status check, cancel
- An API with 5 endpoints: generate, modify, fix, explain, Q&A
The solution
Generate and modify
A text description becomes SNAP block XML, and an existing block can be changed by describing the change.
Fix and explain
From an error message and XML, the model returns a fixed block. From a screenshot and XML, it explains what a block does.
Training data and fine-tuning
We collected the examples from the SNAP interface with a browser extension, converted them from CSV to JSONL, and fine-tuned a language model on them.
Measurable results
training examples from SNAP blocks
AI endpoints: generate, modify, fix, explain, ask
skill levels the answers adapt to
From description to block, from block to explanation
A SNAP developer can ask in text for a new block, a change or a fix, and get an explanation from a screenshot. The model learned from examples collected on the SNAP interface.