Skip to content

Flex Component Generator AI Skill#

The Flex Component Generator is an AI skill that generates complete Miva Page Builder Flex Component JSON schemas from a plain-language description. It is available as a custom skill for both Claude (Anthropic) and ChatGPT (OpenAI).

Instead of manually authoring the full JSON schema and necessary template files for a new Flex Component, you describe what you want in plain English and the skill produces a ready-to-import schema — including properties, UI definitions, and input types.

Available Versions#

  • Claude Skill

    Built for use with Claude.ai or the Anthropic API. Add the skill to your Claude workspace to generate Flex Component schemas directly in your conversation.

    Get the Claude Skill

  • ChatGPT Skill

    Built for use with ChatGPT as a custom GPT. Open the GPT and describe your component to get a schema instantly.

    Get the ChatGPT Skill

What It Generates#

Given a plain-language description of a component, the skill outputs a valid Flex Component JSON schema including:

  • code and name identifiers
  • properties array with typed inputs (text, image, checkbox, select, list, etc.)
  • UI grouping and labels
  • Default values and validation hints

Example Usage#

Prompt:

Create a Flex Component for a hero banner with a heading, subheading, background image, a CTA button label and URL, and a toggle to show or hide an overlay.

Output: A compressed .tar.bz2 containing the necessary files to import within the Flex Components section of the Miva admin.

Tips for Best Results#

  • Be specific about input types — mention if something is a toggle, a dropdown, or an image picker
  • Describe groupings if you want related fields organized together in the UI
  • Specify whether fields are required or optional
  • Reference existing component patterns (e.g., “similar to the MMX Hero component”) for more accurate output