はじめに

担当: 松井（入社4年目🐱）

今回は、Syncfusionの Chat UIコンポーネント を触ってみました。

前回までは SfGrid のような、業務アプリでよく使う一覧画面系のコンポーネントを見ていました。

一覧画面は実務でかなり大事です。
ただ、画面だけ見たときのインパクトは少し地味かもしれません。

一方で今回のChat UIは、表示した瞬間に

お、ちゃんとチャット画面っぽい！

となるタイプのコンポーネントでした。

最近は、AIチャット、社内問い合わせボット、カスタマーサポートチャットなど、チャット形式のUIを見る機会がかなり増えています。

普段から見慣れているUIなので、技術に詳しくない人にも「これ何に使うものか」が伝わりやすいのが面白いところです。

今回は、SyncfusionのChat UIを使って、Blazorでチャットっぽい画面をどれくらい簡単に作れるのか を見ていきます。

Chat UIコンポーネントとは

SyncfusionのChat UIは、Blazorでチャット形式の画面を作るためのコンポーネントです。

チャット画面というと、ただメッセージを並べるだけに見えるかもしれません。

でも実際に作ろうとすると、意外と考えることがあります。

自分の発言と相手の発言を左右で分けて表示する
メッセージを吹き出しとして見せる
発言者名や送信時刻を表示する
入力欄をチャット画面の下に配置する
会話の流れが追いやすい見た目にする

このあたりを全部自前で作ると、思ったより時間がかかりそうです。

Chat UIを使うと、そういった チャット画面らしい見た目や操作感 をコンポーネントとして扱えます。

Chat UIはAIそのものではない

ここは最初に整理しておきたいポイントです。

Chat UIは、AIの回答を自動で作ってくれるコンポーネントではありません。

あくまで、チャット画面を作るためのUIコンポーネント です。

例えばAIチャットを作りたい場合は、ざっくり次のような構成になります。

ユーザーがメッセージを入力
↓
Chat UIで入力を受け取る
↓
バックエンドやAIサービスに送る
↓
返ってきた回答をChat UIに表示する

つまり、Chat UIが担当するのは主に画面側です。

AIの回答生成、メッセージの保存、リアルタイム通信などは別で考える必要があります。

自分も最初は、

Chat UIってAIチャットまで全部やってくれるのかな？

と思ったのですが、どちらかというと チャット体験の見た目を作る部品 と考えると分かりやすかったです。

まずは最小構成で表示してみる

シンプルなチャットウィンドウを表示しているだけですが、吹き出しやメッセージがあるだけで、一気にチャット画面らしく見えます。

table やカード表示で履歴を並べるよりも、会話の流れが分かりやすいのが面白いところです。

完成画面というより、今回は 最小構成で画面だけ出してみる ところから始めます。

前提

この記事では、Blazor Web Appのプロジェクトが作成済みの状態から進めます。

環境は以下を想定しています。

Blazor Web App
Syncfusion.Blazor.InteractiveChat 33.2.7
Syncfusion.Blazor.Themes 33.2.7

パッケージをインストールする

まず、Chat UIを使うために必要なNuGetパッケージを追加します。

Visual Studioで追加する場合は、プロジェクトを右クリックして 「NuGet パッケージの管理」 を開きます。

検索欄で以下を検索してインストールします。

Syncfusion.Blazor.InteractiveChat
Syncfusion.Blazor.Themes

今回はバージョン 33.2.7 を使います。

パッケージマネージャーコンソールで追加する場合は、以下のように書けます。

Install-Package Syncfusion.Blazor.InteractiveChat -Version 33.2.7
Install-Package Syncfusion.Blazor.Themes -Version 33.2.7

必要な設定を追加する

Components/_Imports.razor に名前空間を追加します。

Components/_Imports.razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.InteractiveChat

次に、Program.cs にSyncfusionのサービス登録を追加します。

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

最後に、Blazor Web Appでは Components/App.razor にテーマCSSとscriptを追加します。

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

ここまでできたら、Chat UIを表示する準備は完了です。

Chat UIを表示してみる

今回は、社内問い合わせチャットっぽいサンプルを作ってみます。

Components/Pages/ChatSample.razor

@page "/chat-sample"

<h3>社内問い合わせチャット</h3>

<div style="height: 500px; width: 400px;">
    <SfChatUI ID="chatUser" User="CurrentUserModel" Messages="ChatUserMessages"></SfChatUI>
</div>

@code {
    private static UserModel CurrentUserModel = new()
    {
        ID = "user-1",
        User = "松井"
    };

    private static UserModel SupportUserModel = new()
    {
        ID = "support-1",
        User = "サポート担当"
    };

    private List<ChatMessage> ChatUserMessages = new()
    {
        new ChatMessage
        {
            Text = "勤怠申請の修正はどこからできますか？",
            Author = CurrentUserModel,
            Timestamp = new DateTime(2026, 5, 19, 10, 0, 0)
        },
        new ChatMessage
        {
            Text = "メニューの「申請一覧」から対象の申請を開くと修正できます。",
            Author = SupportUserModel,
            Timestamp = new DateTime(2026, 5, 19, 10, 1, 0)
        },
        new ChatMessage
        {
            Text = "ありがとうございます！確認してみます。",
            Author = CurrentUserModel,
            Timestamp = new DateTime(2026, 5, 19, 10, 2, 0)
        }
    };
}

実行すると、社内問い合わせ風の会話が表示されます。

例えば、1つ目のメッセージはこの部分です。

new ChatMessage
{
    Text = "勤怠申請の修正はどこからできますか？",
    Author = CurrentUserModel,
    Timestamp = new DateTime(2026, 5, 19, 10, 0, 0)
}

このコードを見ると、

Text がメッセージ本文
Author が発言者
Timestamp が送信時刻

という関係が分かりやすいです。

そして、それが画面上では吹き出しとして表示されます。

ただのテキストを並べるだけだと少し味気ないですが、チャット形式になると一気に「会話している感」が出ます。

この分かりやすさは、Chat UIならではだと思いました。

どこが面白いと感じたか

Chat UIを触ってみて、個人的に面白いと感じたのは、技術的な説明をしなくても画面の意味が伝わりやすい ところです。

GridやChartももちろん便利ですが、初心者に説明するときは

これはデータを一覧表示するための部品です

のような説明が必要になります。

一方でChat UIは、画面を見ただけで

あ、チャット画面だ

と分かります。

特に最近は、AIチャットや問い合わせボットのようなUIに触れる機会が多いので、技術に詳しくない人でもイメージしやすいです。

Chat UIでできそうなこと

今回のサンプルでは固定のメッセージを表示しただけですが、実際にはいろいろな場面で使えそうです。

使い方	使えそうな場面
社内問い合わせチャット	勤怠申請、経費精算、アカウント関連などの問い合わせを会話形式で表示する
AIチャット風UI	Azure OpenAIなどの回答をChat UIに表示して、AIチャット画面として見せる
サポート履歴の表示	問い合わせ対応のやり取りを時系列の会話として見せる
FAQボット風UI	よくある質問を選択肢や会話の流れで案内する
相談フォームのチャット化	フォーム入力を1問ずつ会話形式で進める

最初からAI連携やリアルタイム通信まで作らなくても、よくある質問やサポート履歴をチャット形式で見せるだけで、かなり分かりやすくなりそうです。

通常の表形式で履歴を並べるより、誰がいつ何を言ったかが追いやすいので、問い合わせ系の画面とは相性がよさそうだと感じました。

実務で使うなら考えたいこと

実務で使う場合は、UIだけではなく周辺の仕組みも考える必要があります。

例えば、以下のような点です。

観点	具体的に考えること
メッセージ保存	会話履歴をDBに保存するのか、一時的な表示だけにするのか
リアルタイム反映	SignalRなどを使って相手の発言を即時反映するのか
会話の管理	ユーザーごと、問い合わせごとにスレッドを分けるのか
AI連携	入力内容をどのタイミングでAIサービスに送るのか
セキュリティ	個人情報や機密情報を送信・保存してよいかを制御するのか

Chat UIは見た目を作るコンポーネントなので、実際のアプリにするにはデータ保存や通信部分も必要になります。

ただ、UI部分をコンポーネントに任せられると、アプリとして作りたい体験の部分に集中しやすくなると感じました。

今回は扱わなかったこと

今回はコンポーネント紹介がメインなので、以下は扱いませんでした。

SignalRを使ったリアルタイムチャット
AIサービスとの連携
メッセージ送信時のイベント処理
テンプレートを使った見た目のカスタマイズ
DBへの保存

このあたりは、別の記事で1つずつ試していくと面白そうです。

個人的には、次は AIサービスと組み合わせて、簡単な社内FAQチャット風にする ところまでやってみたいです。

まとめ

今回は、SyncfusionのChat UIコンポーネントを紹介しました。

触ってみて感じたのは、画面を見た瞬間に使い道をイメージしやすいコンポーネント だということです。

Chat UI自体はAIの回答を作るものではありませんが、AIサービスや問い合わせシステムと組み合わせることで、かなり今っぽい画面が作れます。

まずは固定メッセージを表示するだけでも雰囲気が出るので、Blazorでチャットっぽい画面を作ってみたい方は試してみると面白いと思います。

これからBlazorやSyncfusionを触る方の参考になればうれしいです！