BlazorChat – Get Started

Step 1 — Install BlazorChat

Install the client component from NuGet:

dotnet add package BlazorChat

For production use with SignalR and persistence, you'll also need a BlazorChat.Server package (requires a Commercial License).

Step 2 — Install BlazorChat.Server.SqlServer

The full-stack package includes SQL Server repository implementation and database scripts. No need to implement IChatRepository yourself.

dotnet add package BlazorChat.Server.SqlServer

Step 3 — Export database scripts for DBA review

SQL scripts are embedded in the package. You have two options to access them:

Option A: Export to folder (recommended for DBA review)

Add this line to Program.cs, run your application once to export the scripts, then remove the line.

// Program.cs (TEMPORARY — remove after extracting scripts)

// Temporary — extract scripts for DBA review, then remove this line
BlazorChatSqlServerScripts.ExportToFolder(@"C:\temp\BlazorChatScripts");

var builder = WebApplication.CreateBuilder(args);
// ... rest of your Program.cs

Option B: Retrieve programmatically

For custom deployment automation or CI/CD pipelines:

// Retrieve scripts as in-memory collection
var allScripts = BlazorChatSqlServerScripts.GetAllSqlScripts().ToList();

// Each script has: FileName, SqlContent
foreach (var script in allScripts)
{
    Console.WriteLine($"Executing: {script.FileName}");
    // Execute script.SqlContent against your database
}

After exporting, you'll find these scripts:

• 001_CreateTables.sql — Creates chat.Messages and chat.Reactions tables
• 002_CreateIndexes.sql — Optimizes query performance
• 003_StoredProcedures.sql — CRUD operations (Add, Get, Edit, Delete, Toggle Reactions)

💡 Using an existing database? You can change the database name in the scripts. Simply find/replace BlazorChatDb with your existing database name throughout the SQL files before execution. Make sure to update your connection string in Step 5 accordingly.

DBA-Friendly: Scripts are provided for review so database administrators can inspect, test, and execute them according to your organization's change management process.

Step 4 — Have your DBA execute the scripts

Share the exported scripts with your DBA for review and execution against your target database.

-- Run these in your SQL Server environmenter environment

sqlcmd -S your-server -d BlazorChatDb -i 01-CreateTables.sql
sqlcmd -S your-server -d BlazorChatDb -i 02-CreateIndexes.sql

-- Or execute via SQL Server Management Studio (SSMS)
-- (Replace BlazorChatDb with your database name if using an existing database)

Step 5 — Configure connection string and license

Add your SQL Server connection string and license key to appsettings.json:

// appsettings.json
{
    "ConnectionStrings": {
    "BlazorChatDb": "Server=your-server;Database=BlazorChatDb;Trusted_Connection=True;Encrypt=True;TrustServerCertificate=True;"
    },
    "BlazorChat": {
    "LicenseKey": "your-license-key-here"
    }
}

Security: Never commit license keys to source control. Use Azure Key Vault, user secrets, or environment variables in production.

Step 6 — Register services and map the hub

AddChatServerWithSqlServer() validates your license, registers SignalR, and wires up the SQL Server repository implementation.

// Program.cs
using BlazorChat.Server.Extensions;
using BlazorChat.Server.SqlServer.Extensions; 
using DatabaseLibraryMDS;
using DatabaseLibraryMDS.Interfaces;

// ... other services ...

// SQL Server persistence (replaces in-memory storage)
var dbConnectionString = builder.Configuration.GetConnectionString("BlazorChatDb");

if (string.IsNullOrWhiteSpace(dbConnectionString))
    throw new InvalidOperationException("ConnectionStrings:BlazorChatDb is missing. Add it to User Secrets.");

// Register BlazorChat server (reads license from appsettings "BlazorChat" section)
builder.Services.AddBlazorChatServer(builder.Configuration);

// Override the default in-memory repository with your implementation
builder.Services.AddSingleton<IChatRepository, YourChatRepository>();

// ... other services ...

app.MapBlazorChatHub(); // Maps to /chathub by default

// or if using Authentication
app.MapHub<BlazorChat.Server.Hubs.ChatHub>("/chathub").AllowAnonymous();

Step 7 — Add the widget

The widget auto-connects to the SignalR hub. Just provide ThreadId and ChatSender:

@using BlazorChat.Components
@using BlazorChat.Shared.Models

<ChatWidget ThreadId="release-1.2.3"
            ChatSender="@currentUser"
            ThreadTitle="Release 1.2.3"
            HubUrl="/chathub" />

@code {
    private ChatSender currentUser = new()
    {
        Id          = "user-abc",
        DisplayName = "Alice"
    };
}

Render mode: Works with InteractiveServer, InteractiveWebAssembly, or InteractiveAuto. The widget connects to the SignalR hub via HubUrl from whichever environment it runs in.

WASM note: If your Blazor WebAssembly app is served from a different origin than the hub, set HubUrl to the full URL (e.g. "https://yourserver.com/chathub") and configure CORS on the server.