Enhaced UI

.chainlit/config.toml

@@ -59,9 +59,9 @@ edit_message = true
 
 [UI]
 # Name of the assistant.
-name = "Assistant"
+name = "Docs_Agent"
 
-# default_theme = "dark"
+# default_theme = "light"
 
 # layout = "wide"
 

agent.py

@@ -2,39 +2,14 @@
 from contextlib import asynccontextmanager
 
 from langchain_mcp_adapters.client import MultiServerMCPClient
-from langchain_google_genai import ChatGoogleGenerativeAI
 from langgraph.checkpoint.memory import InMemorySaver
 from langgraph.prebuilt import create_react_agent
 
-checkpointer = InMemorySaver()
-
-prompt = """
-## Role
-You are an AI Developer specializing in AI frameworks, capable of creating Agents, chatbots, and Retrieval-Augmented Generation (RAG) systems.
-
-## Task
-Answer user questions and Write complete, production-ready code for AI Agents, chatbots, and RAG systems using framework documentation.
-
-## Instructions
-Follow these steps when fulfilling user request:
+from prompts import DOCS_AGENT_PROMPT
 
-1. Use the `list_doc_sources` tool to retrieve available documentations links.
-2. Call `fetch_docs` tool to analyze the content of the documentaion.
-3. Reflect on the URLs in the documentaions content and select the most pertinent URLs based on the content.
-4. Call `fetch_docs` tool on the selected URLs.
-5. Provide a clear and complete response to the user.
-6. If the current information is insufficient, fetch more URLs until the request is fulfilled.
-
-## Constraints
-* Ensure your answers are correct, the code is **accurate, production-ready**, and leverages the documentation.
-* Do NOT just provide example code, give actual implementation.
-
-## REMEMBER
-
-* When writing the code, **add 2-3 linespaces** between the headings/texts and code (which may start from ```). Must follow this instruction.
-* Always provide pre-requisites/dependencies with each project code.
+# Initialize checkpointer
+checkpointer = InMemorySaver()
 
-"""
 @asynccontextmanager
 async def make_graph(model):
     async with MultiServerMCPClient(
@@ -49,7 +24,7 @@ async def make_graph(model):
         agent = create_react_agent(
             model, 
             client.get_tools(), 
-            prompt=prompt, 
+            prompt=DOCS_AGENT_PROMPT, 
             checkpointer=checkpointer)
 
         yield agent

prompts.py

@@ -0,0 +1,25 @@
+DOCS_AGENT_PROMPT = """
+## Role
+You are an AI Developer specializing in AI frameworks, capable of creating Agents, chatbots, and Retrieval-Augmented Generation (RAG) systems.
+
+## Task
+Answer user questions and Write complete, production-ready code for AI Agents, chatbots, and RAG systems using framework documentation.
+
+## Instructions
+Follow these steps when fulfilling user request:
+
+1. Use the `list_doc_sources` tool to retrieve available documentations links.
+2. Call `fetch_docs` tool to analyze the content of the documentaion.
+3. Reflect on the URLs in the documentaions content and select the most pertinent URLs based on the content.
+4. Call `fetch_docs` tool on the selected URLs.
+5. Provide a clear and complete response to the user.
+6. If the current information is insufficient, fetch more URLs until the request is fulfilled.
+
+## Constraints
+* Ensure your answers are correct, the code is **accurate, production-ready**, and leverages the documentation.
+* Do NOT just provide example code, give actual implementation.
+
+## REMEMBER
+* Always provide pre-requisites/dependencies and commands with each project code.
+
+"""

public/theme.json

@@ -0,0 +1,68 @@
+{
+    "custom_fonts": [],
+    "variables": {
+        "light": {
+            "--font-sans": "'Inter', sans-serif",
+            "--font-mono": "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+            "--background": "0 0% 100%",
+            "--foreground": "0 0% 5%",
+            "--card": "0 0% 100%",
+            "--card-foreground": "0 0% 5%",
+            "--popover": "0 0% 100%",
+            "--popover-foreground": "0 0% 5%",
+            "--primary": "215 93% 36%",
+            "--primary-foreground": "0 0% 100%",
+            "--secondary": "0 0% 85%",
+            "--secondary-foreground": "222.2 47.4% 11.2%",
+            "--muted": "0 0% 85%",
+            "--muted-foreground": "0 0% 36%",
+            "--accent": "0 0% 93%",
+            "--accent-foreground": "222.2 47.4% 11.2%",
+            "--destructive": "0 84.2% 60.2%",
+            "--destructive-foreground": "210 40% 98%",
+            "--border": "0 0% 85%",
+            "--input": "0 0% 85%",
+            "--ring": "215 93% 36%",
+            "--radius": "0.75rem",
+            "--sidebar-background": "0 0% 98%",
+            "--sidebar-foreground": "240 5.3% 26.1%",
+            "--sidebar-primary": "240 5.9% 10%",
+            "--sidebar-primary-foreground": "0 0% 98%",
+            "--sidebar-accent": "240 4.8% 95.9%",
+            "--sidebar-accent-foreground": "240 5.9% 10%",
+            "--sidebar-border": "220 13% 91%",
+            "--sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+            "--font-sans": "'Inter', sans-serif",
+            "--font-mono": "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+            "--background": "0 0% 10%",
+            "--foreground": "0 0% 93%",
+            "--card": "0 0% 16%",
+            "--card-foreground": "210 40% 98%",
+            "--popover": "0 0% 16%",
+            "--popover-foreground": "210 40% 98%",
+            "--primary": "212 100% 45%",
+            "--primary-foreground": "0 0% 100%",
+            "--secondary": "0 1% 19%",
+            "--secondary-foreground": "210 100% 98%",
+            "--muted": "0 1% 26%",
+            "--muted-foreground": "0 0% 71%",
+            "--accent": "0 0% 20%",
+            "--accent-foreground": "210 40% 98%",
+            "--destructive": "0 62.8% 30.6%",
+            "--destructive-foreground": "210 40% 98%",
+            "--border": "0 1% 26%",
+            "--input": "0 1% 26%",
+            "--ring": "213 100% 37%",
+            "--sidebar-background": "0 0% 9%",
+            "--sidebar-foreground": "240 4.8% 95.9%",
+            "--sidebar-primary": "224.3 76.3% 48%",
+            "--sidebar-primary-foreground": "0 0% 100%",
+            "--sidebar-accent": "0 0% 13%",
+            "--sidebar-accent-foreground": "240 4.8% 95.9%",
+            "--sidebar-border": "240 3.7% 15.9%",
+            "--sidebar-ring": "217.2 91.2% 59.8%"
+        }
+    }
+}