【C#実践アプリ開発ラボ】Dify x C#連携② ～C#からDify APIを呼び出す方法（HttpClient・BlazorでAIチャット実装）～

$apiKey="【APIキー】"
Invoke-RestMethod `
    -Uri "https://api.dify.ai/v1/chat-messages" `
    -Method POST `
    -Headers @{ Authorization = "Bearer $apiKey" } `
    -ContentType "application/json" `
    -Body (@{
        inputs = @{}
        query = "DateTime型の使い方を知りたいです"
        response_mode = "blocking"
        user = "abc-123"
    } | ConvertTo-Json)

event           : message
task_id         : 22da2c0d-b7d1-4034-807e-75abba059c16
id              : 28b50cff-8d09-487f-85d3-9668491bd14a
message_id      : 28b50cff-8d09-487f-85d3-9668491bd14a
conversation_id : bbb2dbb6-0d77-48cc-82fe-80720bb7d70a
mode            : advanced-chat
answer          : おすすめの記事：
                  【タイトル】(21) 日時マスターガイド～DateTime/DateTimeOffset/TimeProviderまで～【サマータイムの正確な扱い】
                  【記事URL】https://prota-p.com/csharp_basic21_datetime/
metadata        : @{annotation_reply=; retriever_resources=System.Object[]; usage=}
created_at      : 1762577988

using System.Net.Http.Json;
using System.Text.Json.Serialization;

// 環境変数からAPIキーを取得（未設定時は例外）
var apiKey = Environment.GetEnvironmentVariable("DIFY_API_KEY")
    ?? throw new InvalidOperationException("環境変数 DIFY_API_KEY が設定されていません");

const string apiUrl = "https://api.dify.ai/v1/chat-messages";

using var httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {apiKey}");

// 会話IDを保持して文脈を継続
string? conversationId = null;

while (true)
{
    Console.Write("\nあなた: ");
    var input = Console.ReadLine();
    if (string.IsNullOrWhiteSpace(input)) break;

    var request = new DifyRequest
    {
        Query = input,
        ConversationId = conversationId,
        User = "console-user"
    };

    // JSON自動変換でリクエスト送信・レスポンス受信
    var response = await httpClient.PostAsJsonAsync(apiUrl, request);
    var result = await response.Content.ReadFromJsonAsync<DifyResponse>();

    conversationId = result?.ConversationId;
    Console.WriteLine($"\nAI: {result?.Answer}");
}

// リクエスト用データ定義
record DifyRequest
{
    [JsonPropertyName("inputs")]
    public object Inputs { get; init; } = new { };

    [JsonPropertyName("query")]
    public required string Query { get; init; }

    [JsonPropertyName("response_mode")]
    public string ResponseMode { get; init; } = "blocking";

    [JsonPropertyName("conversation_id")]
    public string? ConversationId { get; init; }

    [JsonPropertyName("user")]
    public required string User { get; init; }
}

// レスポンス用データ定義
record DifyResponse
{
    [JsonPropertyName("conversation_id")]
    public string? ConversationId { get; init; }

    [JsonPropertyName("answer")]
    public string? Answer { get; init; }
}

あなた: 日時型の扱いを知りたい。

AI: おすすめの記事：
【タイトル】(21) 日時マスターガイド～DateTime/DateTimeOffset/TimeProviderまで～【サマータイムの正確な扱い】
【記事URL】https://prota-p.com/csharp_basic21_datetime/

あなた: HelloWorldアプリをまず作りたい

AI: おすすめの記事：
【タイトル】(1) Visual Studioで開発 ～HTMLでHello World～
【記事URL】https://prota-p.com/csharp_basic1_helloworld/

@page "/"
@rendermode InteractiveServer
@using DifyBlazorApp.Services
@inject DifyApiService DifyApi

<PageTitle>Dify Chat</PageTitle>

<div class="chat-container">
    <h3>AI チャット</h3>

    <div class="messages-area">
        @* メッセージリストの動的レンダリング *@
        @foreach (var message in _messages)
        {
            <div class="message @(message.IsUser ? "user-message" : "ai-message")">
                <div class="message-header">
                    @(message.IsUser ? "👤 あなた" : "🤖 AI")
                </div>
                <div class="message-body">
                    @message.Text
                </div>
            </div>
        }
        @* 処理中インジケーター *@
        @if (_isProcessing)
        {
            <div class="message ai-message">
                <div class="message-header">🤖 AI</div>
                <div class="message-body">
                    <span class="typing-indicator">考え中...</span>
                </div>
            </div>
        }
    </div>

    <div class="input-area">
        @* 双方向バインディング: oninput イベントでリアルタイム更新 *@
        <input @bind="_inputText"
               @bind:event="oninput"
               @onkeydown="HandleKeyDown"
               placeholder="メッセージを入力..."
               disabled="@_isProcessing"
               class="message-input" />
        @* 計算プロパティによる disabled 状態の制御 *@
        <button @onclick="SendMessage"
                disabled="@IsSendDisabled"
                class="send-button">
            送信
        </button>
    </div>
</div>

@code {
    private List<ChatMessage> _messages = new();
    private string _inputText = string.Empty;
    private bool _isProcessing = false;
    private string? _conversationId = null; // 会話の継続性を保持

    // ユーザー識別子（今回は固定値）
    private const string UserId = "blazor-user";

    // 計算プロパティ: 送信ボタンの有効/無効を判定
    private bool IsSendDisabled => _isProcessing || string.IsNullOrWhiteSpace(_inputText);

    private async Task SendMessage()
    {
        if (string.IsNullOrWhiteSpace(_inputText) || _isProcessing)
            return;

        var userMessage = _inputText;
        _messages.Add(new ChatMessage { Text = userMessage, IsUser = true });
        _inputText = string.Empty;
        _isProcessing = true;

        try
        {
            // 外部 API 呼び出し（依存性注入されたサービス利用）
            var response = await DifyApi.SendMessageAsync(
                userMessage,
                _conversationId,
                UserId);

            // 会話 ID を保持して会話の継続性を維持
            _conversationId = response?.ConversationId;

            if (!string.IsNullOrEmpty(response?.Answer))
            {
                _messages.Add(new ChatMessage
                {
                    Text = response.Answer,
                    IsUser = false
                });
            }
        }
        catch (Exception ex)
        {
            _messages.Add(new ChatMessage
            {
                Text = $"エラーが発生しました: {ex.Message}",
                IsUser = false
            });
        }
        finally
        {
            _isProcessing = false;
        }
    }

    // キーボードイベントハンドリング: Enter キーで送信
    private async Task HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" && !e.ShiftKey)
        {
            await SendMessage();
        }
    }

    // ネストクラス: required プロパティによる初期化の強制
    private class ChatMessage
    {
        public required string Text { get; init; }
        public required bool IsUser { get; init; }
    }
}

using System.Text.Json.Serialization;

namespace DifyBlazorApp.Services
{
    public class DifyApiService
    {
        private readonly HttpClient _httpClient;
        private readonly string _apiKey;
        private const string ApiUrl = "https://api.dify.ai/v1/chat-messages";

        public DifyApiService(HttpClient httpClient)
        {
            _httpClient = httpClient;
            
            _apiKey = Environment.GetEnvironmentVariable("DIFY_API_KEY")
                ?? throw new InvalidOperationException("環境変数 DIFY_API_KEY が設定されていません");

            _httpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}");
        }

        public async Task<DifyResponse?> SendMessageAsync(
            string query,
            string? conversationId,
            string userId)
        {
            var request = new DifyRequest
            {
                Query = query,
                ConversationId = conversationId,
                User = userId
            };

            var response = await _httpClient.PostAsJsonAsync(ApiUrl, request);
            response.EnsureSuccessStatusCode();

            return await response.Content.ReadFromJsonAsync<DifyResponse>();
        }
    }

    // リクエスト用データ定義
    public record DifyRequest
    {
        [JsonPropertyName("inputs")]
        public object Inputs { get; init; } = new { };

        [JsonPropertyName("query")]
        public required string Query { get; init; }

        [JsonPropertyName("response_mode")]
        public string ResponseMode { get; init; } = "blocking";

        [JsonPropertyName("conversation_id")]
        public string? ConversationId { get; init; }

        [JsonPropertyName("user")]
        public required string User { get; init; }
    }

    // レスポンス用データ定義
    public record DifyResponse
    {
        [JsonPropertyName("conversation_id")]
        public string? ConversationId { get; init; }

        [JsonPropertyName("answer")]
        public string? Answer { get; init; }
    }
}

using DifyBlazorApp.Components;
using DifyBlazorApp.Services;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// HttpClient と DifyApiService の登録
builder.Services.AddHttpClient<DifyApiService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();


app.UseAntiforgery();

app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();