From 069135d563efcb49fd28ced9a371c9c6cf8929f2 Mon Sep 17 00:00:00 2001
From: April M <36110273+aimurphy@users.noreply.github.com>
Date: Wed, 26 Nov 2025 07:33:55 -0800
Subject: [PATCH] build out chat page
---
docs/docs/_partial-integrate-chat.mdx | 114 ++++++++++++++++++++++++
docs/docs/core-components/chat.mdx | 53 ++++++++---
docs/docs/core-components/ingestion.mdx | 14 ++-
docs/docs/core-components/knowledge.mdx | 2 +-
docs/docs/get-started/quickstart.mdx | 112 +----------------------
5 files changed, 169 insertions(+), 126 deletions(-)
create mode 100644 docs/docs/_partial-integrate-chat.mdx
diff --git a/docs/docs/_partial-integrate-chat.mdx b/docs/docs/_partial-integrate-chat.mdx
new file mode 100644
index 00000000..de3d9a62
--- /dev/null
+++ b/docs/docs/_partial-integrate-chat.mdx
@@ -0,0 +1,114 @@
+import Icon from "@site/src/components/icon/icon";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+1. Open the **OpenRAG OpenSearch Agent** flow in the Langflow visual editor: From the **Chat** window, click **Settings**, click **Edit in Langflow**, and then click **Proceed**.
+
+2. Create a [Langflow API key](https://docs.langflow.org/api-keys-and-authentication), which is a user-specific token required to send requests to the Langflow server.
+This key doesn't grant access to OpenRAG.
+
+ 1. In the Langflow visual editor, click your user icon in the header, and then select **Settings**.
+ 2. Click **Langflow API Keys**, and then click **Add New**.
+ 3. Name your key, and then click **Create API Key**.
+ 4. Copy the API key and store it securely.
+ 5. Exit the Langflow **Settings** page to return to the visual editor.
+
+3. Click **Share**, and then select **API access** to get pregenerated code snippets that call the Langflow API and run the flow.
+
+ These code snippets construct API requests with your Langflow server URL (`LANGFLOW_SERVER_ADDRESS`), the flow to run (`FLOW_ID`), required headers (`LANGFLOW_API_KEY`, `Content-Type`), and a payload containing the required inputs to run the flow, including a default chat input message.
+
+ In production, you would modify the inputs to suit your application logic. For example, you could replace the default chat input message with dynamic user input.
+
+
+
+
+ ```python
+ import requests
+ import os
+ import uuid
+
+ api_key = 'LANGFLOW_API_KEY'
+ url = "http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID" # The complete API endpoint URL for this flow
+
+ # Request payload configuration
+ payload = {
+ "output_type": "chat",
+ "input_type": "chat",
+ "input_value": "hello world!"
+ }
+ payload["session_id"] = str(uuid.uuid4())
+
+ headers = {"x-api-key": api_key}
+
+ try:
+ # Send API request
+ response = requests.request("POST", url, json=payload, headers=headers)
+ response.raise_for_status() # Raise exception for bad status codes
+
+ # Print response
+ print(response.text)
+
+ except requests.exceptions.RequestException as e:
+ print(f"Error making API request: {e}")
+ except ValueError as e:
+ print(f"Error parsing response: {e}")
+ ```
+
+
+
+
+ ```typescript
+ const crypto = require('crypto');
+ const apiKey = 'LANGFLOW_API_KEY';
+ const payload = {
+ "output_type": "chat",
+ "input_type": "chat",
+ "input_value": "hello world!"
+ };
+ payload.session_id = crypto.randomUUID();
+
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ "x-api-key": apiKey
+ },
+ body: JSON.stringify(payload)
+ };
+
+ fetch('http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID', options)
+ .then(response => response.json())
+ .then(response => console.warn(response))
+ .catch(err => console.error(err));
+ ```
+
+
+
+
+ ```bash
+ curl --request POST \
+ --url 'http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID?stream=false' \
+ --header 'Content-Type: application/json' \
+ --header "x-api-key: LANGFLOW_API_KEY" \
+ --data '{
+ "output_type": "chat",
+ "input_type": "chat",
+ "input_value": "hello world!"
+ }'
+ ```
+
+
+
+
+4. Copy your preferred snippet, and then run it:
+
+ * **Python**: Paste the snippet into a `.py` file, save it, and then run it with `python filename.py`.
+ * **TypeScript**: Paste the snippet into a `.ts` file, save it, and then run it with `ts-node filename.ts`.
+ * **curl**: Paste and run snippet directly in your terminal.
+
+If the request is successful, the response includes many details about the flow run, including the session ID, inputs, outputs, components, durations, and more.
+
+In production, you won't pass the raw response to the user in its entirety.
+Instead, you extract and reformat relevant fields for different use cases, as demonstrated in the [Langflow quickstart](https://docs.langflow.org/quickstart#extract-data-from-the-response).
+For example, you could pass the chat output text to a front-end user-facing application, and store specific fields in logs and backend data stores for monitoring, chat history, or analytics.
+You could also pass the output from one flow as input to another flow.
\ No newline at end of file
diff --git a/docs/docs/core-components/chat.mdx b/docs/docs/core-components/chat.mdx
index 92958285..4137e4e1 100644
--- a/docs/docs/core-components/chat.mdx
+++ b/docs/docs/core-components/chat.mdx
@@ -6,10 +6,13 @@ slug: /chat
import Icon from "@site/src/components/icon/icon";
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+import PartialIntegrateChat from '@site/docs/_partial-integrate-chat.mdx';
-After you [upload documents to your knowledge base](/knowledge), you can use the OpenRAG **Chat** feature to interact with your knowledge through natural language queries.
+After you [upload documents to your knowledge base](/knowledge), you can use the OpenRAG **Chat** feature to interact with your knowledge through natural language queries.
-
+:::tip
+Try chatting, uploading documents, and modifying chat settings in the [quickstart](/quickstart).
+:::
## OpenRAG OpenSearch Agent flow {#flow}
@@ -19,10 +22,14 @@ If you [inspect the flow in Langflow](/agents#inspect-and-modify-flows), you'll
-* The [**Agent** component](https://docs.langflow.org/agents) orchestrates the entire flow by deciding when to search the knowledge base, how to formulate search queries, and how to combine retrieved information with the user's question to generate a comprehensive response.
-The **Agent** behaves according to the prompt in the **Agent Instructions** field.
+* [**Chat Input** component](https://docs.langflow.org/components-io): This component starts the flow when it receives a chat message. It is connected to the **Agent** component's **Input** port.
+When you use the OpenRAG **Chat**, your chat messages are passed to the **Chat Input** component, which then sends them to the **Agent** component for processing.
- The Agent component is the star of this flow because it powers decision making, tool calling, and an LLM-driven conversational experience.
+* [**Agent** component](https://docs.langflow.org/agents): This component orchestrates the entire flow by processing chat messages, searching the knowledge base, and organizing the retrieved information into a cohesive response.
+The agent's general behavior is defined by the prompt in the **Agent Instructions** field and the model connected to the **Language Model** port.
+One or more specialized tools can be attached to the **Tools** port to extend the agent's capabilities. In this case, there are two tools: **MCP Tools** and **OpenSearch**.
+
+ The **Agent** component is the star of this flow because it powers decision making, tool calling, and an LLM-driven conversational experience.
How do agents work?
@@ -37,20 +44,21 @@ The **Agent** behaves according to the prompt in the **Agent Instructions** fiel
-* The [**Chat Input** component](https://docs.langflow.org/components-io) is connected to the Agent component's Input port. This allows to flow to be triggered by an incoming prompt from a user or application.
+* [**Language Model** component](https://docs.langflow.org/components-models): Connected to the **Agent** component's **Language Model** port, this component provides the base language model driver for the agent. The agent cannot function without a model because the model is used for general knowledge, reasoning, and generating responses.
-* The [**OpenSearch** component](https://docs.langflow.org/bundles-elastic#opensearch) is connected to the Agent component's Tools port. The agent might not use this database for every request; the agent only uses this connection if it decides the knowledge can help respond to the prompt.
+ Different models can change the style and content of the agent's responses, and some models might be better suited for certain tasks than others. If the agent doesn't seem to be handling requests well, try changing the model to see how the responses change. For example, fast models might be good for simple queries, but they might not have the depth of reasoning for complex, multi-faceted queries.
-* The [**Language Model** component](https://docs.langflow.org/components-models) is connected to the Agent component's Language Model port. The agent uses the connected LLM to reason through the request sent through Chat Input.
+* [**MCP Tools** component](https://docs.langflow.org/mcp-client): Connected to the **Agent** component's **Tools** port, this component can be used to [access any Model Context Protocol (MCP) server](https://docs.langflow.org/mcp-server) and the MCP tools provided by that server. In this case, your OpenRAG Langflow instance's [**Starter Project**](https://docs.langflow.org/concepts-flows#projects) is the MCP server, and the [**OpenSearch URL Ingestion** flow](/knowledge#url-flow) is the MCP tool.
+This flow fetches content from URLs, and then stores the content in your OpenRAG OpenSearch knowledge base. By serving this flow as an MCP tool, the agent can selectively call this tool if a URL is detected in the chat input.
-* The [**Embedding Model** component](https://docs.langflow.org/components-embedding-models) is connected to the OpenSearch component's Embedding port. This component converts text queries into vector representations that are compared with document embeddings stored in OpenSearch for semantic similarity matching. This gives your Agent's queries context.
+* [**OpenSearch** component](https://docs.langflow.org/bundles-elastic#opensearch): Connected to the **Agent** component's **Tools** port, this component lets the agent search your [OpenRAG OpenSearch knowledge base](/knowledge). The agent might not use this database for every request; the agent uses this connection only if it decides that documents in your knowledge base are relevant to your query.
-* The [**Text Input** component](https://docs.langflow.org/components-io) is populated with the global variable `OPENRAG-QUERY-FILTER`.
-This filter is a [knowledge filter](/knowledge-filters) that limits the documents the Agent can access in the knowledge base if a global or chat filter is set.
+* [**Embedding Model** component](https://docs.langflow.org/components-embedding-models): Connected to the **OpenSearch** component's **Embedding** port, this component generates embeddings from chat input that are used in [similarity search](https://www.ibm.com/think/topics/vector-search) to find content in your knowledge base that is relevant to the chat input. The agent uses this information to generate context-aware responses that are specialized for your data.
-* The **Agent** component's Output port is connected to the [**Chat Output** component](https://docs.langflow.org/components-io), which returns the final response to the user or application.
+* [**Text Input** component](https://docs.langflow.org/components-io): Connected to the **OpenSearch** component's **Search Filters** port, this component is populated with a Langflow global variable named `OPENRAG-QUERY-FILTER`. If a global or chat-level [knowledge filter](/knowledge-filters) is set, then the variable contains the filter expression, which limits the documents that the agent can access in the knowledge base.
+If no knowledge filter is set, then the `OPENRAG-QUERY-FILTER` variable is empty, and the agent can access all documents in the knowledge base.
-* An [**MCP Tools** component](https://docs.langflow.org/mcp-client) is connected to the Agent's **Tools** port. This component calls the [**OpenSearch URL Ingestion** flow](/knowledge#url-flow), which Langflow uses as a [Model Context Protocol (MCP) server](https://docs.langflow.org/mcp-server) to fetch content from URLs and store in OpenSearch.
+* [**Chat Output** component](https://docs.langflow.org/components-io): Connected to the **Agent** component's **Output** port, this component returns the agent's generated response as a chat message.
## Nudges {#nudges}
@@ -59,4 +67,21 @@ When you use the OpenRAG **Chat**, the **OpenRAG OpenSearch Nudges** flow runs i
Nudges appear as prompts in the chat.
Click a nudge to accept it and provide the nudge's context to the OpenRAG **Chat** agent (the **OpenRAG OpenSearch Agent** flow).
-Like OpenRAG's other built-in flows, you can [inspect the flow in Langflow](/agents#inspect-and-modify-flows), and you can customize it if you want to change the nudge behavior.
\ No newline at end of file
+Like OpenRAG's other built-in flows, you can [inspect the flow in Langflow](/agents#inspect-and-modify-flows), and you can customize it if you want to change the nudge behavior.
+
+## Inspect tool calls and knowledge
+
+During the chat, you'll see information about the agent's process. For more detail, you can inspect individual tool calls. This is helpful for troubleshooting because it shows you how the agent used particular tools. For example, click **Function Call: search_documents (tool_call)** to view the log of tool calls made by the agent to the **OpenSearch** component.
+
+If documents in your knowledge base seem to be missing or interpreted incorrectly, see [Troubleshoot ingestion](/knowledge#troubleshoot-ingestion).
+
+If tool calls and knowledge appear normal, but the agent's responses seem off-topic or incorrect, consider changing the agent's language model or prompt, as explained in [Inspect and modify flows](/agents#inspect-and-modify-flows).
+
+## Integrate OpenRAG chat into an application
+
+You can integrate OpenRAG flows into your applications using the [Langflow API](https://docs.langflow.org/api-reference-api-examples).
+To simplify this integration, you can get pre-configured code snippets directly from the embedded Langflow visual editor.
+
+The following example demonstrates how to generate and use code snippets for the **OpenRAG OpenSearch Agent** flow:
+
+
\ No newline at end of file
diff --git a/docs/docs/core-components/ingestion.mdx b/docs/docs/core-components/ingestion.mdx
index b4378bed..43f3a8aa 100644
--- a/docs/docs/core-components/ingestion.mdx
+++ b/docs/docs/core-components/ingestion.mdx
@@ -7,4 +7,16 @@ import Icon from "@site/src/components/icon/icon";
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-
\ No newline at end of file
+
+
+
+ To verify the agent's response, click **Knowledge** to view the documents stored in the OpenRAG OpenSearch vector database.
+You can click a document to view the chunks of the document as they are stored in the database.
+
+4. Click **Add Knowledge** to add your own documents to your OpenRAG knowledge base.
+
+ For this quickstart, use either the **File** or **Folder** upload options to load documents from your local machine.
+ **Folder** uploads an entire directory.
+ The default directory is the `/documents` subdirectory in your OpenRAG installation directory.
+
+ For information about the cloud storage provider options, see [Ingest files through OAuth connectors](/knowledge#oauth-ingestion).
\ No newline at end of file
diff --git a/docs/docs/core-components/knowledge.mdx b/docs/docs/core-components/knowledge.mdx
index cb8afaad..9633e4e0 100644
--- a/docs/docs/core-components/knowledge.mdx
+++ b/docs/docs/core-components/knowledge.mdx
@@ -140,7 +140,7 @@ The **Knowledge** page lists the documents OpenRAG has ingested into your OpenSe
To explore the raw contents of your knowledge base, click **Knowledge** to get a list of all ingested documents.
Click a document to view the chunks produced from splitting the document during ingestion.
-## Troubleshoot ingestion
+## Troubleshoot ingestion (#troubleshoot-ingestion)
If an ingestion task fails, do the following:
diff --git a/docs/docs/get-started/quickstart.mdx b/docs/docs/get-started/quickstart.mdx
index 4256158c..4884de07 100644
--- a/docs/docs/get-started/quickstart.mdx
+++ b/docs/docs/get-started/quickstart.mdx
@@ -7,6 +7,7 @@ import Icon from "@site/src/components/icon/icon";
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import PartialWsl from '@site/docs/_partial-wsl-install.mdx';
+import PartialIntegrateChat from '@site/docs/_partial-integrate-chat.mdx';
Use this quickstart to install OpenRAG, and then try some of OpenRAG's core features.
@@ -154,116 +155,7 @@ You can use these flows as-is or modify them to better suit your needs, as demon
You can send and receive requests with the Langflow API using Python, TypeScript, or curl.
-1. Open the OpenRAG OpenSearch Agent flow in the Langflow visual editor: From the **Chat** window, click **Settings**, click **Edit in Langflow**, and then click **Proceed**.
-
-2. Create a [Langflow API key](https://docs.langflow.org/api-keys-and-authentication), which is a user-specific token required to send requests to the Langflow server.
-This key doesn't grant access to OpenRAG.
-
- 1. In the Langflow visual editor, click your user icon in the header, and then select **Settings**.
- 2. Click **Langflow API Keys**, and then click **Add New**.
- 3. Name your key, and then click **Create API Key**.
- 4. Copy the API key and store it securely.
- 5. Exit the Langflow **Settings** page to return to the visual editor.
-
-3. Click **Share**, and then select **API access** to get pregenerated code snippets that call the Langflow API and run the flow.
-
- These code snippets construct API requests with your Langflow server URL (`LANGFLOW_SERVER_ADDRESS`), the flow to run (`FLOW_ID`), required headers (`LANGFLOW_API_KEY`, `Content-Type`), and a payload containing the required inputs to run the flow, including a default chat input message.
-
- In production, you would modify the inputs to suit your application logic. For example, you could replace the default chat input message with dynamic user input.
-
-
-
-
- ```python
- import requests
- import os
- import uuid
-
- api_key = 'LANGFLOW_API_KEY'
- url = "http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID" # The complete API endpoint URL for this flow
-
- # Request payload configuration
- payload = {
- "output_type": "chat",
- "input_type": "chat",
- "input_value": "hello world!"
- }
- payload["session_id"] = str(uuid.uuid4())
-
- headers = {"x-api-key": api_key}
-
- try:
- # Send API request
- response = requests.request("POST", url, json=payload, headers=headers)
- response.raise_for_status() # Raise exception for bad status codes
-
- # Print response
- print(response.text)
-
- except requests.exceptions.RequestException as e:
- print(f"Error making API request: {e}")
- except ValueError as e:
- print(f"Error parsing response: {e}")
- ```
-
-
-
-
- ```typescript
- const crypto = require('crypto');
- const apiKey = 'LANGFLOW_API_KEY';
- const payload = {
- "output_type": "chat",
- "input_type": "chat",
- "input_value": "hello world!"
- };
- payload.session_id = crypto.randomUUID();
-
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- "x-api-key": apiKey
- },
- body: JSON.stringify(payload)
- };
-
- fetch('http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID', options)
- .then(response => response.json())
- .then(response => console.warn(response))
- .catch(err => console.error(err));
- ```
-
-
-
-
- ```bash
- curl --request POST \
- --url 'http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID?stream=false' \
- --header 'Content-Type: application/json' \
- --header "x-api-key: LANGFLOW_API_KEY" \
- --data '{
- "output_type": "chat",
- "input_type": "chat",
- "input_value": "hello world!"
- }'
- ```
-
-
-
-
-4. Copy your preferred snippet, and then run it:
-
- * **Python**: Paste the snippet into a `.py` file, save it, and then run it with `python filename.py`.
- * **TypeScript**: Paste the snippet into a `.ts` file, save it, and then run it with `ts-node filename.ts`.
- * **curl**: Paste and run snippet directly in your terminal.
-
-If the request is successful, the response includes many details about the flow run, including the session ID, inputs, outputs, components, durations, and more.
-
-In production, you won't pass the raw response to the user in its entirety.
-Instead, you extract and reformat relevant fields for different use cases, as demonstrated in the [Langflow quickstart](https://docs.langflow.org/quickstart#extract-data-from-the-response).
-For example, you could pass the chat output text to a front-end user-facing application, and store specific fields in logs and backend data stores for monitoring, chat history, or analytics.
-You could also pass the output from one flow as input to another flow.
+
## Next steps