SN Widget Kit logoSN Widget Kit
Docs

AI

Generate Widget with AI
Pro

Describe a widget in plain language and the extension orchestrates the whole flow — scaffold, generate, preview and refine — using your own AI key (BYOK).

Part of the Pro tier · Bring Your Own Key
AI generation is a paid feature. It uses your own provider key (Anthropic or any OpenAI-compatible API) — the key lives in VS Code SecretStorage and never touches our servers. See pricing and how to activate.

Generate a widget from a description

Generate Widget with AI — a new command, the IA Generated Widget panel, and a button in the Control Panel. Describe a widget in natural language and the extension orchestrates the existing building blocks. It:

  • creates a blank widget on your instance and pulls it locally,
  • generates the code and writes the files,
  • opens the Live Preview.
widgets/<instance>/<id>/
├── template.html        → generated
├── client.js            → generated
├── server.js            → generated
├── styles.scss          → generated
├── option-schema.json   → generated
├── demo-data.json       → generated
└── .widget-meta.json    → never touched (sys_id, scope, instance)
Deploy stays your explicit action
Nothing is published automatically. The generated files live locally until you run Push Current Widget — and .widget-meta.json is never touched.

In-panel refine loop

After generating, describe changes in natural language right in the panel. The same widget is regenerated (reading the current files as context), rewritten, and the preview reloads automatically. Iterate until it's right.

Bring Your Own Key (BYOK)

SN Widget: Configure AI (also a ⚙ button in the Control Panel) opens a single guided AI Settings panel:

  • Provider — Anthropic or OpenAI-compatible
  • Model — a curated list plus a custom entry.
  • Base URL and mode for non-standard endpoints.
  • A Test connection button.
The key never touches the panel
The API key is entered through VS Code's native masked input and stored in SecretStorage — it is never shown in, nor sent to, the panel. The settings ai.provider / ai.model / ai.baseUrl / ai.mode can still be edited by hand, and SN Widget: Set AI API Key / Clear AI API Key remain available.

AI skill file (project grounding)

SN Widget: Edit AI Skill File creates and opens a starter .sn-widget-kit/ai-skill.md. If present it is auto-discovered and appended to the AI prompt — no setting needed. Put your team conventions and instance-specific table/field notes there so generations match your standards.

Custom location
A custom path can be set via snWidgetKit.ai.skillFile.
Templates & Scaffolding

The starters the AI builds on.

Activate License

Unlock the Pro commands in VS Code.