From e43f52dd7a5b7c6fb183d12379525660a1e04058 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 27 Jul 2023 08:04:18 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs(custom-component.mdx):=20up?=
 =?UTF-8?q?date=20guidelines=20for=20creating=20custom=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ feat(custom-component.mdx): add example code for creating a custom component
🔧 chore(custom-component.mdx): update code comments and fix typo in build_config method
---
 docs/docs/guidelines/custom-component.mdx | 42 +++++++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/docs/docs/guidelines/custom-component.mdx b/docs/docs/guidelines/custom-component.mdx
index 96a55ccd7..7fa3fd1dd 100644
--- a/docs/docs/guidelines/custom-component.mdx
+++ b/docs/docs/guidelines/custom-component.mdx
@@ -12,7 +12,11 @@ Let's take a look at the basic rules, then we'll talk about the ones that are no
 
 ## TL;DR
 
-This is a simple example of a Custom Component. We will go over the rules in detail later.
+You need to create a class that inherits from _`CustomComponent`_ and has a _`build`_ method.
+Use the type annotations of the _`build`_ method to create the fields of the component.
+Use the _`build_config`_ method to create the config fields of the component (if any).
+
+Here is an example:
 
 <CH.Code linuNumbers={false}>
 
@@ -45,6 +49,8 @@ class BestComponent(CustomComponent):
 
 </CH.Code>
 
+## Now, let's go over the rules one by one.
+
 ## Rules:
 
 <CH.Scrollycoding rows={20} className={""}>
@@ -135,7 +141,7 @@ class BestComponent(CustomComponent):
     def build_config(self) -> dict:
         ...
 
-    # focus[14:75]
+    # mark
     def build(self):
         ...
 ```
@@ -195,6 +201,32 @@ The _`dict`_ should have the following format:
 
 ---
 
+```python
+from langflow import CustomComponent
+from langchain.chains import LLMChain
+from langchain.chains.base import Chain
+from langchain import PromptTemplate
+from langchain.llms.base import BaseLLM
+from langchain import Tool
+
+class BestComponent(CustomComponent):
+    display_name = "Custom Component"
+    description = "This is a custom component"
+
+    # focus
+    def build_config(self) -> dict:
+        ...
+
+    def build(self):
+        ...
+```
+
+# Example
+
+Now let's create a custom component that creates a Tool from a name, a description and a chain.
+
+---
+
 # Change the name
 
 We can change the name of the component by adding a _`display_name`_ attribute.
@@ -247,7 +279,7 @@ class BestComponent(CustomComponent):
 
 # Add a config
 
-The _`build_config`_ method will be used to create the config fields of the component (if any).
+The _`build_config`_ method will be used to configure the fields of the component.
 
 - _`multiline`_ is a special option that will give the option to open a text editor.
 
@@ -309,9 +341,13 @@ class BestComponent(CustomComponent):
 
 # Add the build method
 
+The parameters used are:
+
 - name is a string
 - description is a string
 - chain is a Chain
 - The return type is Tool
 
+We then instantiate a Tool and return it.
+
 </CH.Scrollycoding>