FlowGram.ai – AIワークフロー構築がだいぶ楽になるフレームワークの話

はじめに

最近、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);
      }}
    />
  );
}