Added instructions on embedding agent or assistant into a third-party webpage (#4369)

### What problem does this PR solve?


### Type of change

- [x] Documentation Update
This commit is contained in:
writinwaters 2025-01-06 20:25:47 +08:00 committed by GitHub
parent 1d93eb81ae
commit bb24e5f739
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 49 additions and 20 deletions

View File

@ -0,0 +1,16 @@
---
sidebar_position: 3
slug: /embed_agent_into_webpage
---
# Embed agent into a webpage
You can use iframe to embed an agent into a third-party webpage.
1. Before proceeding, you must [acquire an API key](https://ragflow.io/docs/dev/acquire_ragflow_api_key); otherwise, an error message would appear.
2. On the **Agent** page, click an intended agent **>** **Edit** to access its editing page.
3. Click **Embed into webpage** on the top right corner of the canvas to show the **iframe** window:
![agent_embed](https://github.com/user-attachments/assets/f748bb91-1a48-45ca-89ea-5b1c257407cb)
4. Copy the iframe and embed it into a specific location on your webpage.

View File

@ -1,5 +1,5 @@
--- ---
sidebar_position: 3 sidebar_position: 10
slug: /text2sql_agent slug: /text2sql_agent
--- ---
@ -9,7 +9,7 @@ Build a Text2SQL agent leverging RAGFlow's RAG capabilities. Contributed by @Tes
## Scenario ## Scenario
The Text2SQL agent is designed to bridge the gap between Natural Language Processing (NLP) and Structured Query Language (SQL). Its key advantages are as follows: The Text2SQL agent bridges the gap between Natural Language Processing (NLP) and Structured Query Language (SQL). Its key advantages are as follows:
- **Assisting non-technical users with SQL**: Not all users have a background in SQL or understand the structure of the tables involved in queries. With a Text2SQL agent, users can pose questions or request data in natural language without needing an in-depth knowledge of the database structure or SQL syntax. - **Assisting non-technical users with SQL**: Not all users have a background in SQL or understand the structure of the tables involved in queries. With a Text2SQL agent, users can pose questions or request data in natural language without needing an in-depth knowledge of the database structure or SQL syntax.
@ -31,7 +31,7 @@ However, traditional Text2SQL solutions often require model fine-tuning, which c
A list of components required: A list of components required:
- Begin - [Begin](https://ragflow.io/docs/dev/begin_component)
- Interface - Interface
- Retrieval - Retrieval
- Generate - Generate

View File

@ -3,7 +3,7 @@ sidebar_position: 7
slug: /run_health_check slug: /run_health_check
--- ---
# Run health check on RAGFlow's dependencies # Run dependency health check
Double-check the health status of RAGFlow's dependencies. Double-check the health status of RAGFlow's dependencies.

View File

@ -57,7 +57,7 @@ You start an AI conversation by creating an assistant.
:::tip NOTE :::tip NOTE
Click the light bubble logo above the answer to view the expanded system prompt: Click the light bubble icon above the answer to view the expanded system prompt:
![](https://github.com/user-attachments/assets/515ab187-94e8-412a-82f2-aba52cd79e09) ![](https://github.com/user-attachments/assets/515ab187-94e8-412a-82f2-aba52cd79e09)
@ -74,10 +74,19 @@ Hover over an intended chat assistant **>** **Edit** to show the chat configurat
![chat_config](https://github.com/user-attachments/assets/1a4eaed2-5430-4585-8ab6-930549838c5b) ![chat_config](https://github.com/user-attachments/assets/1a4eaed2-5430-4585-8ab6-930549838c5b)
## Integrate chat capabilities into your application ## Integrate chat capabilities into your application or webpage
RAGFlow also offers HTTP and Python APIs for you to integrate RAGFlow's capabilities into your applications. Read the following documents for more information: RAGFlow offers HTTP and Python APIs for you to integrate RAGFlow's capabilities into your applications. Read the following documents for more information:
- [Acquire a RAGFlow API key](./develop/acquire_ragflow_api_key.md) - [Acquire a RAGFlow API key](https://ragflow.io/docs/dev/acquire_ragflow_api_key)
- [HTTP API reference](../references/http_api_reference.md) - [HTTP API reference](https://ragflow.io/docs/dev/http_api_reference)
- [Python API reference](../references/python_api_reference.md) - [Python API reference](https://ragflow.io/docs/dev/python_api_reference)
You can use iframe to embed the created chat assistant into a third-party webpage:
1. Before proceeding, you must [acquire an API key](https://ragflow.io/docs/dev/acquire_ragflow_api_key); otherwise, an error message would appear.
2. Hover over an intended chat assistant **>** **Edit** to show the **iframe** window:
![chat-embed](https://github.com/user-attachments/assets/13ea3021-31c4-4a14-9b32-328cd3318fb5)
3. Copy the iframe and embed it into a specific location on your webpage.

View File

@ -41,7 +41,7 @@ You can set global variables within the **Begin** component, which can be either
- **line**: Accepts a single line of text without line breaks. - **line**: Accepts a single line of text without line breaks.
- **paragraph**: Accepts multiple lines of text, including line breaks. - **paragraph**: Accepts multiple lines of text, including line breaks.
- **options**: Requires the user to select a value for this variable from a dropdown menu. And you are required to set *at least* one option for the dropdown menu. - **options**: Requires the user to select a value for this variable from a dropdown menu. And you are required to set *at least* one option for the dropdown menu.
- **file**: Requires the user to upload one or multiple files from their device. - **file**: Requires the user to upload one or multiple files.
- **integer**: Accepts an integer as input. - **integer**: Accepts an integer as input.
- **boolean**: Requires the user to toggle between on and off. - **boolean**: Requires the user to toggle between on and off.
- **Optional**: A toggle indicating whether the variable is optional. - **Optional**: A toggle indicating whether the variable is optional.
@ -62,9 +62,13 @@ As mentioned earlier, the **Begin** component is indispensable for an agent. Sti
No. Files uploaded to an agent as input are not stored in a knowledge base and will not be chunked using RAGFlow's built-in chunk methods. However, RAGFlow's built-in OSR, DLR, and TSR models will still be applied to process the document. No. Files uploaded to an agent as input are not stored in a knowledge base and will not be chunked using RAGFlow's built-in chunk methods. However, RAGFlow's built-in OSR, DLR, and TSR models will still be applied to process the document.
### File size limit for uploaded file ### How to upload a webpage or file from a URL?
If you set the type of a variable as **file**, your users will be able to upload a file either from their local device or from an accessible URL. For example:
![upload_file](https://github.com/user-attachments/assets/7ad2a352-0807-4b74-b8d1-d09e5cd37997)
### File size limit for an uploaded file
The maximum file size for each uploaded file is determined by the variable `MAX_CONTENT_LENGTH` in `/docker/.env`. It defaults to 128 MB. If you change the default file size, ensure you also update the value of `client_max_body_size` in `/docker/nginx/nginx.conf` accordingly. The maximum file size for each uploaded file is determined by the variable `MAX_CONTENT_LENGTH` in `/docker/.env`. It defaults to 128 MB. If you change the default file size, ensure you also update the value of `client_max_body_size` in `/docker/nginx/nginx.conf` accordingly.

View File

@ -22,7 +22,7 @@ export default {
languagePlaceholder: 'select your language', languagePlaceholder: 'select your language',
copy: 'Copy', copy: 'Copy',
copied: 'Copied', copied: 'Copied',
comingSoon: 'Coming Soon', comingSoon: 'Coming soon',
download: 'Download', download: 'Download',
close: 'Close', close: 'Close',
preview: 'Preview', preview: 'Preview',
@ -428,7 +428,7 @@ The above is the content you need to summarize.`,
created: 'Created', created: 'Created',
action: 'Action', action: 'Action',
embedModalTitle: 'Embed into webpage', embedModalTitle: 'Embed into webpage',
comingSoon: 'Coming Soon', comingSoon: 'Coming soon',
fullScreenTitle: 'Full Embed', fullScreenTitle: 'Full Embed',
fullScreenDescription: fullScreenDescription:
'Embed the following iframe into your website at the desired location', 'Embed the following iframe into your website at the desired location',