AI Options

Tailwind CSS and Alpine JS AI Options

AI options are a great way to customize the AI agent's response. They can be used to configure the AI agent's behavior, appearance, and more.

AI voice tone selector

A voice tone selector that allows users to choose the AI agent's tone of voice.

Voice Tone

Friendly Professional Cheerful Funny Persuasive

HTML

<div class="" role="group" aria-labelledby="voiceToneTitle">
    <span id="voiceToneTitle" class="">Voice Tone</span>
    <div class="">

        <label class=""  for="checkToneFriendly">
            <input type="checkbox" class="" id="checkToneFriendly" value="friendly" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤗</span>
                Friendly
            </span>
        </label>

        <label class=""  for="checkToneProfessional">
            <input type="checkbox" class="" id="checkToneProfessional" value="professional" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤓</span>
                Professional
            </span>
        </label>

        <label class=""  for="checkToneCheerful">
            <input type="checkbox" class="" id="checkToneCheerful" value="cheerful" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤩</span>
                Cheerful
            </span>
        </label>

        <label class=""  for="checkToneFunny">
            <input type="checkbox" class="" id="checkToneFunny" value="funny" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤭</span>
                Funny
            </span>
        </label>

        <label class=""  for="checkTonePersuasive">
            <input type="checkbox" class="" id="checkTonePersuasive" value="persuasive" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">😎</span>
                Persuasive
            </span>
        </label>
    </div>
</div>

AI image style selector

An image style selector that allows users to choose the AI agent's image style.

Image Style

Upload real watercolor 3d isometric flat

HTML

<div class="">
    <span id="voiceToneTitle" class="">Image Style</span>
    <div class="" role="group" aria-label="image style">
        <label for="imageStyleCustom" class="">
            <input type="file" id="imageStyleCustom" class=""/>
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="">
                    <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
                </svg>
            </div>
            <span class="">Upload</span>
        </label>

        <label for="imageStyleReal" class="" >
            <input id="imageStyleReal" type="radio" class="" value="real" name="imageStyle" checked />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/real.webp" class="" alt="real" aria-hidden="true"/>
            <span class="">real</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleWatercolor" class="" >
            <input id="imageStyleWatercolor" type="radio" class="" value="watercolor" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/watercolor.webp" class="" alt="watercolor" aria-hidden="true"/>
            <span class="">watercolor</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyle3d" class="" >
            <input id="imageStyle3d" type="radio" class="" value="3d" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/3d.webp" class="" alt="3d" aria-hidden="true"/>
            <span class="">3d</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleIsometric" class="" >
            <input id="imageStyleIsometric" type="radio" class="" value="isometric" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/isometric.webp" class="" alt="isometric" aria-hidden="true"/>
            <span class="">isometric</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleFlat" class="" >
            <input id="imageStyleFlat" type="radio" class="" value="flat" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/flat.webp" class="" alt="flat" aria-hidden="true"/>
            <span class="">flat</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>
    </div>
</div>

AI model selector

An engine model selector that allows users to choose the AI agent's engine model.

AI Model

Pengu AI 3.1

The most advanced AI model

Pengu AI 2.4

The older AI model

HTML

<div class="" role="group" aria-labelledby="aiModelTitle">
    <span id="aiModelTitle" class="">Model</span>

    <label for="model3" class="">
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
                </svg>
                <div class="">
                    <p class="">Pengu AI 3.1</p>
                    <p class="">The most advanced AI model</p>
                </div>
            </div>
            <input id="model3" type="radio" class="" name="model" value="3.1" />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
            </svg>
    </label>

    <label for="model2" class="">
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
                </svg>
                <div class="">
                    <p class="">Pengu AI 2.4</p>
                    <p class="">The older AI model</p>
                </div>
            </div>
            <input id="model2" type="radio" class="" name="model" value="2.4" checked />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
            </svg>
    </label>

    <button type="button" class="">Upgrade to Pro</button>
</div>

Keyboard Navigation

Key	Action
`Tab`	Next focusable element gets the focus
`Space` `Enter`	Focused item gets selected

On this page

Theme Settings

Theme

Primary Color (Light Mode)

more color options

Border

Border Radius

Title Font Family

Body Font Family

🍪 Got Cookies!

We use cookies to ensure that we give you the best experience on our website. For more information, please read our Privacy Policy .