#AI Agent & PixaultChat

Pixault includes an embedded AI assistant powered by Claude that can manage images, transforms, and plugins through natural language conversation. The assistant is available as a floating chat component in the dashboard and can be embedded in any Blazor application.

#PixaultChat Component

The PixaultChat component adds a floating AI chat panel to any Blazor page:

<PixaultChat Project="myapp"
             AccountId="@accountId"
             PlanName="Pro"
             AccentColor="#6366f1" />

#Parameters

Parameter

Type

Required

Description

Project

string

Yes

Your Pixault project identifier

AccountId

Guid?

No

User's account ID for context

PlanName

string?

No

Current billing plan name

AccentColor

string

No

Theme color (default: #6366f1)

#Features

  • Floating toggle — A button in the corner of the page opens and closes the chat panel

  • Suggested queries — Pre-configured prompts for common tasks:

    • "List my images"

    • "Show my transform presets"

    • "What plugins are available?"

  • Markdown rendering — Responses include formatted text with inline code, bold, and links

  • Multi-turn conversation — The agent maintains conversation history within a session

  • Context-aware — The agent knows your project, account, and plan for relevant responses

#What the Agent Can Do

The embedded agent has access to 13 tools for managing your Pixault account:

#Image Operations

Capability

Example Prompt

List images

"Show me my recent uploads"

View metadata

"What's the metadata for img_01JKABC?"

Update metadata

"Set the author to Jane Smith on img_01JKABC"

Delete images

"Delete img_01JKABC"

Build URLs

"Generate a 600x400 WebP thumbnail for img_01JKABC"

#Transform Management

Capability

Example Prompt

List presets

"What transform presets do I have?"

Create presets

"Create a transform called 'card' — 300x200, cover fit, 85 quality"

Delete presets

"Remove the 'old-gallery' transform"

#Plugin Management

Capability

Example Prompt

Browse marketplace

"What plugins are available?"

Check activation

"Which plugins are active for my project?"

Activate plugins

"Enable the image filter plugin"

Deactivate plugins

"Turn off background removal"

#Setup

#Register Services

Add the Pixault agent to your DI container:

builder.Services.AddPixaultAgent(options =>
{
    options.ApiKey = builder.Configuration["Claude:ApiKey"];
    options.Model = "claude-sonnet-4-5-20250929";
});

#Add the Component

Place PixaultChat in your layout or page. It renders as a fixed-position floating panel that doesn't affect page layout:

@* In your layout file *@
<main>
    @Body
</main>
<PixaultChat Project="@project"
             AccountId="@currentUser.AccountId"
             PlanName="@currentUser.PlanName" />

#Architecture

The agent uses a tool-use loop pattern:

User Message
    → Claude API (v1/messages)
    → Tool calls (list_images, build_image_url, etc.)
    → Execute tools against Pixault SDK
    → Return results to Claude
    → Claude generates response
    → Display in chat panel

The loop runs for a maximum of 10 iterations per user message, allowing the agent to chain multiple tool calls to complete complex tasks. For example, "Create a thumbnail transform and show me a preview URL for my latest image" would:

  1. Call save_transform to create the preset

  2. Call list_images to find the latest image

  3. Call build_image_url to generate the preview URL

  4. Return a formatted response with all results