diff --git a/docs/references/agent_component_reference/generate.mdx b/docs/references/agent_component_reference/generate.mdx
index 9bfe771d3..6572bc35a 100644
--- a/docs/references/agent_component_reference/generate.mdx
+++ b/docs/references/agent_component_reference/generate.mdx
@@ -9,7 +9,7 @@ The component that prompts the LLM to respond appropriately.
 
 ---
 
-The **Generate** component fine-tunes the LLM and sets its prompt.
+A **Generate** component fine-tunes the LLM and sets its prompt.
 
 ## Scenarios
 
@@ -98,7 +98,7 @@ This feature is used for multi-turn dialogue *only*.
 ### Key (Variable)
 
 :::danger IMPORTANT
-A **Generate** component relies on variables (keys) to specify its data inputs. Its immediate upstream component is *not* necessarily its data input, and the arrows in the workflow indicate *only* the processing sequence.
+A **Generate** component relies on keys (variables) to specify its data inputs. Its immediate upstream component is *not* necessarily its data input, and the arrows in the workflow indicate *only* the processing sequence.
 :::
 
 ![variable_settings](https://github.com/user-attachments/assets/cb024c9e-264a-43ff-9ee7-8649afd571b0)
diff --git a/docs/references/agent_component_reference/note.mdx b/docs/references/agent_component_reference/note.mdx
new file mode 100644
index 000000000..0eadefa52
--- /dev/null
+++ b/docs/references/agent_component_reference/note.mdx
@@ -0,0 +1,22 @@
+---
+sidebar_position: 13
+slug: /note_component
+---
+
+# Interact component
+
+The component that keeps design notes.
+
+---
+
+A **note** component allows you to keep design notes, including details about an agent, the output of specific components, the rationale of a particular design, or any information that may assist you, your users, or your fellow developers understand the agent.
+
+## Examples
+
+Explore our customer service agent template, which has five **Note** components:
+
+1. Click the **Agent** tab at the top center of the page to access the **Agent** page.
+2. Click **+ Create agent** on the top right of the page to open the **agent template** page.
+3. On the **agent template** page, hover over the **Customer service** card and click **Use this template**.
+4. Name your new agent and click **OK** to enter the workflow editor.
+5. Click on the **note** component to add or update notes.
\ No newline at end of file
diff --git a/docs/references/agent_component_reference/template.mdx b/docs/references/agent_component_reference/template.mdx
new file mode 100644
index 000000000..fee44821b
--- /dev/null
+++ b/docs/references/agent_component_reference/template.mdx
@@ -0,0 +1,49 @@
+---
+sidebar_position: 11
+slug: /template_component
+---
+
+# Template component
+
+The component that formats user inputs or the outputs of other components.
+
+---
+
+A **Template** component acts as a content formatter. It is usually the upstream component of an **Interact** component.
+
+
+## Scenarios
+
+A **Template** component is useful for organizing various sources of data or information into specific formats.
+
+## Configurations
+
+### Content 
+
+Used together with Keys to organize various data or information sources into desired formats. Example:
+
+```text
+<h2>{subtitle}</h2>
+<div>{content}</div>
+```
+
+Where `{subtitle}` and `{content}` are defined keys.
+
+### Key 
+
+A **Template** component relies on keys (variables) to specify its data or information sources. Its immediate upstream component is *not* necessarily its input, and the arrows in the workflow indicate *only* the processing sequence.
+
+Values of keys are categorized into two groups:
+
+- **Component Output**: The value of the key should be a component ID.
+- **Begin Input**: The value of the key should be the name of a global variable defined in the **Begin** component.
+
+## Examples
+
+Explore our research report generator agent template, where the **Template** component (component ID: **Article**) organizes user input and the outputs of the **Sections** component into HTML format:
+
+1. Click the **Agent** tab at the top center of the page to access the **Agent** page.
+2. Click **+ Create agent** on the top right of the page to open the **agent template** page.
+3. On the **agent template** page, hover over the **Research report generator** card and click **Use this template**.
+4. Name your new agent and click **OK** to enter the workflow editor.
+5. Click on the **Template** component to display its **Configuration** window
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index bfcd21223..98e06abce 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -1104,7 +1104,7 @@ This procedure will improve precision of retrieval by adding more information to
       testRun: 'Test Run',
       template: 'Template',
       templateDescription:
-        'A component that formats the output of other components.',
+        'A component that formats user inputs or the outputs of other components.',
       emailComponent: 'Email',
       emailDescription: 'Send an email to a specified address.',
       smtpServer: 'SMTP Server',