AI Assistant

The Moka.Blazor.Json.AI package adds an AI-powered chat panel that understands your JSON data. Ask questions, summarize documents, analyze structure, generate schemas, transform data, and run queries — all with streaming responses and selection-aware context.

Installation

dotnet add package Moka.Blazor.Json.AI

Setup

1. Register services

// Program.cs
builder.Services.AddMokaJsonViewer();
builder.Services.AddMokaJsonAi(); // Default: LM Studio at localhost:1234

2. Add the components

@using Moka.Blazor.Json.Components
@using Moka.Blazor.Json.AI.Components

<MokaJsonViewer @ref="_viewer" Json="@myJson" />
<MokaJsonAiPanel Viewer="_viewer" />

@code {
    private MokaJsonViewer _viewer = null!;
    private string myJson = """{"users":[{"name":"Alice","age":30}]}""";
}

Providers

OpenAI-compatible (default)

Works with LM Studio, vLLM, or any OpenAI API-compatible server:

builder.Services.AddMokaJsonAi(options =>
{
    options.Endpoint = "http://localhost:1234/v1"; // default
    options.DefaultModel = "local-model";
});

Ollama

builder.Services.AddMokaJsonAi(options =>
{
    options.Provider = AiProvider.Ollama;
    options.Endpoint = "http://localhost:11434"; // default
    options.DefaultModel = "llama3.2";
});

ONNX Runtime GenAI (embedded)

Run AI models fully in-process with no external server. Requires the companion package:

dotnet add package Moka.Blazor.AI.Onnx

using Moka.Blazor.AI.Onnx.Extensions;

builder.Services.AddMokaJsonAi(); // Register JSON AI services
builder.Services.AddMokaAiOnnx(@"C:\models\phi-3.5-mini-instruct-onnx");

Hardware acceleration variants:

• Microsoft.ML.OnnxRuntimeGenAI — CPU
• Microsoft.ML.OnnxRuntimeGenAI.Cuda — NVIDIA CUDA
• Microsoft.ML.OnnxRuntimeGenAI.DirectML — DirectML (Windows)

Custom IChatClient

Bring your own Microsoft.Extensions.AI.IChatClient:

builder.Services.AddMokaJsonAi(myCustomChatClient);

Quick Actions

The panel includes configurable quick action buttons:

Chat Styles

Three visual styles are available, switchable from the settings gear:

Set the default via the ChatStyle parameter:

<MokaJsonAiPanel Viewer="_viewer" ChatStyle="ChatStyle.Classic" />

Settings

Click the gear icon to access runtime settings:

• Model — switch the active model name
• Chat Style — Bubble, Classic, or Compact
• Temperature — 0.0 (precise) to 2.0 (creative)
• Max Context — characters of JSON context sent to the model (500–100,000)
• Stream Responses — toggle streaming vs. batch responses

Context Menu Integration

Add an "Ask AI" option to the JSON viewer's right-click context menu:

<MokaJsonViewer @ref="_viewer" Json="@json" ContextMenuActions="_contextActions" />
<MokaJsonAiPanel @ref="_aiPanel" Viewer="_viewer" />

@code {
    private MokaJsonViewer _viewer = null!;
    private MokaJsonAiPanel _aiPanel = null!;
    private IReadOnlyList<MokaJsonContextAction>? _contextActions;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && _aiPanel is not null)
        {
            _contextActions = [_aiPanel.CreateAskAiContextAction()];
            StateHasChanged();
        }
    }
}

Right-clicking any node shows an "Ask AI" action at the bottom of the context menu. Clicking it sends the node's path and data to the AI for analysis.

You can also call AskAboutNode programmatically:

await _aiPanel.AskAboutNode("/users/0/name");

Features

• Streaming — responses appear token-by-token with a typing indicator
• Stop/cancel — stop generation mid-stream
• Edit & re-send — click the pencil icon on any user message to edit and re-send from that point
• Copy — copy assistant responses to clipboard
• Markdown — assistant responses render full markdown (code blocks, tables, lists, etc.)
• Selection context — the "Selection" button sends the currently selected JSON subtree
• Token & timing stats — estimated tokens and response time shown per message
• Dark mode — inherits theme from the JSON viewer

Parameters

MokaJsonAiPanel

Public Methods

Scoped Context

You can scope the AI to specific data instead of the full document. This is useful for large JSON files or when comparing multiple objects.

Single node scope

// Focus AI on a specific subtree
_aiPanel.ScopeToNode("/users/0");

// Ask about it — context only includes that node
await _aiPanel.AskAboutNode("/users/0");

// Return to full document context
_aiPanel.ClearScope();

Multi-source scope

Scope the AI to multiple JSON objects simultaneously for comparison or cross-analysis:

<MokaJsonViewer @ref="_viewer1" Json="@_customerJson" />
<MokaJsonViewer @ref="_viewer2" Json="@_orderJson" />
<MokaJsonAiPanel @ref="_aiPanel" Viewer="_viewer1" />

@code {
    private void ScopeToBoth()
    {
        _aiPanel.AddSource("Customer", _customerJson);
        _aiPanel.AddSource("Order", _orderJson);
    }
}

When multiple sources are added, the AI receives them labeled by name:

[2 data sources provided]

--- Customer ---
{ "id": "cust_482", "name": "Sarah Chen", ... }

--- Order ---
{ "orderId": "ORD-2026-1847", "customerId": "cust_482", ... }