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

7 of 7

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

@props([
    'title' => 'Design Team Project',
    'steps' => [],
    'state' => 'done',
    'milestones' => [],
    'placeholder' => 'Add quick notes',
])

@php
    $steps = is_array($steps) && count($steps)
        ? $steps
        : [
            ['type' => 'command', 'label' => __('Reviewed the kickoff document outline'), 'detail' => 'grep -n "Priorities" kickoff.md', 'status' => 'done'],
            ['type' => 'command', 'label' => __('Extracted the milestone list'), 'detail' => "awk '/Deliverables/,0' kickoff.md", 'status' => 'done'],
            ['type' => 'command', 'label' => __('Counted tasks per status'), 'detail' => 'jq ".tasks | group_by(.status)" plan.json', 'status' => 'done'],
            ['type' => 'command', 'label' => __('Rebuilt the milestone outline'), 'detail' => 'python3 build_outline.py kickoff.md', 'status' => 'done'],
            ['type' => 'read', 'label' => __('Reviewed kickoff.md'), 'status' => 'done'],
            ['type' => 'create', 'label' => __('Created blueprint-outline.md'), 'status' => 'done'],
            ['type' => 'note', 'label' => __('Left a note about the missing handoff checklist.'), 'status' => 'done'],
        ];

    $milestones = is_array($milestones) && count($milestones)
        ? $milestones
        : [
            ['label' => __('Project goals and requirements defined'), 'status' => 'done'],
            ['label' => __('Core user flows mapped and reviewed'), 'status' => 'done'],
            ['label' => __('Wireframe structure established'), 'status' => 'done'],
            ['label' => __('Moodboard and visual direction approved'), 'status' => 'done'],
            ['label' => __('Responsive UI screens in progress'), 'status' => 'active'],
            ['label' => __('Interactive prototype build'), 'status' => 'pending'],
            ['label' => __('Design system documentation'), 'status' => 'pending'],
        ];

    $state = in_array($state, ['running', 'done', 'error'], true) ? $state : 'done';
@endphp

{{--
    AI Tools Agent — an agent side panel that reports a run on a document: a
    header with the panel title and a close action, a scrollable body (a
    quiet activity-summary rollup, the answer rendered as prose, and a
    "Current progress" milestone list), and a composer pinned to the bottom
    so the reader can keep steering the run. `steps`/`state` feed
    ai.activity-summary, `milestones` feeds ai.task-progress, and the default
    slot accepts pre-rendered markdown for the answer (falling back to sample
    copy when empty) so a consumer can pass its own rendered reply.
--}}
<section data-slot="block-ai-tools-agent" {{ $attributes->merge(['class' => 'mx-auto h-[720px] w-full max-w-sm']) }}>
    <x-ui.card class="flex h-full flex-col overflow-hidden">
        {{-- Header --}}
        <header class="flex shrink-0 items-center justify-between gap-2 border-b border-border px-4 py-4">
            <h2 class="min-w-0 truncate text-sm font-semibold text-foreground">{{ __($title) }}</h2>
            <x-ui.button
                type="button"
                variant="ghost"
                :icon-label="__('Close panel')"
                x-data
                x-on:click="$dispatch('ai-tools-agent:close')"
            >
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M18 6 6 18M6 6l12 12" /></svg>
            </x-ui.button>
        </header>

        {{-- Scrollable body --}}
        <div class="min-h-0 flex-1 space-y-6 overflow-y-auto px-4 py-4">
            <x-ui.ai.activity-summary :steps="$steps" :state="$state" />

            <x-ui.prose size="sm" :centered="false" class="space-y-4">
                @if ($slot->isNotEmpty())
                    {{ $slot }}
                @else
                    <h3 class="text-base font-semibold text-foreground">{{ __('Mapping the project blueprint') }}</h3>
                    <p class="text-sm text-muted-foreground">{{ __('Before moving into screens, the project breaks down into clear design milestones. The focus is aligning the team on what needs to be discovered, designed, validated, and delivered, while keeping the project scope visible from kickoff to handoff.') }}</p>
                    <h4 class="pt-2 text-sm font-semibold text-foreground">{{ __('Project priorities') }}</h4>
                    <ul class="list-disc space-y-2 ps-6 text-sm text-muted-foreground">
                        <li>{{ __('Establish the product goals and core user requirements') }}</li>
                        <li>{{ __('Define the primary user flows and information architecture') }}</li>
                        <li>{{ __('Explore visual direction through moodboards and references') }}</li>
                        <li>{{ __('Build the final interface with a consistent design system') }}</li>
                        <li>{{ __('Translate validated flows into responsive wireframes') }}</li>
                        <li>{{ __('Prepare an interactive prototype for validation') }}</li>
                        <li>{{ __('Package final assets and specifications for development') }}</li>
                    </ul>
                @endif
            </x-ui.prose>

            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">{{ __('Current progress') }}</p>
                <x-ui.ai.task-progress :items="$milestones" noun="milestones" dismissible />
            </div>
        </div>

        {{-- Composer --}}
        <footer class="shrink-0 border-t border-border px-4 py-4">
            <x-ui.ai.prompt :placeholder="__($placeholder)" :attachments="false" improve>
                <x-slot:actions>
                    <button
                        type="button"
                        class="inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none"
                        aria-label="{{ __('Add') }}"
                        title="{{ __('Add') }}"
                    >
                        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M12 5v14M5 12h14" /></svg>
                    </button>
                    <button
                        type="button"
                        class="inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none"
                        aria-label="{{ __('Insert link') }}"
                        title="{{ __('Insert link') }}"
                    >
                        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                    </button>
                </x-slot:actions>
            </x-ui.ai.prompt>
        </footer>
    </x-ui.card>
</section>

Installation

terminal

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

Installs these dependencies automatically:

card button prose ai-activity-summary ai-task-progress ai-prompt

Registry contract

Install confidence

php artisan ui:add blocks/ai-tools-agent 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.0.1
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

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

Registry dependencies

card button prose ai-activity-summary ai-task-progress ai-prompt

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

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-agent.md

# Brok UI block: AI Agent Panel (`ai-tools-agent`)

An agent side panel that reports a run on a document: a header with title and close action, a scrollable body (an activity summary, the answer as prose, and a milestone progress list), and a composer pinned to the bottom.

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-agent
```

## Render it

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

## Props

- `title` (string, default `Design Team Project`) — The panel heading shown in the header, beside the close action.
- `steps` (array, default `[]`) — Passed through to ai.activity-summary: each entry is ['type', 'label', 'detail?', 'status?']. Falls back to a sample run when empty.
- `state` (string, default `done`) — Passed through to ai.activity-summary: running, done or error.
- `milestones` (array, default `[]`) — Passed through to ai.task-progress as items: each entry is ['label', 'status']. Falls back to a 7-item sample plan when empty.
- `placeholder` (string, default `Add quick notes`) — Placeholder text for the composer pinned to the bottom of the panel.

## Use when

- Showing a side panel that reports what an AI agent did while working on a document: a quiet activity rollup, the written answer, and milestone progress.
- Pairing a run summary with a composer so the reader can keep steering the agent from the same panel.

## Avoid when

- Use ai-tools-chat for a full conversational thread with a model picker, or ai-tools-playground for a settings-plus-playground layout instead of a single report panel.

## Rules

- Render the installed block with `<x-blocks.ai-tools-agent />` 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-agent
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/ai-tools-agent.json

Ask about AI Agent Panel 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

Showing a side panel that reports what an AI agent did while working on a document: a quiet activity rollup, the written answer, and milestone progress.
Pairing a run summary with a composer so the reader can keep steering the agent from the same panel.

Avoid when

Use ai-tools-chat for a full conversational thread with a model picker, or ai-tools-playground for a settings-plus-playground layout instead of a single report panel.

Anti-patterns

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

Anatomy: root block-ai-tools-agent

Usage

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

resources/views/welcome.blade.php Blade

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

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.