第 1 回: エディタツアー (Getting Started)
Griptape Nodes へようこそ！ このチュートリアルでは、強力なビジュアルワークフローツールである Griptape Nodes の基本をガイドします。アプリケーションの起動方法、インターフェースの操作、ノードの追加と接続、そして最初の AI エージェントの実行方法を学びます。このガイドを終える頃には、以降のチュートリアルを進めるために必要な基礎知識が身につきます。
今回学習する内容
このチュートリアルでは、以下のトピックを扱います：
- Griptape Nodes の起動
- ランディングページからワークフローへの移動
- Griptape Nodes エディタの基本インターフェースの理解
- ワークスペースへのノードの追加
- ノード同士の接続ルールの理解
- エージェントの実行
Griptape Nodes の起動
Griptape Nodes を起動するには、ターミナルを開いて以下のいずれかのコマンドを実行します：
griptape-nodes
または短縮形：
gtn
コマンドを実行すると、ブラウザが自動的に開き、https://nodes.griptape.ai が表示されます。自動で開かない場合は、ターミナルに表示されたリンクを Ctrl+クリック（Mac では Cmd+クリック）してブラウザで開いてください。もちろん、ブラウザのブックマークに登録してアクセスすることも可能です。
ヒント
快適に学習を進めるために、ブラウザウィンドウを 2 つ左右に並べて配置することをお勧めします。一方にこのチュートリアルを表示し、もう一方で Griptape Nodes のセッションを開いて作業します。
ランディングページ
ブラウザが開くと、Griptape Nodes のランディングページが表示されます。このページには、Griptape Nodes のさまざまな機能を紹介するいくつかのテンプレートワークフローが用意されています。自身でワークフローを保存し始めると、それらが新しい順にここに表示されるようになります。
これらのサンプルワークフローは Griptape Nodes の機能を学ぶための素晴らしいリソースですが、まずは「白紙の状態（ゼロから）」始めてみましょう。
白紙から新しいワークフローを作成する
ランディングページで、"Create from scratch"（新規作成）タイルを見つけてクリックします。これにより、ワークフローを自由に構築できる空のワークスペースが開きます。
Griptape Nodes のインターフェースに親しむ
ワークフローエディタが開いたら、インターフェースの全体像を確認してみましょう：
ライブラリ
最初に最も注目すべきエリアは、左側のパネルにあるノードライブラリです。上部には Create Nodes（ノード作成）セクションがあります。このパネルには、Griptape Nodes に標準でバンドルされているすべての標準ノードが格納されています。各ノードはそれぞれ特定の機能を担っています。Griptape Nodes に慣れていくにつれて、これらのノードの動作や、それらを組み合わせて強力な自動化を作成する方法を理解できるようになります。
ワークスペースへのノードの追加
ノードを作成する最も素早い方法を紹介します。エディタ内でのすべての追加オプションについては ノード操作ガイド を、スクリプトからノードを作成する方法については Retained Mode を参照してください。
ドラッグ＆ドロップ: 左パネルのノードをクリックしたまま保持し、ワークスペース上にドラッグしてドロップします。
ドラッグ＆ドロップ
Tab または Shift+A: フローエディタ上でカーソルを置いた状態で Tab または Shift+A を押すと、検索フィールドが表示されます。作成したいノード名を入力して Enter を押すとノードが生成されます。
Tab または Shift+A による検索
ノードを追加した後は、以下の操作が行えます：
- クリック＆ドラッグでワークスペース上の位置を変更
- パラメータ値や動作の編集
- 他のノードとの接続
ノードの接続
上述した最初の方法（ライブラリからワークスペースへのドラッグ＆ドロップ）を使って、以下の 3 つのノードを作成してみましょう。
-
Agent（agents > Agent）
- LLM（OpenAI ChatGPT や Anthropic Claude など）と対話するエージェントノードです。
- サイドバーで
agentsカテゴリを開きます。 - Agent ノードをワークスペースにドラッグ＆ドロップして作成します。
表記の簡略化
ドキュメント内では簡潔にするため、これを
( カテゴリ > ノード名 )と表記します。上記の Agent ノードであれば( agents > Agent )と略記します。次の 2 つのノードも同様の手順で作成してみてください。 -
FloatInput（number > FloatInput）
- 小数点を含む数値（float）を入力するためのノードです。
-
TextInput（text > TextInput）
- テキスト文字列を入力するためのノードです。
2 つの入力ノードのポートから Agent の各ポートへドラッグして、接続を試してみましょう。複数の組み合わせを試してみると、すべての接続が成功するわけではないことがわかります。
これは、パラメータのデータ型に互換性がある場合にのみ直接接続できるというルールがあるためです：
- TextInput ノードはテキスト (text) を出力するため、テキストを受け入れる Agent のパラメータに接続できます。
- FloatInput ノードは小数 (float) を出力しますが、Agent ノードには小数を受け入れられるパラメータが存在しません。
FloatInput をどこにも接続できなくても心配いりません。まさにそれを理解するためのステップです。このノードは、すべてのパラメータが互いに接続できるわけではないことを実演するためにあえて配置しました。FloatInput ノード自体は非常に便利ですが、このワークフロー内の他のノードとは互換性がないというだけです。
プロのヒント
互換性を判断する視覚的なガイドとして、ポートの色を活用してください。同じ色同士のポートは互いに接続できます。
エージェントを実行してみる
ここで一度キャンバスを白紙に戻し、実際の AI との対話を体験してみましょう：
- File メニューから New を選択します。
- 新しいワークフローで、お好みの方法で Agent ノードを 1 つ作成します。
-
エージェントのプロンプト入力フィールドに質問を入力します。「Who trained you?（あなたは誰によって学習されましたか？）」と入力して AI サービスを確認するか、通常のチャットボットに尋ねるような質問を入力します。
-
エージェントの右上隅にある再生アイコン（Run ボタン）をクリックしてノードを実行します。
-
テキストが生成されたら、出力を確認します。
これだけで、大規模言語モデル (LLM) との対話が完了しました。デフォルト設定のまま実行した場合、OpenAI ChatGPT (GPT-4.1) が呼び出されています。
この体験は Web 上で ChatGPT や Claude を直接使うのと似ているように思えるかもしれませんが、Griptape Nodes の真の力は、LLM を他の多様なコンポーネントと並べて組み合わせたときに発揮されます。左側のライブラリパネルをもう一度見渡して、利用可能な他のノードの数々を眺めてみてください。まだ始まったばかりです。これから探索できる可能性は無限に広がっています！
まとめ
このチュートリアルでは、以下の内容を学びました：
- Griptape Nodes の起動方法
- ランディングページからワークフローを作成する手順
- Griptape Nodes エディタの基本インターフェース
- ワークスペースへの最初のノードの追加方法
- ノード間の接続互換性のルール
- エージェントの実行手順
次のステップ
次のレッスン 第 2 回: 画像プロンプト生成 では、いよいよ本格的な画像生成の世界へと足を踏み入れます！