[React/TS対応] 視覚的構築から即時API化へ：FlowiseAI導入ガイドとサンプルコード

FlowiseAI/Flowise

今日は、あなたの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」の真髄です。