LangFlowファースト・ステップ的な のバックアップ(No.5)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• ソース を表示
• LangFlowファースト・ステップ的な は削除されています。
  • 1 (2025-06-17 (火) 08:45:47)
  • 2 (2025-06-17 (火) 11:03:54)
  • 3 (2025-06-17 (火) 14:47:07)
  • 4 (2025-06-17 (火) 17:10:04)
  • 5 (2025-06-17 (火) 18:49:51)
  • 6 (2025-06-18 (水) 08:52:55)
  • 7 (2025-06-19 (木) 09:30:24)
  • 8 (2025-06-19 (木) 16:19:22)
  • 9 (2025-06-22 (日) 18:44:09)

---

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る
  • LangFlowファースト・ステップ的な
  • LangFlowセカンド・ステップ的な?

目次 †

概要 †

• ３つのクイック・スタート、６つのサンプルフロー
• 大凡、プロンプトフロー作成ツールで出来る事が確認できる。

作成の手順

詳細 †

準備 †

インストール †

アップグレード †

uv pip install langflow -U

起動 †

uv run langflow run

クイック・スタート１ †

Basic Prompting

テンプレート選択 †

• Templates → Get started → Basic Prompting
• 参考：https://docs.langflow.org/starter-projects-basic-prompting

素描き手順 †

以下は、Basic Promptingテンプレートを素描きする場合の手順を示している。

• ノードの配置
  コンポーネントサイドバーで...

• InputsをクリックしChat Inputコンポーネントを選択してキャンバスにドラッグ。
  （Chat Inputコンポーネントは、チャットへのユーザー入力を受け付ける。）

• Promptsをクリックし Promptコンポーネントを選択してキャンバスにドラッグ。
  （Promptコンポーネントは、ユーザー入力とユーザー定義のプロンプトを組み合わせる。）

• OutputをクリックしChat Outputコンポーネントを選択してキャンバスにドラッグ。
  （Chat Outputコンポーネントは、フローの出力をチャットに出力。）

• ModelsをクリックしOpenAIコンポーネントを選択してキャンバスにドラッグ。
  （OpenAIモデルコンポーネントは、ユーザー入力とプロンプトをOpenAI APIに送信し、レスポンスを受け取る。）

• エッジの配置
  コンポーネントを接続し相互連携させる（左側で入力を受け取り、右側で出力を送信。
  接続ポートにマウスポインターを合わせると、コンポーネントが受け入れるデータ型が表示される。
  

• Chat Inputコンポーネント（Messageポート）を OpenAIモデル コンポーネント（入力ポート）に接続
• Promptコンポーネント（Prompt Messageポート）を OpenAIモデル コンポーネント（System Messageポート）に接続
• OpenAIモデル コンポーネント（Messageポート）をChat Outputコンポーネント（Textポート）に接続

• その他の設定

• OpenAIコンポーネントの「OpenAI APIキー」フィールドにAPIキー（＝認証情報）を追加
  （グローバル変数（「設定」（地球儀） → 「グローバル変数」 → 「新規追加」）も便利）

• Promptコンポーネントにプロンプ​​トを追加するには 「テンプレート」フィールドをクリックし、プロンプトを入力。

  Answer the user as if you were a GenAI expert, enthusiastic about helping them get started building something fresh.
  (GenAI の専門家であるかのようにユーザーに答え、ユーザーが何か新しいものを構築し始めるのを熱心に支援します。)

[Playground]で実行 †

[Playground]をクリックしてチャット セッションを開始、クエリを入力、ボットが応答することを確認。

クイック・スタート２ †

Vector Store RAG

テンプレート選択 †

• Templates → Get started → Vector Store RAG
• 参考：https://docs.langflow.org/starter-projects-vector-store-rag

作成の手順 †

以下は、Vector Store RAGテンプレートをBasic Promptingテンプレートから作成する場合の手順を示している。

• ノードの配置
  コンポーネントサイドバーで...

• Load Dataフロー

• Dataをクリックし、Fileコンポーネントを選択してキャンバスにドラッグ。
  （Fileコンポーネントはローカルマシンからファイルを読み込む）

• ProcessingをクリックしSplit Textコンポーネントを選択してキャンバスにドラッグ。
  （Split Textコンポーネントは、読み込まれたテキストを小さなチャンクに分割）

• Vector Storesをクリックし、Astra DBコンポーネントを選択してキャンバスにドラッグ。
  （Astra DB ベクターストアコンポーネントはAstra DBデータベースに接続）

• Embeddingsをクリックし、OpenAI Embeddingsコンポーネントを選択してキャンバスにドラッグ。
  （OpenAI Embeddingsコンポーネントは、埋め込みを生成し、VDB内のベクターデータと比較。）

• Retrieverフロー

• Vector Storesをクリックし、Astra DBコンポーネントを選択してキャンバスにドラッグ。
  （Astra DB ベクターストアコンポーネントはAstra DBデータベースに接続）

• Embeddingsをクリックし、OpenAI Embeddingsコンポーネントを選択してキャンバスにドラッグ。
  （OpenAI Embeddingsコンポーネントは、埋め込みを生成し、VDB内のベクターデータと比較。）

• ProcessingをクリックしParserコンポーネントを選択してキャンバスにドラッグ。
  （Parserコンポーネントは、Astra DBコンポーネントからのデータをプレーンテキストに変換）

• エッジの配置

• Load Dataフロー
  以下のようにコンポーネント間の接続を行う。

  File → Split Text → Astra DB
                          ↑
                    OpenAI Embeddings

• Retrieverフロー

• Chat InputコンポーネントをOpenAIコンポーネントから切断（接続線をダブルクリック）

• Promptコンポーネントを変更して、{question}と{context}の両方の変数を追加。

  {context}
  
  ---
  
  Given the context above, answer the question as best as possible.
  
  Question: {question}
  
  Answer: 

• 以下のようにコンポーネント間の接続を行う。

       ┌───────────(Message)───────────────┐
       │                                                             ↓
       │                                                         (question)
  Chat Input →(Message)→ Astra DB → Parser →(DataFrame)→ (context) Prompt → OpenAI → Chat Output
                             ↑
                       OpenAI Embeddings

• その他の設定

• FileコンポーネントでRAGに与える外部情報Fileをアップロード

• Astra DBを設定する手順は、Chroma DBに置き換え設定。

• コンポーネントサイドバーでVector Storesをクリックし、
  Chroma DBコンポーネントを選択してキャンバスにドラッグ。

• Astra DBと同様に、Chroma DBコンポーネントを接続

• Chroma のパラメタ設定
  ・collection_name（ベクトル保存先のコレクション名）に「例：my_docs」
  ・persist_directory（永続化のためのディレクトリパス）に「例：./chroma_db」

[Playground]で実行 †

• Load Dataフロー
  Astra DBコンポーネントの[▶](コンポーネントの実行)をクリックして、データを読み込み。

• Retrieverフロー
  [Playground]をクリックしてチャット セッションを開始、クエリを入力、ボットが応答することを確認。

クイック・スタート３ †

Simple Agent

テンプレート選択 †

• Templates → Get started → Simple Agent
• 参考：https://docs.langflow.org/starter-projects-simple-agent

作成の手順 †

• Agentノードに
  • OpenAI WebAPIのキーを設定
  • InstructionsにAgentへの指示が設定されている。

    You are a helpful assistant that can use tools to answer questions and perform tasks.
    (あなたは、ツールを使用して質問に答えたり、タスクを実行したりできる便利なアシスタントです。)

• 「Wikipedia API」ツールを追加、
  • Toolモードに変更。
  • 言語をen→jpに変更。
  • Agentノードと接続する。

[Playground]で実行 †

[Playground]をクリックしてチャット セッションを開始、以下のクエリを入力、ボットが応答することを確認。

• Calculatorツールが接続されているので、
  • Chat Input：「2+2=」
  • Chat Output：「The result of ( 2 + 2 ) is ( 4 ).」

• URLツールが接続されているので、
  • Chat Input：「以下のURLの内容を要約せよ」と「URL」等の入力
  • Chat Output：「URLのテキストを要約したもの」になる。

• Wikipedia APIツールが接続されているので、
  • Chat Input：XXXXについて教えて下さい（マイナーだがWikipediaに解説記事があるもの）。
  • Chat Output：「XXXX - Wikipediaのテキストを要約したもの」になる。

• （URLツールの接続を外し）Calculator＋Wikipedia APIツールが接続されている状態で、

• Chat Input：
  日本の2021年と2024年の夏季オリンピックの金メダル数の合計は？

• Chat Output：
  以下のような情報を出力するが、Wikipediaのretrieveに情報は含まれず値は間違っている。

  日本の2021年と2024年の夏季オリンピックの金メダル数の合計は以下の通りです。
  2021年（東京オリンピック）：日本は金メダル27個を獲得しました。
  2024年（パリオリンピック）：日本は金メダル22個を獲得しました。
  したがって、合計は 27個 + 22個 = 49個 です。
  【答え】
  日本の2021年と2024年の夏季オリンピックの金メダル数の合計は49個です。

• （Wikipedia APIツールの接続を外し）Calculator＋URLツールが接続されている状態で、

• Chat Input：
  日本の2021年と2024年の夏季オリンピックの金メダル数の合計は？
  https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?LangFlowのURLComponentのテスト

• Chat Output：
  手短で、且つ、正しい情報を取得するため、以下のような情報を出力する。

  日本の2021年と2024年の夏季オリンピックの金メダル数の合計は「47個」です。（2021年：27個、2024年：20個）

• Terminal Output：

  Invoking: `fetch_content_text` with `{'urls': ['https://dotnetdevelopmentinfrastructure.osscons.jp:443/index.php?LangFlow%E3%81%AEURLComponent%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88']}`
  ...
  Invoking: `evaluate_expression` with `{'expression': '27+20'}`

※ ターミナル出力からツールが使用されていることを確認する。

※ 多くのツールの接続を試す：https://docs.langflow.org/agents-tool-calling-agent-component

サンプルフロー１ †

• Memory chatbot（Basic PromptingにMemoryComponent?を追加したもの）
• MemoryComponent?はサポート切れのレガシーで、既定でコンポーネントサイドバーから追加できなくなっている。

テンプレート選択 †

• Templates → All templates → Memory Chatbot
• 参考：https://docs.langflow.org/memory-chatbot

作成の手順 †

• ノード＆エッジ
  テンプレートから

• 設定
  • OpenAIノードにOpenAI WebAPIのキーを設定
  • PromptコンポーネントのTemplateフィールド

    You are a helpful assistant that answers questions.
    Use markdown to format your answer, properly embedding images and urls.
    History:
    {memory}

[Playground]で実行 †

サンプルフロー２ †

Document QA（指定したDocument Fileをプロンプトに追加）

テンプレート選択 †

• Templates → All templates → Document Q&A
• 参考：https://docs.langflow.org/document-qa

作成の手順 †

• ノード＆エッジ
  テンプレートから

• 設定
  • OpenAIノードにOpenAI WebAPIのキーを設定
  • Fileノードに読み込むFileを設定

[Playground]で実行 †

[Playground]をクリックしてチャット セッションを開始、クエリを入力、ボットが応答することを確認。

サンプルフロー３ †

Blog writer（指定のURLの情報から（Instruction：Blogを）を生成する。）

テンプレート選択 †

• Templates → All templates → Blog Writer
• 参考：https://docs.langflow.org/blog-writer

作成の手順 †

• ノード＆エッジ
  テンプレートから

• 設定
  • OpenAIノードにOpenAI WebAPIのキーを設定
  • URLノードに参照するURLを設定

• PromptコンポーネントのTemplateフィールド

  ### Reference:
  {references}
  ### Instruction:
  {instructions}

• TextInputComponent?コンポーネントのTextフィールド
  （ブログの雰囲気を変える場合など）必要に応じてカスタマイズする。

  Use the references above for style to write a new blog/tutorial about Langflow and AI. Suggest non-covered topics.
  （LangflowとAIに関する新しいブログやチュートリアルを書く際は、上記の参考文献を参考にしてください。また、まだ取り上げていないトピックを提案してください。）

• 設定後、必要に応じてエッジを再接続する。

[Playground]で実行 †

[Playground]をクリックしてチャット セッションを開始、ボットが応答することを確認。

サンプルフロー４ †

Financial report parser（やってることは、文章をレコード化して文字列にパースして出力する）

テンプレート選択 †

• Templates → All templates → Financial Report Parser
• 参考：https://docs.langflow.org/financial-report-parser

作成の手順 †

• ノード＆エッジ
  テンプレートから

• 設定
  • OpenAIノードにOpenAI WebAPIのキーを設定
  • StructuredOutput?ノードのOutput Schemaフィールドにレコード定義が設定されている。
  • ParserノードのTemplateフィールドにレコードをどのようにパースするか？が設定されている。

※ ココでのレコードはDataFrame?と言うPandas DataFrameDataFrame?クラスのカスタム拡張になっている。

[Playground]で実行 †

サンプルフロー５ †

• Sequential tasks agent（Agentとフローで繋げた、比較的規模の大きなAgentシステム）
• Tavily AI 検索ツールでクエリを調査、YFinanceツールで株式データを分析、計算機ツールで株式が賢明な投資かどうかを判断

テンプレート選択 †

• Templates → All templates → Sequential Tasks Agents
• 参考：https://docs.langflow.org/sequential-agent

作成の手順 †

• ノード＆エッジ
  テンプレートから

• 設定

• 各Agentノード
  • OpenAI WebAPIのキーを設定
  • InstructionsにAgentへの指示が設定されている。

• 各Agentノード
  AIを活用したWeb検索を実行するTavily AI 検索ツールにWebAPIのキーを設定

[Playground]で実行 †

[Playground]をクリックしてチャット セッションを開始、クエリを入力、ボットが応答することを確認。

サンプルフロー６ †

• Travel planning agent（Agentとフローで繋げた、比較的規模の大きなAgentシステム）
• 都市選択Agentで最適な訪問先を選択、地域エキスパートAgentで情報収集、旅行コンシェルジュAgentでプランを作成

テンプレート選択 †

• Templates → All templates → Travel Planning Agents
• 参考：https://docs.langflow.org/travel-planning-agent

作成の手順 †

• ノード＆エッジ
  テンプレートから

• 設定

• 各Agentノード
  • OpenAI WebAPIのキーを設定
  • InstructionsにAgentへの指示が設定されている。
    ・You are a helpful assistant that can use tools to answer questions and perform tasks.（あなたは、ツールを使用して質問に答えたり、タスクを実行したりできる便利なアシスタントです。）
    ・You are a knowledgeable Local Expert with extensive information about the selected city, its attractions, and customs. Your goal is to provide the BEST insights about the city. Compile an in-depth guide for travelers, including key attractions, local customs, special events, and daily activity recommendations. Focus on hidden gems and local hotspots. Your final output should be a comprehensive city guide, rich in cultural insights and practical tips.（あなたは、選ばれた都市、その魅力、そして習慣について幅広い知識を持つ、知識豊富なローカルエキスパートです。あなたの目標は、その都市について最高の洞察を提供することです。主要な観光スポット、地元の習慣、特別なイベント、そして日々のアクティビティのおすすめなど、旅行者向けの詳細なガイドを作成してください。隠れた名所や地元の人気スポットに焦点を当ててください。最終的な成果物は、文化的な洞察と実用的なヒントが豊富な、包括的な都市ガイドとなるはずです。）
    ・You are an Amazing Travel Concierge, a specialist in travel planning and logistics with decades of experience. Your goal is to create the most amazing travel itineraries with budget and packing suggestions for the city. Expand the city guide into a full 7-day travel itinerary with detailed per-day plans. Include weather forecasts, places to eat, packing suggestions, and a budget breakdown. Suggest actual places to visit, hotels to stay, and restaurants to go to. Your final output should be a complete expanded travel plan, formatted as markdown, encompassing a daily schedule, anticipated weather conditions, recommended clothing and items to pack, and a detailed budget.（あなたは、数十年の経験を持つ旅行計画とロジスティクスのスペシャリスト、アメイジング・トラベル・コンシェルジュです。あなたの目標は、予算とパッキングの提案を含む、都市の最高の旅行プランを作成することです。都市ガイドを、詳細な日ごとのプランを含む7日間の旅行プランに拡張してください。天気予報、レストラン、パッキングの提案、予算の内訳を含めてください。実際に訪れるべき場所、宿泊するホテル、レストランを提案してください。最終的な成果物は、毎日のスケジュール、予想される天候、推奨される服装と持ち物、そして詳細な予算を含む、マークダウン形式で作成された完全な拡張旅行プランです。）
    

• 各Agentノード
  GoogleSearchAPIツールにWebAPIのキーを設定

[Playground]で実行 †

[Playground]をクリックしてチャット セッションを開始、クエリを入力、ボットが応答することを確認。

参考 †

公式 †

langflow

Welcome to Langflow †

https://docs.langflow.org/

Get Started †

• Install Langflow
  https://docs.langflow.org/get-started-installation
• Quickstart
  https://docs.langflow.org/get-started-quickstart

Starter Projects †

• Basic Prompting
  https://docs.langflow.org/starter-projects-basic-prompting
• Vector Store RAG
  https://docs.langflow.org/starter-projects-vector-store-rag
• Simple agent
  https://docs.langflow.org/starter-projects-simple-agent

Tutorials †

• Blog Writer
  https://docs.langflow.org/blog-writer
• Document QA
  https://docs.langflow.org/document-qa
• Memory Chatbot
  https://docs.langflow.org/memory-chatbot
• Financial report parser
  https://docs.langflow.org/financial-report-parser
• Sequential tasks agent
  https://docs.langflow.org/sequential-agent
• Travel planning agent
  https://docs.langflow.org/travel-planning-agent

     

Site admin: TechInfoOfMicrosoftTech

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.052 sec.