extended thinking in the ui - cookbook example (#183)

* added the extended thinking in the ui cookbook example

* updated spacing in the main app

Author: jack-tol

extended-thinking-in-the-ui/.env.example

@@ -0,0 +1 @@
+ANTHROPIC_API_KEY=

extended-thinking-in-the-ui/README.md

@@ -0,0 +1,50 @@
+## Extended Thinking Cookbook
+
+Using Chainlit’s native `@step` decorator and a bit of custom JavaScript, it's easy to recreate the "extended thinking" effect we see in many popular LLM applications such as those by Anthropic, OpenAI, Meta, or DeepSeek.
+
+For this cookbook example, I wanted the application to leverage native thinking tokens exposed at the API level to developers. Unfortunately, OpenAI and Meta do not provide access to raw thinking tokens. As a result, when using models from those companies, Chain-of-Thought reasoning is typically achieved by prompting external models (like GPT-4o) to break problems down and then delegating sub-questions to other models.
+
+In contrast, this application uses Anthropic’s Claude 3.7 Sonnet. Anthropic is one of the few companies that expose a model's internal thinking via their API. This makes Claude an excellent choice for showcasing the difference between “Extended Thinking” (i.e., thinking tokens) and simply streaming a final response to the screen.
+
+Additionally, I modified the logic for the thinking step dropdown so that it automatically opens for each message. You can still close it manually if you'd like to keep the chat history cleaner.
+
+---
+
+### How to Use
+
+1. Clone this cookbook example.
+
+2. Navigate into the cloned directory:
+
+   ```bash
+   cd <cloned-directory>
+   ```
+
+3. Install the required dependencies:
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+4. Rename the `.env.example` file to `.env`, and add your `ANTHROPIC_API_KEY`.
+
+5. Run the app:
+
+   ```bash
+   chainlit run app.py
+   ```
+
+6. After running the app for the first time, a `.chainlit` folder will be automatically created with a `config.toml` file inside it.  
+   Delete that auto-generated file and replace it by copying the `config.toml` file from the main directory of this example application into the `.chainlit` folder.  
+   This will apply the custom JavaScript and CSS settings I’ve included.
+
+7. Run the app again:
+
+   ```bash
+   chainlit run app.py
+   ```
+
+8. Once the application opens, type any question into the chat input box.  
+   The model will decide—based on the complexity of your question—whether to go through a short or extended thinking step. After that, it will stream the final response separately to the screen.
+
+The model supports message history, so feel free to engage in a natural back-and-forth and use it just like your own personal LLM-powered application.

extended-thinking-in-the-ui/app.py

@@ -0,0 +1,56 @@
+import chainlit as cl
+from anthropic import Anthropic
+from dotenv import load_dotenv
+
+load_dotenv(override=True)
+client = Anthropic()
+
+@cl.on_chat_start
+async def start():
+    cl.user_session.set("message_history", [])
+
+@cl.step(name="Extended Thinking", show_input=False)
+async def thinking_step(user_message: str):
+    current_step = cl.context.current_step
+    current_step.output = ""
+    has_thinking = False
+    message_history = cl.user_session.get("message_history")
+    message_history.append({"role": "user", "content": user_message})
+    response = client.messages.create(
+        model="claude-3-7-sonnet-latest",
+        system="You are a helpful assistant! Your goal is to provide the most accurate and truthful responses possible.",
+        max_tokens=64000,
+        thinking={"type": "enabled", "budget_tokens": 20000},
+        messages=message_history,
+        stream=True
+    )
+    for chunk in response:
+        if chunk.type == "content_block_delta" and chunk.index == 0:
+            delta = chunk.delta
+            if getattr(delta, "type", None) == "thinking_delta" and hasattr(delta, "thinking"):
+                await current_step.stream_token(delta.thinking)
+                has_thinking = True
+        elif chunk.type == "content_block_stop" and chunk.index == 0:
+            break
+    return has_thinking, response
+
+@cl.on_message
+async def main(msg: cl.Message):
+    message_history = cl.user_session.get("message_history")
+    has_thinking, response = await thinking_step(msg.content)
+    final_message = cl.Message(content="")
+    await final_message.send()
+    ai_response = ""
+    for chunk in response:
+        if has_thinking and chunk.type == "content_block_delta" and chunk.index == 0:
+            continue
+        elif chunk.type == "content_block_delta" and chunk.index == 1:
+            delta = chunk.delta
+            if getattr(delta, "type", None) == "text_delta" and hasattr(delta, "text"):
+                await final_message.stream_token(delta.text)
+                ai_response += delta.text
+        elif chunk.type == "content_block_stop" and chunk.index == 1:
+            await final_message.update()
+    if ai_response:
+        message_history.append({"role": "assistant", "content": ai_response})
+        cl.user_session.set("message_history", message_history)

extended-thinking-in-the-ui/chainlit.md

@@ -0,0 +1,50 @@
+## Extended Thinking Cookbook
+
+Using Chainlit’s native `@step` decorator and a bit of custom JavaScript, it's easy to recreate the "extended thinking" effect we see in many popular LLM applications such as those by Anthropic, OpenAI, Meta, or DeepSeek.
+
+For this cookbook example, I wanted the application to leverage native thinking tokens exposed at the API level to developers. Unfortunately, OpenAI and Meta do not provide access to raw thinking tokens. As a result, when using models from those companies, Chain-of-Thought reasoning is typically achieved by prompting external models (like GPT-4o) to break problems down and then delegating sub-questions to other models.
+
+In contrast, this application uses Anthropic’s Claude 3.7 Sonnet. Anthropic is one of the few companies that expose a model's internal thinking via their API. This makes Claude an excellent choice for showcasing the difference between “Extended Thinking” (i.e., thinking tokens) and simply streaming a final response to the screen.
+
+Additionally, I modified the logic for the thinking step dropdown so that it automatically opens for each message. You can still close it manually if you'd like to keep the chat history cleaner.
+
+---
+
+### How to Use
+
+1. Clone this cookbook example.
+
+2. Navigate into the cloned directory:
+
+   ```bash
+   cd <cloned-directory>
+   ```
+
+3. Install the required dependencies:
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+4. Rename the `.env.example` file to `.env`, and add your `ANTHROPIC_API_KEY`.
+
+5. Run the app:
+
+   ```bash
+   chainlit run app.py
+   ```
+
+6. After running the app for the first time, a `.chainlit` folder will be automatically created with a `config.toml` file inside it.  
+   Delete that auto-generated file and replace it by copying the `config.toml` file from the main directory of this example application into the `.chainlit` folder.  
+   This will apply the custom JavaScript and CSS settings I’ve included.
+
+7. Run the app again:
+
+   ```bash
+   chainlit run app.py
+   ```
+
+8. Once the application opens, type any question into the chat input box.  
+   The model will decide—based on the complexity of your question—whether to go through a short or extended thinking step. After that, it will stream the final response separately to the screen.
+
+The model supports message history, so feel free to engage in a natural back-and-forth and use it just like your own personal LLM-powered application.

extended-thinking-in-the-ui/config.toml

@@ -0,0 +1,94 @@
+[project]
+# Whether to enable telemetry (default: true). No personal data is collected.
+enable_telemetry = true
+
+
+# List of environment variables to be provided by each user to use the app.
+user_env = []
+
+# Duration (in seconds) during which the session is saved when the connection is lost
+session_timeout = 3600
+
+# Duration (in seconds) of the user session expiry
+user_session_timeout = 1296000  # 15 days
+
+# Enable third parties caching (e.g LangChain cache)
+cache = false
+
+# Authorized origins
+allow_origins = ["*"]
+
+[features]
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
+# Autoscroll new user messages at the top of the window
+user_message_autoscroll = true
+
+# Automatically tag threads with the current chat profile (if a chat profile is used)
+auto_tag_thread = true
+
+# Allow users to edit their own messages
+edit_message = true
+
+# Authorize users to spontaneously upload files with messages
+[features.spontaneous_file_upload]
+    enabled = false
+    # Define accepted file types using MIME types
+    # Examples:
+    # 1. For specific file types:
+    #    accept = ["image/jpeg", "image/png", "application/pdf"]
+    # 2. For all files of certain type:
+    #    accept = ["image/*", "audio/*", "video/*"]
+    # 3. For specific file extensions:
+    #    accept = { "application/octet-stream" = [".xyz", ".pdb"] }
+    # Note: Using "*/*" is not recommended as it may cause browser warnings
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
+
+[features.audio]
+    # Sample rate of the audio
+    sample_rate = 24000
+
+[UI]
+# Name of the assistant.
+name = "Extended Thinking Example"
+
+# default_theme = "dark"
+
+layout = "wide"
+
+# Description of the assistant. This is used for HTML tags.
+# description = ""
+
+# Chain of Thought (CoT) display mode. Can be "hidden", "tool_call" or "full".
+cot = "full"
+
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+custom_css = "/public/styles.css"
+
+# Specify a Javascript file that can be used to customize the user interface.
+# The Javascript file can be served from the public directory.
+custom_js = "/public/script.js"
+
+# Specify a custom meta image url.
+# custom_meta_image_url = "https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png"
+
+# Specify a custom build directory for the frontend.
+# This can be used to customize the frontend code.
+# Be careful: If this is a relative path, it should not start with a slash.
+# custom_build = "./public/build"
+
+# Specify optional one or more custom links in the header.
+# [[UI.header_links]]
+#     name = "Issues"
+#     icon_url = "https://avatars.githubusercontent.com/u/128686189?s=200&v=4"
+#     url = "https://github.com/Chainlit/chainlit/issues"
+
+[meta]
+generated_by = "2.4.1"

extended-thinking-in-the-ui/extended_thinking_example.mp4

@@ -0,0 +1,60 @@
+const alreadyExpanded = new WeakSet();
+
+function autoOpenSteps(element) {
+  if (element.matches?.('button[id^="step-"]')) {
+    tryExpand(element);
+  }
+  element.querySelectorAll?.('button[id^="step-"]').forEach((btn) => {
+    tryExpand(btn);
+  });
+}
+
+function tryExpand(btn) {
+  const isClosed = btn.getAttribute('data-state') === 'closed';
+  if (
+    isClosed &&
+    !alreadyExpanded.has(btn) &&
+    btn.querySelector('svg.lucide-chevron-down')
+  ) {
+    btn.click();
+    alreadyExpanded.add(btn);
+  }
+}
+
+function removeCopyButtons() {
+  document.querySelectorAll('button[data-state="closed"]').forEach((button) => {
+    if (button.querySelector('.lucide-copy')) {
+      button.remove();
+    }
+  });
+}
+
+removeCopyButtons();
+
+const mutationObserver = new MutationObserver((mutationList) => {
+  for (const mutation of mutationList) {
+    if (mutation.type === 'childList') {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          autoOpenSteps(node);
+        }
+      }
+    }
+  }
+});
+
+mutationObserver.observe(document.body, {
+  childList: true,
+  subtree: true,
+});
+
+const copyButtonObserver = new MutationObserver(() => {
+  removeCopyButtons();
+});
+
+copyButtonObserver.observe(document.body, {
+  childList: true,
+  subtree: true,
+});
+
+document.querySelectorAll('button[id^="step-"]').forEach(autoOpenSteps);

extended-thinking-in-the-ui/public/script.js

@@ -0,0 +1,18 @@
+#theme-toggle,
+#new-chat-button {
+  display: none !important;
+}
+
+.watermark {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  height: 0px !important;
+  width: 0px !important;
+  overflow: hidden !important;
+}
+
+#chat-input:empty::before {
+  content: 'Ask anything';
+}