Blazor.AI.Visualization 1.0.0

<p align="center"> <img src="https://raw.githubusercontent.com/DotNetVibeCoderz/Vibe_Components/main/Blazor.AI/assets/icon-512.png" width="112" alt="Blazor.AI logo: a kawung batik motif" /> </p>

<h1 align="center">Blazor.AI</h1>

<p align="center"> <b>AI components for Blazor</b>: smart forms, copilots, cited document chat, agents, decision engines, machine learning, reinforcement learning, Hugging Face models and biology workbenches.<br/> .NET 10 · Microsoft.Extensions.AI · works offline without keys </p>

<p align="center"><i>Dibuat oleh Gravicode Studios dipimpin oleh Kang Fadhil.</i></p>

<p align="center"><a href="#english">English</a> · <a href="#bahasa-indonesia">Bahasa Indonesia</a></p>

English

Why Blazor.AI

• 109 ready-made components across 11 NuGet packages, all styled by one theme (light and dark).
• Any model: OpenAI, Azure OpenAI, Anthropic Claude, Gemini, Mistral, Cohere, DeepSeek, Grok, Hugging Face, Ollama, llama.cpp, LocalGen, any OpenAI-compatible endpoint, ONNX and in-process Hugging Face transformers. Every component also runs on a built-in offline simulated model, so demos and tests need no keys.
• Computation stays deterministic. Machine learning, statistics, rules, chemistry and sequence analysis run in .NET (GraviLearn, GraviFrame, RLNet, Biotech.Net). The LLM plans and explains; it does not invent the numbers.
• Guardrails built in: PII redaction, content moderation, audit trail, AES-GCM encrypted prompt store and API-key vault, role-based access.

Packages

Quick start

dotnet new install Blazor.AI.Templates
dotnet new blazorai -n MyAiApp --provider openai --agents true

Or add it to an existing Blazor Web App:

dotnet add package Blazor.AI.Components

// Program.cs
builder.Services.AddBlazorAI(builder.Configuration)       // providers from the "BlazorAI" section
    .AddSimulated()                                       // offline fallback
    .AddOpenAI(builder.Configuration["OpenAI:Key"]!, "gpt-5-mini");
builder.Services.AddBlazorAIComponents();

<link rel="stylesheet" href="_content/Blazor.AI.Components/blazor-ai.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

<form>
    <input name="name" /> <input name="email" /> <input name="company" />
    <SmartPaste />
</form>

<AiChat Title="Support" SystemPrompt="You help customers of Contoso." />

Configuration

{
  "BlazorAI": {
    "DefaultProvider": "azure",
    "Providers": [
      { "Name": "simulated", "Kind": "Simulated" },
      { "Name": "azure", "Kind": "AzureOpenAI", "Endpoint": "https://<resource>.openai.azure.com/", "Model": "gpt-5-mini" },
      { "Name": "claude", "Kind": "Anthropic", "Model": "claude-sonnet-5-5" },
      { "Name": "local", "Kind": "Ollama", "Endpoint": "http://localhost:11434", "Model": "llama3.2" }
    ],
    "Guardrails": { "RedactPii": true, "ModerateContent": true, "Audit": true }
  }
}

Put keys in user-secrets or environment variables (BlazorAI__Providers__1__ApiKey), never in appsettings.json. Cloud providers without a key are skipped, and the simulated model stays available.

Gallery

The gallery app shows every component with a live preview and copy-ready code.

dotnet run --project samples/Blazor.AI.Gallery    # http://localhost:5180

Smart components	Agents
RAG and knowledge	Machine learning
Decision intelligence	Biology (dark theme)
Visual analytics	Hugging Face

Documentation

• Getting started
• Providers and configuration
• Component catalogue
• Security and guardrails

Build and test

dotnet build Blazor.AI.slnx
dotnet test tests/Blazor.AI.Tests
dotnet pack Blazor.AI.slnx -c Release -o artifacts

Requires the .NET 10 SDK. MIT licensed.

Bahasa Indonesia

Kenapa Blazor.AI

• 109 komponen siap pakai dalam 11 paket NuGet, dengan satu tema yang konsisten (terang dan gelap).
• Model apa saja: OpenAI, Azure OpenAI, Anthropic Claude, Gemini, Mistral, Cohere, DeepSeek, Grok, Hugging Face, Ollama, llama.cpp, LocalGen, endpoint kompatibel OpenAI, ONNX, dan transformer Hugging Face lokal. Semua komponen juga jalan dengan model simulasi offline, jadi demo dan tes tidak butuh API key.
• Perhitungan tetap deterministik. Machine learning, statistik, aturan bisnis, kimia, dan analisis sekuens dihitung di .NET (GraviLearn, GraviFrame, RLNet, Biotech.Net). LLM merencanakan dan menjelaskan, bukan mengarang angka.
• Guardrail bawaan: redaksi PII, moderasi konten, jejak audit, penyimpanan prompt dan brankas API key terenkripsi AES-GCM, serta kontrol akses berbasis peran.

Paket

Mulai cepat

dotnet new install Blazor.AI.Templates
dotnet new blazorai -n AplikasiAI --provider openai --agents true

Atau tambahkan ke aplikasi Blazor Web App yang sudah ada:

dotnet add package Blazor.AI.Components

// Program.cs
builder.Services.AddBlazorAI(builder.Configuration)       // provider dari bagian "BlazorAI"
    .AddSimulated()                                       // cadangan offline
    .AddOpenAI(builder.Configuration["OpenAI:Key"]!, "gpt-5-mini");
builder.Services.AddBlazorAIComponents();

<form>
    <input name="nama" /> <input name="email" /> <input name="perusahaan" />
    <SmartPaste />
</form>

<AiChat Title="Layanan pelanggan" SystemPrompt="Kamu membantu pelanggan Toko Nusantara. Jawab dalam Bahasa Indonesia." />

Simpan API key di user-secrets atau variabel lingkungan (BlazorAI__Providers__1__ApiKey), jangan di appsettings.json. Provider cloud tanpa key akan dilewati, dan model simulasi tetap tersedia.

Galeri

Aplikasi galeri menampilkan setiap komponen dengan pratinjau langsung dan contoh kode yang siap disalin.

dotnet run --project samples/Blazor.AI.Gallery    # http://localhost:5180

Dokumentasi

• Memulai
• Provider dan konfigurasi
• Katalog komponen
• Keamanan dan guardrail

Build dan tes

dotnet build Blazor.AI.slnx
dotnet test tests/Blazor.AI.Tests

Butuh .NET 10 SDK. Lisensi MIT.

<p align="center">Made by <b>Gravicode Studios</b>, led by <b>Kang Fadhil</b> · <i>Dibuat oleh Gravicode Studios dipimpin oleh Kang Fadhil</i></p>