diff --git a/docs/docs/guidelines/custom-component.mdx b/docs/docs/guidelines/custom-component.mdx
index 382883436..d7bcc12a7 100644
--- a/docs/docs/guidelines/custom-component.mdx
+++ b/docs/docs/guidelines/custom-component.mdx
@@ -21,35 +21,52 @@ Let's take a look at the basic rules and features. Then we'll go over an example
- Use the _`build_config`_ method to customize how these fields look and behave.
Here is an example:
+
+
-
+ ```python
+ from langflow import CustomComponent
+ from langchain.schema import Document
-```python
-from langflow import CustomComponent
-from langchain.schema import Document
+ class DocumentProcessor(CustomComponent):
+ display_name = "Document Processor"
+ description = "This component processes a document"
-class DocumentProcessor(CustomComponent):
- display_name = "Document Processor"
- description = "This component processes a document"
+ def build_config(self) -> dict:
+ options = ["Uppercase", "Lowercase", "Titlecase"]
+ return {
+ "function": {"options": options,
+ "value": options[0]}}
- def build_config(self) -> dict:
- options = ["Uppercase", "Lowercase", "Titlecase"]
- return {
- "function": {"options": options,
- "value": options[0]}}
+ def build(self, document: Document, function: str) -> Document:
+ page_content = document.page_content
+ if function == "Uppercase":
+ page_content = page_content.upper()
+ elif function == "Lowercase":
+ page_content = page_content.lower()
+ elif function == "Titlecase":
+ page_content = page_content.title()
+ return Document(page_content=page_content)
+ ```
- def build(self, document: Document, function: str) -> Document:
- page_content = document.page_content
- if function == "Uppercase":
- page_content = page_content.upper()
- elif function == "Lowercase":
- page_content = page_content.lower()
- elif function == "Titlecase":
- page_content = page_content.title()
- return Document(page_content=page_content)
-```
+
-
+
+
Check out [FlowRunner Component](../examples/flow-runner) for a more complex
@@ -289,39 +306,42 @@ class DocumentProcessor(CustomComponent):
-In Langflow, this is how our script looks like:
-{" "}
+All done! This is what our script and brand-new custom component look like:
-
+
+
-And there is our brand new custom component:
-{" "}
-
+
+
diff --git a/docs/static/img/document_processor.png b/docs/static/img/document_processor.png
index f13c2128a..ce102b8a3 100644
Binary files a/docs/static/img/document_processor.png and b/docs/static/img/document_processor.png differ
diff --git a/docs/static/img/document_processor_code.png b/docs/static/img/document_processor_code.png
index ceafbac44..05b8e0176 100644
Binary files a/docs/static/img/document_processor_code.png and b/docs/static/img/document_processor_code.png differ