Web Dashboard - Vizra ADK Documentation

🎯 What's the Web Dashboard?

The web dashboard is a Livewire-powered interface that ships with the Vizra ADK package. It provides real-time monitoring, interactive testing, and management capabilities for your agents—all through your browser! 🌐

📊 Real-time Monitoring

Live agent stats, system health, and activity tracking

💬 Interactive Testing

Chat with your agents directly from the browser

🧪 Evaluation Runner

Run and visualize evaluation results with ease

🚀 Quick Commands

Copy-ready artisan commands for rapid development

🚀 Accessing the Dashboard

By default, the web dashboard is accessible at the /vizra route of your Laravel application:

php artisan vizra:dashboard          # View dashboard URL
php artisan vizra:dashboard --open   # Open in browser automatically

The dashboard URL will be displayed after running the installation command:

php artisan vizra:install

# Output:
# ✅ Vizra SDK installation complete!
#
# 🎯 Dashboard: http://your-app.test/vizra

🧩 Dashboard Components

📊 Main Dashboard

The main dashboard (Dashboard::class) provides an overview of your Vizra ADK installation:

•
Package Information: Current version and configuration status
•
Agent Registry: Live display of all registered agents
•
Quick Commands: Copy-ready artisan commands for common tasks
•
System Status: Health indicators and configuration checks

💬 Chat Interface

The chat interface (ChatInterface::class) allows interactive testing of your agents:

// Accessible at /vizra/chat
Route::get('/chat', ChatInterface::class)->name('chat');

Features include:

✓ Real-time streaming responses
✓ Session management
✓ Message history
✓ Agent selection dropdown

🧪 Evaluation Runner

The evaluation runner (EvalRunner::class) provides a visual interface for running and monitoring evaluations:

// Accessible at /vizra/eval
Route::get('/eval', EvalRunner::class)->name('eval-runner');

⚙️ Configuration

The web dashboard can be configured in your config/vizra.php file:

'routes' => [
    'web' => [
        'enabled' => env('VIZRA_WEB_ENABLED', true),
        'prefix' => 'vizra',
        'middleware' => ['web'],
    ],
],

🚫 Disabling the Dashboard

To disable the web dashboard in production:

# Disable web dashboard
VIZRA_WEB_ENABLED=false

🔗 Custom Route Prefix

To change the dashboard URL prefix:

'routes' => [
    'web' => [
        'prefix' => 'ai-dashboard', // Now accessible at /ai-dashboard
    ],
],

🔐 Adding Authentication

To protect the dashboard with authentication:

'routes' => [
    'web' => [
        'middleware' => ['web', 'auth'], // Requires authentication
    ],
],

🗺️ Dashboard Routes

The web dashboard registers the following routes:

Route	Component	Description
`/vizra`	`Dashboard::class`	Main dashboard overview
`/vizra/chat`	`ChatInterface::class`	Interactive agent testing
`/vizra/eval`	`EvalRunner::class`	Evaluation runner interface

🔧 Technical Implementation

The dashboard is built using Laravel Livewire 3.0 for reactive components:

📦 Service Provider Registration

The dashboard components are automatically registered in the AgentServiceProvider:

// Livewire component registration
Livewire::component('vizra::dashboard', Dashboard::class);
Livewire::component('vizra::chat-interface', ChatInterface::class);
Livewire::component('vizra::eval-runner', EvalRunner::class);

// Route loading
if (config('vizra.routes.web.enabled', true)) {
    Route::middleware(config('vizra.routes.web.middleware', ['web']))
        ->prefix(config('vizra.routes.web.prefix', 'vizra'))
        ->group(__DIR__.'/../../routes/web.php');
}

🎨 Assets and Styling

The dashboard uses modern web technologies:

•
Tailwind CSS: For responsive styling
•
Alpine.js: For client-side interactivity
•
Livewire: For server-side reactivity

🚀 Extending the Dashboard

You can extend the dashboard by creating custom Livewire components:

<?php

namespace App\Livewire;

use Livewire\Component;
use Vizra\VizraADK\Services\AnalyticsService;

class CustomAgentMetrics extends Component
{
    public $metrics = [];

    public function mount()
    {
        $analytics = app(AnalyticsService::class);
        $this->metrics = $analytics->getMetrics();
    }

    public function render()
    {
        return view('livewire.custom-agent-metrics');
    }
}

Then register your custom route:

use App\Livewire\CustomAgentMetrics;

Route::get('/vizra/metrics', CustomAgentMetrics::class)
    ->name('vizra.metrics');

💻 Dashboard Command

The vizra:dashboard command provides quick access:

class DashboardCommand extends Command
{
    protected $signature = 'vizra:dashboard {--open : Open in browser}';

    public function handle()
    {
        $url = url(config('vizra.routes.web.prefix', 'vizra'));

        $this->info("🎯 Vizra Dashboard: {$url}");

        if ($this->option('open')) {
            $this->openInBrowser($url);
        }
    }
}

🔒 Security Considerations

⚠️

Important Security Notes

• Always protect the dashboard with authentication in production
• Consider IP whitelisting for sensitive environments
• Disable the dashboard entirely if not needed (VIZRA_WEB_ENABLED=false)
• Use HTTPS in production environments

🎉 Ready to Explore?

Now that you understand the web dashboard, dive deeper into:

🤖 Learn about Agents ⚡ Explore Commands 🧪 Master Evaluations