Widgetr

• 

  Get started creating a SCriptable Widget

• 

  Iterate with apreview in natural language

What it does

Widgetr is a visual, local-first builder for Scriptable widgets. It lets a person and an AI assistant shape the same widget through contextual WebMCP tools, then export deterministic Scriptable source.

Why WebMCP

Scriptable widgets need separate small, medium, and large layouts. An assistant normally has to guess what is selected in a visual editor and which widget sizes a change should affect. Widgetr exposes that live context as structured WebMCP tools, so the assistant can read the selected element, select another element, make scoped content or typography changes, and run export preflight.

Every tool write goes through the same revision-checked operation path as a manual edit. This keeps the preview, history, and generated Scriptable source aligned, while avoiding stale overwrites.

Key features

• Independent small, medium, and large layouts in one canonical widget project.
• Browser-local persistence, visual selection, and undo/redo history.
• Context-aware WebMCP tools that change with the selected element.
• Revision-checked text, typography, alignment, size, and style operations.
• Deterministic Scriptable .js generation and export preflight.

Implementation

Widgetr is a Nuxt application. It registers browser tools with document.modelContext.registerTool. The WebMCP catalog changes with editor context, while every mutation runs through the same validated applyWidgetOperation path that manual UI edits use.

Testing

Open https://widgetr.vercel.app/ in ChatGPT's in-app browser. Create or continue a project, open Studio, and select a text element. The assistant can read the current context, change selected text across layouts, and run export preflight. No login or credentials are required.

Built with Codex

Codex was used to iterate on the Nuxt application, WebMCP adapter, revision-checked widget operations, editor interactions, and in-app-browser testing.

Limitations

Widgetr currently focuses on the widget-authoring workflow.

Built With

• nuxt
• scriptable
• tailwind-css
• typescript
• vue.js
• webmcp
• zod