Build widgets with AI

You don’t need to be a developer to make a widget. Describe what you want and let an AI assistant write it. To get a widget that actually works in the portal, give the assistant our widget skill: a single file that teaches it the SDK, the sandbox rules, the scopes and how to match your portal theme.

Download the Gro widget skill (.zip)

You can also read the skill before you add it.

Add it to your assistant

Claude (claude.ai or the Claude app)

1. Open Settings → Capabilities and make sure Skills is turned on.
2. Under Skills, choose Upload skill and pick the .zip you downloaded.
3. Start a chat and ask for a widget. Claude uses the skill automatically when it sees a Gro widget request.

Claude Code

Unzip it into your skills folder, so the file ends up at ~/.claude/skills/gro-portal-widget/SKILL.md (or .claude/skills/ inside a project to share it with your team):

unzip gro-portal-widget.zip -d ~/.claude/skills/

Other assistants

Open SKILL.md and paste it in as instructions or the first message, then ask for your widget.

Ask for a widget

Say what it’s for, who sees it and what should happen. For example:

• “Make a Gro widget for dog subscriptions that asks how much food is left and, if it’s under 20%, offers to send the next order now.”
• “A puppy check in: ask for the pup’s current weight, save it on the pet, and log it to the subscription’s activity.”
• “After a customer’s third order, show a card asking them to leave a review on our Trustpilot page.”

The assistant replies with one .js file, the scopes to grant and a suggested visibility condition. It also says where on the page the widget would sit best.

Publish it

1. Save the file as something like food-check.js.
2. In Gro, go to Storefront → Customer portal → Widgets → Create widget.
3. Upload the file, grant the scopes it listed, set the visibility condition and turn it on.
4. On the Design tab, place it under Layout. Force widgets is on by default, so the preview shows it even if the sample subscription doesn’t match its condition. Change the theme to check it follows.

Something not right? Paste what you see back to the assistant (“the button doesn’t use our colours”, “it’s cut off on mobile”) and upload the new file. Uploading again creates a new version; only the active one is served.

See How to create widgets for how widgets work, and Styling your widgets for the theme values they can use.