AI Tools

Open source

AI tool surfaces — text writer, image generator, code generator, an assistant chat, a full-height inbox rail, and a model playground, each with live output panels.

Add to page builder

2 of 7

resources/views/blocks/ai-tools-image.blade.php Blade

@props([
    'model' => 'DALL·E 3',
])

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container size="md" gutter="sm">
        <x-ui.card
            x-data="{
                prompt: '',
                style: 'photo',
                ratio: 'square',
                generating: false,
                results: [],
                timer: null,
                generate() {
                    if (!this.prompt || this.generating) return;
                    this.generating = true;
                    this.results = [];
                    this.timer = setTimeout(() => {
                        this.results = [1, 2, 3, 4];
                        this.generating = false;
                    }, 1000);
                },
                aspectClass() {
                    if (this.ratio === 'portrait') return 'aspect-[3/4]';
                    if (this.ratio === 'landscape') return 'aspect-video';
                    return 'aspect-square';
                },
                destroy() {
                    clearTimeout(this.timer);
                },
            }"
        >
            <x-ui.card.header class="flex flex-row items-center justify-between gap-4 border-b border-border pb-4">
                <div class="flex items-center gap-2">
                    <svg class="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <rect x="3" y="3" width="18" height="18" rx="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <path d="m21 15-5-5L5 21" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="text-base font-semibold text-foreground">{{ __('AI Image Generator') }}</span>
                </div>
                <x-ui.badge variant="secondary">{{ $model }}</x-ui.badge>
            </x-ui.card.header>

            <x-ui.card.content class="pt-6">

                {{-- Prompt row --}}
                <div class="flex gap-4">
                    <x-ui.input
                        name="prompt"
                        placeholder="{{ __('Describe the image you want to create…') }}"
                        x-model="prompt"
                        aria-label="{{ __('Image prompt') }}"
                        required
                        class="flex-1"
                        x-on:keydown.enter="generate()"
                    />
                    <x-ui.button
                        x-on:click="generate()"
                        x-bind:disabled="!prompt || generating"
                        x-bind:aria-busy="generating"
                        class="shrink-0 gap-2"
                    >
                        <span x-show="generating" aria-hidden="true">
                            <svg class="size-4 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round"/>
                            </svg>
                        </span>
                        <span x-show="generating">{{ __('Generating…') }}</span>
                        <span x-show="!generating">{{ __('Generate') }}</span>
                    </x-ui.button>
                </div>

                {{-- Style + ratio chips --}}
                <div class="mt-6 flex flex-wrap items-start gap-6">
                    <div class="flex flex-col gap-2">
                        <span class="text-xs font-medium text-muted-foreground">{{ __('Style') }}</span>
                        <div class="flex flex-wrap gap-2" role="group" aria-label="{{ __('Image style') }}">
                            @foreach ([['photo', __('Photo')], ['art', __('Art')], ['3d', __('3D')], ['anime', __('Anime')]] as [$val, $label])
                                <button
                                    type="button"
                                    x-on:click="style = '{{ $val }}'"
                                    x-bind:class="style === '{{ $val }}' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
                                    class="rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                    x-bind:aria-pressed="style === '{{ $val }}'"
                                >{{ $label }}</button>
                            @endforeach
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <span class="text-xs font-medium text-muted-foreground">{{ __('Aspect ratio') }}</span>
                        <div class="flex flex-wrap gap-2" role="group" aria-label="{{ __('Aspect ratio') }}">
                            @foreach ([['square', __('Square')], ['portrait', __('Portrait')], ['landscape', __('Landscape')]] as [$val, $label])
                                <button
                                    type="button"
                                    x-on:click="ratio = '{{ $val }}'"
                                    x-bind:class="ratio === '{{ $val }}' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
                                    class="rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                    x-bind:aria-pressed="ratio === '{{ $val }}'"
                                >{{ $label }}</button>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Results grid --}}
                <div
                    class="mt-6 grid grid-cols-2 gap-4"
                    aria-live="polite"
                    aria-atomic="true"
                    aria-label="{{ __('Generated images') }}"
                    x-bind:aria-busy="generating"
                >
                    {{-- Empty state --}}
                    <div
                        x-show="!generating && results.length === 0"
                        class="col-span-2 flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-border py-16 text-center"
                    >
                        <svg class="size-10 text-muted-foreground/40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                            <rect x="3" y="3" width="18" height="18" rx="2"/>
                            <circle cx="8.5" cy="8.5" r="1.5"/>
                            <path d="m21 15-5-5L5 21" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <p class="text-sm text-muted-foreground">{{ __('Your generated images will appear here.') }}</p>
                    </div>

                    {{-- Shimmer / result tiles --}}
                    <template x-if="generating || results.length > 0">
                        <template x-for="n in (generating ? [1,2,3,4] : results)" :key="n">
                            <div
                                class="group relative overflow-hidden rounded-lg bg-muted"
                                x-bind:class="aspectClass()"
                            >
                                {{-- Shimmer overlay while generating --}}
                                <x-ui.skeleton x-show="generating" class="absolute inset-0" />

                                {{-- Placeholder "generated" tile with gradient --}}
                                <div
                                    x-show="!generating"
                                    class="absolute inset-0 bg-gradient-to-br from-muted via-accent/30 to-muted"
                                    aria-hidden="true"
                                ></div>

                                {{-- Hover actions --}}
                                <div
                                    x-show="!generating"
                                    class="absolute inset-0 flex items-end justify-end gap-2 bg-foreground/0 p-2 opacity-0 transition-opacity group-hover:bg-foreground/20 group-hover:opacity-100"
                                    aria-label="{{ __('Image actions') }}"
                                >
                                    <button
                                        type="button"
                                        class="rounded-md bg-background/90 p-2 text-foreground shadow-sm transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                        aria-label="{{ __('Download image') }}"
                                    >
                                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke-linecap="round" stroke-linejoin="round"/>
                                            <polyline points="7 10 12 15 17 10" stroke-linecap="round" stroke-linejoin="round"/>
                                            <line x1="12" y1="15" x2="12" y2="3" stroke-linecap="round"/>
                                        </svg>
                                    </button>
                                    <button
                                        type="button"
                                        class="rounded-md bg-background/90 p-2 text-foreground shadow-sm transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                        aria-label="{{ __('Copy image') }}"
                                    >
                                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>

            </x-ui.card.content>
        </x-ui.card>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/ai-tools-image

Installs these dependencies automatically:

badge button card container input section skeleton

Registry contract

Install confidence

php artisan ui:add blocks/ai-tools-image writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.1.5
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/ai-tools-image.blade.php

Registry dependencies

badge button card container input section skeleton

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

ai-tools-image.md

# Brok UI block: Image Generator (`ai-tools-image`)

Interactive AI image tool with style and aspect-ratio chips, a 2×2 shimmer-to-result grid, and per-tile download/copy actions.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/ai-tools-image
```

## Render it

```blade
<x-blocks.ai-tools-image />
```

## Props

- `model` (string, default `DALL·E 3`)

## Use when

- Demoing an AI image tool where a visitor types a prompt, picks a style and aspect ratio, and sees a 2x2 grid of generated tiles.
- Giving each generated tile its own download and copy actions once results appear.

## Avoid when

- Use ai-tools-text for a text-generation demo or ai-tools-code for a code-generation demo; ai-tools-image is image-only.

## Rules

- Render the installed block with `<x-blocks.ai-tools-image />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/ai-tools-image
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/ai-tools-image.json

Ask about Image Generator in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Demoing an AI image tool where a visitor types a prompt, picks a style and aspect ratio, and sees a 2x2 grid of generated tiles.
Giving each generated tile its own download and copy actions once results appear.

Avoid when

Use ai-tools-text for a text-generation demo or ai-tools-code for a code-generation demo; ai-tools-image is image-only.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.ai-tools-image />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.