Blazor.AI.Bio 1.2.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, biology workbenches and AI-powered 3D scenes.<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

• 229 ready-made components across 13 NuGet packages, all styled by one theme (light and dark), including 48 Three.js components built on a reusable Scene3D engine and 72 real-time computer-vision components on MediaPipe.NET.
• 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

3D

Blazor.AI.ThreeD renders declarative C# scenes with a bundled Three.js engine (no CDN). Its rigged guide robot, fish and robot arm were generated with Rodin and rigged and animated in Blender; the 2-D art was generated with Nano Banana 2.

Talking avatar with lip sync	Virtual tour guide (Borobudur)
Smart city digital twin	AI world builder
Executive KPI sphere	3D molecules from SMILES

Computer vision

Blazor.AI.MediaPipe runs MediaPipe Tasks natively in .NET on the server: the browser streams camera, video, image or HTTP-stream frames and draws the returned landmarks, boxes and masks. Sample photos were generated with Nano Banana 2, so every demo works without a webcam.

Face landmarks and blendshapes	Gesture recognition
Yoga trainer	Object detection
Vision copilot grounded in detections	Elderly fall detection

Documentation

• Getting started
• Providers and configuration
• Component catalogue
• Security and guardrails
• 3D components
• Computer vision

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

• 229 komponen siap pakai dalam 13 paket NuGet, dengan satu tema yang konsisten (terang dan gelap), termasuk 48 komponen Three.js di atas engine Scene3D yang bisa dipakai ulang dan 72 komponen computer vision real-time di atas MediaPipe.NET.
• 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

Computer vision

Blazor.AI.MediaPipe menjalankan MediaPipe Tasks secara native di .NET pada server: browser mengirim frame dari kamera, video, gambar atau stream HTTP lalu menggambar landmark, kotak dan mask yang dikembalikan. Foto contoh dibuat dengan Nano Banana 2, jadi setiap demo tetap jalan tanpa webcam.

Landmark wajah dan blendshape	Pengenalan gesture
Pelatih yoga	Deteksi objek
Vision copilot berbasis deteksi	Deteksi lansia jatuh

Dokumentasi

• Memulai
• Provider dan konfigurasi
• Katalog komponen
• Keamanan dan guardrail
• Komponen 3D
• Computer vision

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>