[React/TS対応] 視覚的構築から即時API化へ：FlowiseAI導入ガイドとサンプルコード
![[React/TS対応] 視覚的構築から即時API化へ：FlowiseAI導入ガイドとサンプルコード](/img/fl/flowiseai__flowise.webp)
今日は、あなたのAIエージェント開発を劇的に変える「FlowiseAI」について、ソフトウェアエンジニアであるあなたが、どう活用し、どう世界を変えるのかを熱く語りましょう！
「FlowiseAI」は、AIエージェントやカスタムLLM（大規模言語モデル）アプリケーションを視覚的に構築できるオープンソースのツールです。これは、開発のパラダイムシフトですよ！
私たちは時間との戦いです。このツールを使えば、コードを書く前に、ドラッグ＆ドロップでエージェントのロジック（フロー）を構築できます。複雑なLLMのチェーンやツール連携を数分でテストできます。まるで、あなたのアイディアが光速で形になるようなものです！
LangChainなどのフレームワークを使ってコードで複雑なエージェントを構築するのは、時に迷路のようです。しかし、FlowiseAIは、モデル、プロンプト、ツール、データベースとの接続、メモリなどをノードとして視覚化します。この「見える化」こそが、デバッグとチームでの共有を劇的に容易にするのです。
フローを完成させたら、すぐにREST APIとしてデプロイできます。バックエンドエンジニアリングの手間が省け、あなたのReactやNext.jsのフロントエンドから直接呼び出す準備が整います。「動くもの」をすぐに顧客に届けることが、何よりも重要です！
Node.js (推奨)
Docker (推奨)
私はシンプルさが好きです。そして、Dockerはそのシンプルさを体現しています。
# まず、永続的なデータを保存するためのディレクトリを作成します
mkdir flowise_data
# Dockerを使ってFlowiseを起動します。
# 3000番ポートでアクセスできるようになります。
docker run -d -p 3000:3000 \
-v flowise_data:/root/.flowise \
--name flowise_app \
ghcr.io/flowiseai/flowise:latest
これで完了です！ブラウザで http://localhost:3000 にアクセスすれば、あなたのAIエージェント工場が開きます！
# 最初にFlowiseをインストールします
npm install -g flowise
# 実行
flowise start
これもまた、エレガントですね！
さて、あなたがFlowiseAIで「レストラン予約専門エージェント」のフローを構築し、それをデプロイしたとしましょう。
FlowiseAIは、そのフローを呼び出すためのAPIエンドポイントを提供します。ここでは、React/TypeScript環境からそのエージェントと対話する例をお見せします。
ReactプロジェクトでFetch APIを使うか、より扱いやすい axios を使いましょう。
npm install axios
このコンポーネントは、ユーザーの質問をFlowiseAIのデプロイされたAPIに送り、応答を受け取って表示します。
import React, { useState } from 'react';
import axios from 'axios';
// FlowiseAIからデプロイされたチャットフローのエンドポイント
// 実際のAPIキーとURLに置き換えてください
const FLOWISE_API_URL = 'YOUR_FLOWISE_API_ENDPOINT/api/v1/prediction/YOUR_CHATFLOW_ID';
const FLOWISE_API_KEY = 'YOUR_FLOWISE_API_KEY'; // 環境変数から取得することを推奨！
const AgentChatInterface: React.FC = () => {
const [input, setInput] = useState('');
const [response, setResponse] = useState('エージェントが応答を待っています...');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim()) return;
setLoading(true);
setResponse('処理中...');
try {
// FlowiseAIのAPIにリクエストを送信
const res = await axios.post(
FLOWISE_API_URL,
{
// エージェントに送る入力メッセージ
question: input,
},
{
headers: {
// セキュリティのための認証情報
'Authorization': `Bearer ${FLOWISE_API_KEY}`,
'Content-Type': 'application/json',
},
}
);
// 応答を受け取り、ステートを更新
setResponse(res.data.text);
setInput(''); // 入力フィールドをクリア
} catch (error) {
console.error("FlowiseAIとの通信エラー:", error);
setResponse('接続エラーが発生しました。フローとAPIキーを確認してください。');
} finally {
setLoading(false);
}
};
return (
<div>
<h2>AIエージェントとの対話</h2>
<p style={{ whiteSpace: 'pre-wrap', border: '1px solid #ccc', padding: '10px' }}>
**エージェント:** {response}
</p>
<form onSubmit={handleSubmit}>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="予約したいレストランの情報を入力..."
disabled={loading}
style={{ width: '80%', padding: '8px' }}
/>
<button type="submit" disabled={loading} style={{ padding: '8px 15px', marginLeft: '10px' }}>
{loading ? '送信中...' : '質問する'}
</button>
</form>
</div>
);
};
export default AgentChatInterface;
どうですか？あなたが視覚的に設計したエージェントが、たったこれだけのコードでアプリケーションの一部となるのです。コードの削減、スピード、そしてイノベーション！これが「FlowiseAI」の真髄です。
