はじめに
最近、AIを使ったアプリケーション開発が当たり前になってきましたね。ただ、LLMを単体で使うだけでなく、複数のAI処理を組み合わせてワークフローとして構築したい、という場面が増えてきたと思います。
そこで今回紹介するのが「FlowGram.ai」というフレームワーク。ByteDance(TikTokの会社ですね)が開発している、AIワークフロー構築のためのオープンソースツールです。GitHubで7000以上のスターを獲得していて、個人的にはかなり注目しています。
FlowGram.aiとは
FlowGram.aiは、AIワークフロープラットフォームを構築するためのフレームワークです。いわゆるノードベースのビジュアルエディタで、ノードを配置して線でつなぐだけでワークフローが作れる、というやつですね。
正直なところ、似たようなツールは他にもあるんですが、FlowGram.aiの特徴は「フレームワーク」として提供されている点。つまり、自分のアプリケーションに組み込んで、独自のAIワークフロービルダーを作れるんですよ。これ、意外と需要あると思うんですよね。
特徴・メリット
1. 2種類のキャンバスレイアウト
フリーレイアウトキャンバス ノードを自由に配置して、フリーフォームの線で接続するタイプ。直感的で、複雑なワークフローも柔軟に表現できます。
固定レイアウトキャンバス 分岐やループなどの複合ノードに対応したレイアウト。構造化されたワークフローを作りたい場合に便利ですね。
2. フォームエンジン
各ノードの設定画面を簡単に実装できるフォームエンジンが組み込まれています。バリデーション、エラーハンドリング、連動機能などが最初から用意されているので、開発の手間がかなり省けます。
3. 変数管理システム
ワークフロー内でのデータの流れを管理する仕組みが充実しています。スコープ制約、変数の構造チェック、型推論などをサポートしていて、複雑なワークフローでもデータの整合性を保ちやすいですね。
4. 組み込みコンポーネント
LLMノード、条件分岐、コードエディタなど、よく使うコンポーネントがあらかじめ用意されています。これをベースにカスタマイズすれば、開発のスタートダッシュが切りやすいです。
インストール方法
インストールは非常にシンプル。npxでテンプレートプロジェクトを作成できます。
npx @flowgram.ai/create-app@latest
テンプレートを選択する画面が出てくるので、「Free Layout Demo」を選ぶのがおすすめです。
プロジェクトが作成されたら、以下のコマンドで起動。
cd demo-free-layout
npm install
npm start
ブラウザで http://localhost:3000 にアクセスすれば、デモ画面が表示されます。個人的には、この手軽さがポイント高いですね。
基本的な使い方
ノードの定義
FlowGram.aiでは、ノードをTypeScriptで定義します。
import { defineNode } from '@flowgram.ai/core';
const LLMNode = defineNode({
type: 'llm',
label: 'LLM処理',
inputs: {
prompt: {
type: 'string',
label: 'プロンプト',
required: true,
},
},
outputs: {
response: {
type: 'string',
label: '応答',
},
},
async execute(inputs) {
// LLM APIを呼び出す処理
const response = await callLLMAPI(inputs.prompt);
return { response };
},
});
ワークフローの構築
定義したノードを組み合わせて、ワークフローを構築します。
import { createWorkflow } from '@flowgram.ai/core';
const workflow = createWorkflow({
nodes: [
{ id: 'input', type: 'input', position: { x: 0, y: 0 } },
{ id: 'llm1', type: 'llm', position: { x: 200, y: 0 } },
{ id: 'output', type: 'output', position: { x: 400, y: 0 } },
],
edges: [
{ source: 'input', target: 'llm1' },
{ source: 'llm1', target: 'output' },
],
});
ビジュアルエディタの埋め込み
Reactコンポーネントとして提供されているので、自分のアプリケーションに簡単に埋め込めます。
import { WorkflowEditor } from '@flowgram.ai/react';
function App() {
return (
<WorkflowEditor
workflow={workflow}
onSave={(data) => {
console.log('保存されたワークフロー:', data);
}}
/>
);
}
実践的なユースケース
実際に採用されているプロダクト
FlowGram.aiは、すでに複数のプロダクションサービスで採用されています。
- Coze(扣子): ByteDanceのAIチャットボット構築プラットフォーム
- Feishu(飛書)ローコードプラットフォーム: 業務ワークフローの構築
- NNDeploy: MLモデルのデプロイワークフロー
- Certimate: 証明書管理の自動化
これだけの実績があると、安心して使えますよね。
想定されるユースケース
個人的に考えている活用シーンとしては、
-
社内向けAIツールのワークフロービルダー
- 非エンジニアでもAI処理のワークフローを組めるようにしたい場合
-
SaaSプロダクトの自動化機能
- ユーザーに自分でワークフローをカスタマイズしてもらう機能
-
データパイプラインの構築ツール
- ETL処理やデータ加工のフローを視覚的に構築
といったところでしょうか。
まとめ
FlowGram.aiは、AIワークフロー構築の「フレームワーク」として、かなり使い勝手が良さそうです。
- ByteDanceが開発・メンテナンスしている安心感
- MITライセンスで商用利用OK
- 実際のプロダクションで採用実績あり
- ドキュメントが英語・中国語で整備されている
30代になって思うのは、こういうフレームワークを使って効率よく開発することの重要性ですね。ゼロから作るより、いいものを組み合わせるほうが時短になるし、品質も担保しやすい。
AIワークフローを自分のプロダクトに組み込みたい、という方はぜひ試してみてください。公式ドキュメントも充実しているので、そこまで迷わず始められると思います。
公式サイト: https://flowgram.ai GitHub: https://github.com/bytedance/flowgram.ai