Chainlit + Embedchain Integration (Example) (#1020)

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)

docs/mint.json

@@ -76,7 +76,8 @@
         {
         "group": "🔗 Integrations",
           "pages": [
-            "integration/langsmith"
+            "integration/langsmith",
+            "integration/chainlit"
           ]
         },
         "get-started/faq"

examples/chainlit/.gitignore

@@ -0,0 +1 @@
+.chainlit

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
+```

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()

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.

examples/chainlit/requirements.txt

@@ -0,0 +1,2 @@
+chainlit==0.7.700
+embedchain==0.1.31