2025年3月22日

React × Databricks Agents でつくる！エンタープライズ向けチャットアプリ in Databricks

によって Wenwen Xie, イヴァン・トルソフ、アンドレ・フルラン・ブエノによる投稿

Archived. This article has not been updated since the publish date above. The dynamic nature of information means that previously accurate content can become outdated or even obsolete over time. Readers are advised to exercise due diligence and cross-check any information found in this blog post before making decisions or adopting any practices based on said information.

Databricks Apps は、インタラクティブなアプリケーションの構築とホスティングに適した強力なプラットフォームです。React は、滑らかで洗練された見た目の、モダンで動的な Web アプリケーションを構築するのに最適なフレームワークです。このプラットフォームに、React ベースのフロントエンドと Agent Bricks Custom Agents を組み合わせることで、開発者は効率的かつインテリジェントなチャットアプリケーションを構築できます。
本ブログでは、Databricks 上でホストされるチャットボットの技術的な実装に焦点を当て、製造業向けのオペレーション管理チャットボットという業界特化型ユースケースを通じて、その可能性を紹介します。

Databricks AppsとDatabricksの統合

アーキテクチャの概要：

ユーザーはクエリをDatabricks Appsに送信し、それをモデルサービングエンドポイントにルーティングします — User sends a query to Databricks Apps, routing it to the model-serving endpoint

Databricks Appsの主要な強み

Databricks Apps は、以下の機能とネイティブに統合されています：

Databricks SQL：大規模データセットの効率的なクエリ実行に対応
Unity Catalog：データガバナンスとアクセス制御を一元管理
Model Serving：機械学習モデルを大規模にデプロイ可能
Serving Endpoints：ML モデルや LLM エージェントへのクエリを効率的に処理
Jobs：ETL パイプラインやワークフローの実行に対応

Databricks Apps を使えば、外部のホスティングインフラは不要です。アプリケーションはプラットフォームに組み込まれたセキュリティ、コンプライアンス、リソース管理機能をそのまま利用できるため、デプロイや運用がよりシンプルになります。

また、Databricks Apps は Dash、Streamlit、Gradio、Flask、FastAPI など幅広いフレームワークをサポートしており、データに富んだアプリケーションから、視覚的に魅力あるアプリケーションまで柔軟に構築できます。

Agent Bricks Custom Agents とは？

Agent Bricks Custom Agents は、開発者が AI エージェント（たとえば RAG（検索拡張生成）で使われるもの）を作成・デプロイ・管理するためのツール群で、Databricks 上で提供されています。このフレームワークは、LangChain や LlamaIndex などのツールと連携し、Unity Catalog などの Databricks の機能を活用してデータガバナンスやツールコールを行います。

開発者は、MLflow を使ってエージェントのログ取得やテスト、挙動のデバッグ、パフォーマンス向上のための改善が可能です。リクエストのログ記録、レスポンスのトークンストリーミング、レビュー用アプリなどの機能により、実際のユースケースに対応した AI エージェントの構築・運用がより容易になります。

ユースケース：製造オペレーション管理チャットボット

製造オペレーション管理（MOM：Manufacturing Operations Management）は、生産プロセスの最適化、効率の向上、そして急速に変化する産業環境における競争力の維持において極めて重要です。

自然言語インターフェースを備えた AI エージェントによるオペレーション管理の需要は、効率向上、意思決定の改善、ユーザー体験の強化といったニーズの高まりにより急速に拡大しています。

Meticulous Research® の最新の調査（ソース）によると、製造業における AI 市場は、2024 年から 2031 年の予測期間中に年平均成長率（CAGR）32.6%で成長し、2031 年には 845 億ドルに達すると予測されています^[1]。この大きな成長は、さまざまな業界において AI 主導のオペレーション管理の重要性がますます認識されていることを示しています。

Databricks チャットボットを導入した製造企業は、ツールコール機能を活用することで、以下のような形で生産マネージャーを支援できます：

ボトルネック分析

使用ツール機能：Databricks SQL を使い、identify_bottleneck_station 関数を通じて最も遅延の原因となっている工程（ステーション）を特定
例：「現在、組立ラインでボトルネックになっているのはどこ？」
応答例：「現在のボトルネックはステーション5で、1サイクルあたり平均15分の遅延が発生しています。」

在庫のトラッキング

使用ツール機能：check_inventory_levels 関数を呼び出し、指定されたステーションのリアルタイムの在庫データを取得
例：「ステーション3に十分な材料はありますか？」
応答例：「ステーション3には、次の5サイクル分の材料があります。」

これらのクエリは、SQL または Python を使って Unity Catalog に関数として簡単に実装することができます。そして、AI エージェントはそれらの関数呼び出しを通じて、データの取得、コードの実行、文脈に基づいた意思決定などを行えるようになります。

ここではツールコール対応のエージェント構築の詳細までは触れませんが、詳しい手順については Databricks Generative AI Cookbook（こちら）を参照してください。

Databricks エージェントのセットアップとツール対応の構成が完了すれば、Databricks 上でモデルサービングエンドポイントとしてデプロイ可能です。このエンドポイントがバックエンドのインターフェースとして機能し、チャットボットなどのフロントエンドアプリケーションからのクエリに対してリアルタイムなインサイトを返すことができます。

エージェントチャットボットのモデル提供エンドポイントがクエリを受け取る — Agent chatbot’s model-serving endpoint to receive queries

こちらはローカル環境で動作しているチャットボットのインターフェースです。後ほど、Databricks Apps へのデプロイ後の動作もご紹介します。

ローカルホストのフロントエンドがユーザーのクエリとレスポンスを表示しています — The localhost front end displaying user’s queries and responses

Databricks Appsの実装

1. フロントエンド：React 使用

React を使ったフロントエンドは、チャットボットへのクエリ送信や応答の可視化を行う、インタラクティブで使いやすいインターフェースを提供します。主な機能には、リアルタイムでのメッセージ表示、クエリ送信、ボット応答の処理、フィードバック付きのインタラクティブな UI、Markdown のサポートなどが含まれます。

以下は、バックエンドにメッセージを送信するフロントエンドのコードです。

フロントエンドコードがバックエンドにメッセージを送信

APIクライアント：AxiosはHTTPリクエストを行うために使用されます。baseURLは、環境（開発または本番）に基づいて動的に設定されます。

HandleSendMessage：
ユーザーの入力を受け取り、それを /api/chat の API エンドポイントに送信し、ユーザーとボットのメッセージ両方をチャット履歴に反映させます。

2. バックエンド：FastAPI 使用

FastAPI を使ったバックエンドは、React フロントエンドと Databricks エージェントの間をつなぐ役割を果たします。ユーザーからのクエリをエージェントのモデルサービングエンドポイントに転送し、応答を取得します。

以下は、ユーザーのクエリを処理するバックエンドのコードです。

ユーザークエリを処理するバックエンドコード

この API エンドポイントは、ユーザーからのメッセージを受け取り、Databricks エージェントのモデルサービングエンドポイントと連携して、タスクに応じた応答を返します。

FastAPI では、サブアプリケーションのマウント順が非常に重要です。リクエストのルーティングの順序がこれによって決まるためです。

app.mount("/api", api_app)

これは /api パスに api_app というサブアプリケーションをマウントしています。
/api で始まるすべてのリクエスト（例：/api/chat）は、このサブアプリケーションにルーティングされます。
これにより、すべての API 関連のリクエストが api_app インスタンスによって処理されることが保証されます。

こちらは、client/build ディレクトリ内の静的ファイルをアプリのルート / にマウントします。
通常これは、コンパイルされたフロントエンドアプリケーション（index.html、JavaScript、CSS、その他の静的アセット）を提供するために使用されます。主要な UI フレームワーク（React、Vue、Svelte など）は、それぞれ Vite、Webpack、esbuild などのバンドラーを使ってこの形式にビルド可能です。
/api で始まらないすべてのリクエストは、この ui_app にルーティングされます。

API の設定とエンドポイント定義：
- このコードでは、FastAPI アプリケーション内に /chat という POST エンドポイントを定義しており、api_app インスタンスの下で動作します。このエンドポイントは、Databricks 上の Databricks エージェントのモデルサービングエンドポイントに接続されています。
依存関係の注入とリクエスト処理：
- このエンドポイントでは、FastAPI の依存性注入（Depends）を使って WorkspaceClient を注入します。WorkspaceClient は Databricks の API と連携するためのクライアントです。
- chat_with_llm 関数は、ユーザーのメッセージを含む ChatRequest を受け取り、それを USER ロールの ChatMessage として整形し、client.serving_endpoints.query メソッドを使ってサービングエンドポイントに送信します。
レスポンスの解析と返却：
- エージェントからの応答は構造化され、ChatResponse としてクライアント側に返されます。

Databricks Appsへのデプロイメント

1. バックエンドの準備

FastAPIのコードをapp.pyファイルに配置します。
requirements.txtで依存関係を定義します:
app.yamlファイルを作成します：

コマンドセクションは、以下の仕様を持つgunicornサーバーの設定を概説しています：

server.app:app:あなたのFastAPIアプリケーションを実行します。
-w 2：2つのワーカープロセスを使用して、着信リクエストを処理します。
uvicorn.workers.UvicornWorker: FastAPIのASGIフレームワークと互換性のあるUvicornワーカーを使用します。

envセクションは、アプリに渡す環境変数を定義するキーと値のペアを指定します^[2]:

name：環境変数の名前。
valueFrom: 外部で定義された値の場合、その値を含むソースの名前。例えば、秘密の名前や、値を含むデータベーステーブルの名前。

環境変数SERVING_ENDPOINT_NAMEをDatabricksリソースモデルサービングエンドポイントagent_MODEL_NAME_FQNにマッピングしています。ここで、MODEL_NAME_FQNはcatalog.db.model_nameのUnity Catalogの三層ネームスペースを表します。

2. フロントエンドの準備

npm run buildでReactアプリをビルドし、静的ファイルを/client/buildに配置します。

ここにファイル構造があります：

3. デプロイメント手順

Databricks Appsを作成します：
Databricksリソースの設定：
app.yaml ファイルの env セクションで定義された機能に合わせて、Databricks のリソースを設定しています。これには、モデルサービングエンドポイント（agent_MODEL_NAME_FQN）などのリソースの構成が含まれます。

下の画像は、チャットボットアプリが正常に作成されたことを示しています：
Sync Files:
アプリのデプロイ:

このコマンドを実行した後、デプロイメントプロセスには数分かかります。正常にデプロイされると、DatabricksアプリのURLが表示され、稼働していることを示します。

あとは、チャットを開始するだけです。
たとえば、以下のように話しかけることができます：

「最近、生産効率が低下しています。ボトルネックを特定し、その効率を確認して、詳細なレポートを作成してください。また、そのレポートを user@email.com にメールで送ってください。さらに、レポートの感情分析もお願いします。」

Databricksアプリがユーザーのクエリとレスポンスを表示 — Databricks Apps displaying user’s query and response

まとめ

Databricks Apps を React や Agent Bricks Custom Agents と組み合わせることで、動的かつインタラクティブなチャットアプリケーションを構築するための強力なソリューションが実現します。Databricks に組み込まれたデータ処理機能、セキュアなモデルサービング、スムーズなデプロイ基盤を活用することで、複雑なクエリにも対応可能な堅牢なシステムを開発できます。

React のフロントエンドと Databricks エージェントの間をつなぐ橋渡しとして FastAPI を使用することで、スムーズな通信が可能になります。Databricks Apps は Flask や Django などの Python 製バックエンドフレームワークにも対応していますが、FastAPI はシンプルで開発者に優しい API を提供している点から採用されました。

この構成により、製造業向けのチャットボットのような現場で役立つ産業ソリューションにも、先進的な AI 機能を組み込むことが可能になります。今後 Databricks プラットフォームがさらに進化することで、こうした統合はより広範なユースケースに対応できるようになり、AI を活用した革新を目指す企業にとって不可欠なツールとなるでしょう。

ソースコードは、GitHub リポジトリをご参照ください。

参考文献：

[1] 2031年までに製造業におけるAI市場は845億ドルに達すると予測されています。出典：
https://www.meticulousresearch.com/pressrelease/294/ai-in-manufacturing-market

[2] Databricksアプリの設定。出典：
https://docs.databricks.com/en/dev-tools/databricks-apps/configuration.html#databricks-apps-configuration

ReactとDatabricksエージェントフレームワークをDatabricks Appsと統合することで、ダイナミックでインタラクティブなチャットアプリケーションを作成するための強力なソリューションを提供します。Databricksの組み込みデータ処理機能、セキュアなモデル提供、効率的なデプロイメントインフラを活用することで、開発者は複雑なクエリを処理する堅牢なシステムを構築することができます。