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

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

• バックアップ一覧
• ソース を表示
• 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

クイック・スタート１ †

テンプレート選択 †

• 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]をクリックしてチャット セッションを開始、クエリを入力、ボットが応答することを確認。

クイック・スタート２ †

テンプレート選択 †

• 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]をクリックしてチャット セッションを開始、クエリを入力、ボットが応答することを確認。

クイック・スタート３ †

テンプレート選択 †

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

作成の手順 †

• AgentノードにOpenAI WebAPIのキーを設定

• 「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 → Blog Writer
• 参考：https://docs.langflow.org/blog-writer

作成の手順 †

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

• 設定
  • LLMノードに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

テンプレート選択 †

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

作成の手順 †

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

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

[Playground]で実行 †

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

サンプルフロー３ †

Blog writer

テンプレート選択 †

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

作成の手順 †

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

• 設定
  • LLMノードに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.

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

[Playground]で実行 †

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

サンプルフロー４ †

Financial report parser

テンプレート選択 †

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

作成の手順 †

[Playground]で実行 †

サンプルフロー５ †

Sequential tasks agent

テンプレート選択 †

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

作成の手順 †

[Playground]で実行 †

サンプルフロー６ †

Travel planning agent

テンプレート選択 †

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

作成の手順 †

[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
  
• Document QA
  
• Memory Chatbot
  
• Sequential tasks agent
  
• 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.044 sec.