> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Build Your Own Info Box

When the ready-made Info Box styles don't match your design, build your own with the UiChemy Composer widget.


The **Info Box** widget comes with a few ready-made styles to choose from. When none of them fit, click the **Learn More** button inside the widget, then follow the steps below to build your own design with the **UiChemy Composer** widget.

### Steps

<Steps>
  <Step title="Install the free UiChemy plugin" icon="download">
    In your WordPress dashboard, go to **Plugins → Add New Plugin**, search for **UiChemy**, click **Install Now**, then **Activate**. See [Install and Activate UiChemy](/uichemy-composer/getting-started/install).
  </Step>
  <Step title="Connect your AI tool (MCP)" icon="plug">
    Once UiChemy Pro is activated, go to **UiChemy → Home** and select the **AI Agent (MCP)** tab.

    1. Click **Generate connection**. This issues a secure Application Password so your AI tool can reach this site.
    2. Under **Pick your AI tool**, choose **Claude Desktop**, **Cursor**, **Codex**, **Antigravity**, or **Other**.
    3. Under **Add the MCP server**, use the **Prompt** or **Config** switch, click **Copy**, and add it to your AI tool.
    4. Restart your AI tool.

    Full steps for each tool are in [Set Up AI to WordPress](/ai-to-wordpress/set-up).
  </Step>
  <Step title="Copy the prompt" icon="clipboard-copy">
    Click **Copy Prompt** at the top-right of the prompt below, paste it into your AI tool, replace the parts in square brackets with your own details, and send it.

    <div className="prompt-copy">

    ```text
    Using UiChemy on my WordPress site, add a Composer widget to the page "[page name]".
    The ready-made Info Box styles don't match my design, so build my own set of [3] info boxes with HTML, CSS and JavaScript.
    Each box: an icon, a title, a short description, and a [Learn more] link.
    On hover, [change the background colour and move the icon up slightly].
    Show [3] boxes per row on desktop, [2] on tablet and [1] on mobile.
    Match my site's colours and fonts.
    ```

    </div>

    Your AI tool builds a native, editable Composer on that page. Ask for changes in the same chat until it looks right.
  </Step>
</Steps>

<Callout kind="tip">
Prefer to code it yourself? Add the Composer widget to your page and write the HTML, CSS and JavaScript in its **Code** tab. See [Code Tab](/uichemy-composer/uichemy-widget/code-tab).
</Callout>

### If It Doesn't Work

<ExpandableGroup>
  <Expandable title="The config under Add the MCP server isn't showing" default-open="false">
    Click **Generate connection** first. The page notes "Generate the connection above to reveal your real config.", the real values only appear once a connection exists.
  </Expandable>
  <Expandable title="My AI tool can't connect to the site" default-open="false">
    Make sure **Node.js 18 or newer** is installed on your computer, that you're signed in as an Administrator, and that you restarted the AI tool after adding the server. See [Set Up AI to WordPress](/ai-to-wordpress/set-up).
  </Expandable>
</ExpandableGroup>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Can I use my own icons?" default-open="false">
    Yes. Describe them in the prompt, for example "use a rocket icon for the first box", or replace them in the Composer's **Code** tab.
  </Expandable>
  <Expandable title="Can I add more boxes later?" default-open="false">
    Yes. Ask your AI tool in the same chat, for example "add a fourth info box about [topic]".
  </Expandable>
  <Expandable title="Can I edit the design after the AI builds it?" default-open="false">
    Yes. The result is a normal Composer, so you can keep editing it in the **Editor** tab, the **Code** tab, or by asking your AI tool for changes.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Build Your Own Widget Design" href="/uichemy-composer/widget-styles/overview">
    See every populate widget.
  </Card>
  <Card title="Set Up AI to WordPress" href="/ai-to-wordpress/set-up">
    Connect Claude, Cursor, Codex, or Antigravity to your site.
  </Card>
</Columns>