build out chat page
This commit is contained in:
April M
parent
3101dd0ed5
commit
069135d563
5 changed files with 169 additions and 126 deletions
114
docs/docs/_partial-integrate-chat.mdx
Normal file
114
docs/docs/_partial-integrate-chat.mdx
Normal file
|
|
@ -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 <Icon name="Settings2" aria-hidden="true"/> **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 <Icon name="Plus" aria-hidden="true"/> **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.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="python" label="Python">
|
||||
|
||||
```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}")
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="typescript" label="TypeScript">
|
||||
|
||||
```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));
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="curl" label="curl">
|
||||
|
||||
```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!"
|
||||
}'
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
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.
|
||||
|
|
@ -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 <Icon name="MessageSquare" aria-hidden="true"/> **Chat** feature to interact with your knowledge through natural language queries.
|
||||
|
||||
<!-- TODO: can also ingest while chatting, try the chat in the quickstart, edit chat settings (see quickstart) -->
|
||||
:::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.
|
||||
|
||||
<details>
|
||||
<summary>How do agents work?</summary>
|
||||
|
|
@ -37,20 +44,21 @@ The **Agent** behaves according to the prompt in the **Agent Instructions** fiel
|
|||
|
||||
</details>
|
||||
|
||||
* 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.
|
||||
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 <Icon name="Gear" aria-hidden="true"/> **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:
|
||||
|
||||
<PartialIntegrateChat />
|
||||
|
|
@ -7,4 +7,16 @@ import Icon from "@site/src/components/icon/icon";
|
|||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
<!-- reuse for ingestion sources and flows. Reuse knowledge.mdx for browse & general info about what knowledge is and the role of Docling & OpenSearch. -->
|
||||
<!-- reuse for ingestion sources and flows. Reuse knowledge.mdx for browse & general info about what knowledge is and the role of Docling & OpenSearch. -->
|
||||
|
||||
|
||||
To verify the agent's response, click <Icon name="Library" aria-hidden="true"/> **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 <Icon name="File" aria-hidden="true"/> **File** or <Icon name="Folder" aria-hidden="true"/> **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).
|
||||
|
|
@ -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 <Icon name="Library" aria-hidden="true"/> **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:
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <Icon name="Settings2" aria-hidden="true"/> **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 <Icon name="Plus" aria-hidden="true"/> **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.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="python" label="Python">
|
||||
|
||||
```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}")
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="typescript" label="TypeScript">
|
||||
|
||||
```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));
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="curl" label="curl">
|
||||
|
||||
```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!"
|
||||
}'
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
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.
|
||||
<PartialIntegrateChat />
|
||||
|
||||
## Next steps
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue