From 6983ebba490291ba47c2d6b915362a55d967fc15 Mon Sep 17 00:00:00 2001
From: Sidharth Mohanty <sidmohanty11@gmail.com>
Date: Mon, 18 Dec 2023 13:20:56 +0530
Subject: [PATCH] Chainlit + Embedchain Integration (Example) (#1020)

---
 docs/integration/chainlit.mdx      | 68 ++++++++++++++++++++++++++++++
 docs/mint.json                     |  3 +-
 examples/chainlit/.gitignore       |  1 +
 examples/chainlit/README.md        | 17 ++++++++
 examples/chainlit/app.py           | 35 +++++++++++++++
 examples/chainlit/chainlit.md      | 15 +++++++
 examples/chainlit/requirements.txt |  2 +
 7 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 docs/integration/chainlit.mdx
 create mode 100644 examples/chainlit/.gitignore
 create mode 100644 examples/chainlit/README.md
 create mode 100644 examples/chainlit/app.py
 create mode 100644 examples/chainlit/chainlit.md
 create mode 100644 examples/chainlit/requirements.txt

diff --git a/docs/integration/chainlit.mdx b/docs/integration/chainlit.mdx
new file mode 100644
index 00000000..b4a28cff
--- /dev/null
+++ b/docs/integration/chainlit.mdx
@@ -0,0 +1,68 @@
+---
+title: '⛓️ Chainlit'
+description: 'Integrate with Chainlit to create LLM chat apps'
+---
+
+In this example, we will learn how to use Chainlit and Embedchain together 
+
+## Setup
+
+First, install the required packages:
+
+```bash
+pip install embedchain chainlit
+```
+
+## Create a Chainlit app
+
+Create a new file called `app.py` and add the following code:
+
+```python
+import chainlit as cl
+from embedchain import Pipeline as App
+
+import os
+
+os.environ["OPENAI_API_KEY"] = "sk-xxx"
+
+@cl.on_chat_start
+async def on_chat_start():
+    app = App.from_config(config={
+        'app': {
+            'config': {
+                'name': 'chainlit-app'
+            }
+        },
+        'llm': {
+            'config': {
+                'stream': True,
+            }
+        }
+    })
+    # import your data here
+    app.add("https://www.forbes.com/profile/elon-musk/")
+    app.collect_metrics = False
+    cl.user_session.set("app", app)
+
+
+@cl.on_message
+async def on_message(message: cl.Message):
+    app = cl.user_session.get("app")
+    msg = cl.Message(content="")
+    for chunk in await cl.make_async(app.chat)(message.content):
+        await msg.stream_token(chunk)
+    
+    await msg.send()
+```
+
+## Run the app
+
+```
+chainlit run app.py
+```
+
+## Try it out
+
+Open the app in your browser and start chatting with it!
+
+![chainlit-demo](https://github.com/embedchain/embedchain/assets/73601258/d6635624-5cdb-485b-bfbd-3b7c8f18bfff)
diff --git a/docs/mint.json b/docs/mint.json
index 7aeb6c00..4aeaf195 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -76,7 +76,8 @@
         {
         "group": "🔗 Integrations",
           "pages": [
-            "integration/langsmith"
+            "integration/langsmith",
+            "integration/chainlit"
           ]
         },
         "get-started/faq"
diff --git a/examples/chainlit/.gitignore b/examples/chainlit/.gitignore
new file mode 100644
index 00000000..2121b258
--- /dev/null
+++ b/examples/chainlit/.gitignore
@@ -0,0 +1 @@
+.chainlit
diff --git a/examples/chainlit/README.md b/examples/chainlit/README.md
new file mode 100644
index 00000000..d54e6965
--- /dev/null
+++ b/examples/chainlit/README.md
@@ -0,0 +1,17 @@
+## Chainlit + Embedchain Demo
+
+In this example, we will learn how to use Chainlit and Embedchain together 
+
+## Setup
+
+First, install the required packages:
+
+```bash
+pip install -r requirements.txt
+```
+
+## Run the app locally,
+
+```
+chainlit run app.py
+```
diff --git a/examples/chainlit/app.py b/examples/chainlit/app.py
new file mode 100644
index 00000000..498dad66
--- /dev/null
+++ b/examples/chainlit/app.py
@@ -0,0 +1,35 @@
+import chainlit as cl
+from embedchain import Pipeline as App
+
+import os
+
+os.environ["OPENAI_API_KEY"] = "sk-xxx"
+
+@cl.on_chat_start
+async def on_chat_start():
+    app = App.from_config(config={
+        'app': {
+            'config': {
+                'name': 'chainlit-app'
+            }
+        },
+        'llm': {
+            'config': {
+                'stream': True,
+            }
+        }
+    })
+    # import your data here
+    app.add("https://www.forbes.com/profile/elon-musk/")
+    app.collect_metrics = False
+    cl.user_session.set("app", app)
+
+
+@cl.on_message
+async def on_message(message: cl.Message):
+    app = cl.user_session.get("app")
+    msg = cl.Message(content="")
+    for chunk in await cl.make_async(app.chat)(message.content):
+        await msg.stream_token(chunk)
+    
+    await msg.send()
diff --git a/examples/chainlit/chainlit.md b/examples/chainlit/chainlit.md
new file mode 100644
index 00000000..d3de410e
--- /dev/null
+++ b/examples/chainlit/chainlit.md
@@ -0,0 +1,15 @@
+# Welcome to Embedchain! 🚀
+
+Hello! 👋 Excited to see you join us. With Embedchain and Chainlit, create ChatGPT like apps effortlessly.
+
+## Quick Start 🌟
+
+- **Embedchain Docs:** Get started with our comprehensive [Embedchain Documentation](https://docs.embedchain.ai/) 📚
+- **Discord Community:** Join our discord [Embedchain Discord](https://discord.gg/CUU9FPhRNt) to ask questions, share your projects, and connect with other developers! 💬
+- **UI Guide**: Master Chainlit with [Chainlit Documentation](https://docs.chainlit.io/) ⛓️
+
+Happy building with Embedchain! 🎉
+
+## Customize welcome screen
+
+Edit chainlit.md in your project root to change this welcome message.
diff --git a/examples/chainlit/requirements.txt b/examples/chainlit/requirements.txt
new file mode 100644
index 00000000..8ab5b19b
--- /dev/null
+++ b/examples/chainlit/requirements.txt
@@ -0,0 +1,2 @@
+chainlit==0.7.700
+embedchain==0.1.31