From 9a68db8e44e3d655b94c5994f1923d7b31fa0e8c Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 09:06:33 -0500
Subject: [PATCH 01/15] Initial infrasctructure for notebooks page

---
 website/.gitignore                      |  5 ++
 website/docs/Gallery.mdx                |  3 +-
 website/docs/notebooks.mdx              | 11 ++++
 website/docusaurus.config.js            |  5 +-
 website/src/components/GalleryPage.js   | 77 +++++++++++++++----------
 website/src/components/NotebookUtils.js | 23 ++++++++
 6 files changed, 90 insertions(+), 34 deletions(-)
 create mode 100644 website/docs/notebooks.mdx
 create mode 100644 website/src/components/NotebookUtils.js

diff --git a/website/.gitignore b/website/.gitignore
index 495a9753d172..0de69db32929 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -12,6 +12,11 @@ docs/reference
 
 docs/llm_endpoint_configuration.mdx
 
+# These are generated files from the notebooks
+docs/notebooks/*.mdx
+docs/notebooks/**/*.png
+docs/notebooks/*.svg
+
 # Misc
 .DS_Store
 .env.local
diff --git a/website/docs/Gallery.mdx b/website/docs/Gallery.mdx
index 1b07b138152e..6a9c0975271c 100644
--- a/website/docs/Gallery.mdx
+++ b/website/docs/Gallery.mdx
@@ -1,4 +1,5 @@
 import GalleryPage from '../src/components/GalleryPage';
+import galleryData from "../src/data/gallery.json";
 
 # Gallery
 
@@ -7,7 +8,7 @@ This page contains a list of demos that use AutoGen in various applications from
 **Contribution guide:**
 Built something interesting with AutoGen? Submit a PR to add it to the list! See the [Contribution Guide below](#contributing) for more details.
 
-<GalleryPage />
+<GalleryPage items={galleryData} />
 
 ## Contributing
 
diff --git a/website/docs/notebooks.mdx b/website/docs/notebooks.mdx
new file mode 100644
index 000000000000..ec38a95bb537
--- /dev/null
+++ b/website/docs/notebooks.mdx
@@ -0,0 +1,11 @@
+import {findAllNotebooks} from '../src/components/NotebookUtils';
+import GalleryPage from '../src/components/GalleryPage';
+
+# Notebooks
+
+This page contains a collection of notebooks that demonstrate how to use
+AutoGen. The notebooks are tagged with the topics they cover.
+For example, a notebook that demonstrates how to use function calling will
+be tagged with `function call`.
+
+<GalleryPage items={findAllNotebooks()} target="_self" allowDefaultImage={false}/>
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index b12f45fc1c48..caf77b759643 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -69,10 +69,9 @@ module.exports = {
         //   label: 'Examples',
         // },
         {
-          type: "doc",
-          docId: "Examples",
+          to: "docs/notebooks",
           position: "left",
-          label: "Examples",
+          label: "Notebooks",
         },
         {
           label: "Resources",
diff --git a/website/src/components/GalleryPage.js b/website/src/components/GalleryPage.js
index 26b2bc7aa130..d24cc334fa1b 100644
--- a/website/src/components/GalleryPage.js
+++ b/website/src/components/GalleryPage.js
@@ -1,12 +1,11 @@
 import React, { useEffect, useState, useCallback } from "react";
-import galleryData from "../data/gallery.json";
 import { Card, List, Select, Typography } from "antd";
 import { useLocation, useHistory } from "react-router-dom";
 
 const { Option } = Select;
 const { Paragraph, Title } = Typography;
 
-const GalleryPage = () => {
+const GalleryPage = (props) => {
   const location = useLocation();
   const history = useHistory();
 
@@ -28,15 +27,23 @@ const GalleryPage = () => {
 
   const TagsView = ({ tags }) => (
     <div className="tags-container">
-      {tags.map((tag, index) => (
-        <span className="tag" key={index}>
+      {tags?.map((tag, index) => (
+
+        <span className="tag" key={index} onClick={(evt) => {
+          if (!selectedTags.includes(tag)) {
+            handleTagChange([...selectedTags, tag])
+          }
+          evt.preventDefault();
+          evt.stopPropagation();
+          return false;
+        }} >
           {tag}
         </span>
       ))}
     </div>
   );
 
-  const allTags = [...new Set(galleryData.flatMap((item) => item.tags))];
+  const allTags = [...new Set(props.items.flatMap((item) => item.tags))];
 
   const handleTagChange = (tags) => {
     setSelectedTags(tags);
@@ -49,11 +56,38 @@ const GalleryPage = () => {
 
   const filteredData =
     selectedTags.length > 0
-      ? galleryData.filter((item) =>
-          selectedTags.some((tag) => item.tags.includes(tag))
-        )
-      : galleryData;
+      ? props.items.filter((item) =>
+        selectedTags.some((tag) => item.tags.includes(tag))
+      )
+      : props.items;
+
+  const defaultImageIfNoImage = props.allowDefaultImage ?? true;
+  console.log(defaultImageIfNoImage)
+  const imageFunc = (item) => {
+    const image =
+      <img
+        alt={item.title}
+        src={
+          item.image
+            ? item.image.includes("http")
+              ? item.image
+              : `/autogen/img/gallery/${item.image}`
+            : `/autogen/img/gallery/default.png`
+        }
+        style={{
+          height: 150,
+          width: "fit-content",
+          margin: "auto",
+          padding: 2,
+        }}
+      />
+      ;
+
+    const imageToUse = item.image ? image : defaultImageIfNoImage ? image : null;
+    return imageToUse;
+  }
 
+  const target = props.target ?? "_blank";
   return (
     <div>
       <Select
@@ -86,7 +120,7 @@ const GalleryPage = () => {
           <List.Item>
             <a
               href={item.link}
-              target="_blank"
+              target={target}
               rel="noopener noreferrer"
               style={{ display: "block" }}
             >
@@ -94,30 +128,13 @@ const GalleryPage = () => {
                 hoverable
                 bordered
                 style={{ height: 370, paddingTop: 15 }}
-                cover={
-                  <img
-                    alt={item.title}
-                    src={
-                      item.image
-                        ? item.image.includes("http")
-                          ? item.image
-                          : `/autogen/img/gallery/${item.image}`
-                        : `/autogen/img/gallery/default.png`
-                    }
-                    style={{
-                      height: 150,
-                      width: "fit-content",
-                      margin: "auto",
-                      padding: 2,
-                    }}
-                  />
-                }
+                cover={imageFunc(item)}
               >
-                <Title level={5} ellipsis={{ rows: 2 }}>
+                <Title level={5} ellipsis={{ rows: 4 }}>
                   {item.title}
                 </Title>
                 <Paragraph
-                  ellipsis={{ rows: 3 }}
+                  ellipsis={{ rows: imageFunc(item) ? 3 : 7 }}
                   style={{
                     fontWeight: "normal",
                     color: "#727272",
diff --git a/website/src/components/NotebookUtils.js b/website/src/components/NotebookUtils.js
new file mode 100644
index 000000000000..82ea4e3044f3
--- /dev/null
+++ b/website/src/components/NotebookUtils.js
@@ -0,0 +1,23 @@
+function findAllNotebooks() {
+    const notebooks = [];
+    const context = require.context("../../docs/notebooks", true, /\.mdx$/);
+    context.keys().forEach((key) => {
+        const notebook = context(key);
+        // Remove .mdx extension from the key.
+        key = key.slice(0, -4);
+
+        notebooks.push({
+            title: notebook.contentTitle,
+            link: "/autogen/docs/notebooks/" + key,
+            description: notebook.frontMatter.description,
+            image: notebook.frontMatter.image,
+            tags: notebook.frontMatter.tags
+        });
+    });
+    console.log(notebooks);
+    return notebooks;
+}
+
+export {
+    findAllNotebooks
+};

From e7f6372a0309bb0001d520dbfc527e2d478c1a34 Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 09:06:52 -0500
Subject: [PATCH 02/15] migrate two notebooks

---
 ...at_auto_feedback_from_code_execution.ipynb | 81 +++++--------------
 .../agentchat_function_call_async.ipynb       | 73 +++++------------
 2 files changed, 40 insertions(+), 114 deletions(-)
 rename {notebook => website/docs/notebooks}/agentchat_auto_feedback_from_code_execution.ipynb (98%)
 rename {notebook => website/docs/notebooks}/agentchat_function_call_async.ipynb (83%)

diff --git a/notebook/agentchat_auto_feedback_from_code_execution.ipynb b/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb
similarity index 98%
rename from notebook/agentchat_auto_feedback_from_code_execution.ipynb
rename to website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb
index 061078afda2d..659cfe7ef19e 100644
--- a/notebook/agentchat_auto_feedback_from_code_execution.ipynb
+++ b/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb
@@ -1,13 +1,5 @@
 {
  "cells": [
-  {
-   "attachments": {},
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "<a href=\"https://colab.research.google.com/github/microsoft/autogen/blob/main/notebook/agentchat_auto_feedback_from_code_execution.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
-   ]
-  },
   {
    "attachments": {},
    "cell_type": "markdown",
@@ -17,45 +9,32 @@
     }
    },
    "source": [
-    "# Auto Generated Agent Chat: Task Solving with Code Generation, Execution & Debugging\n",
+    "---\n",
+    "tags: [\"code generation\", \"debugging\"]\n",
+    "description: |\n",
+    "    Use conversable language learning model agents to solve tasks and provide automatic feedback through a comprehensive example of writing, executing, and debugging Python code to compare stock price changes.\n",
+    "custom_edit_url: https://github.com/microsoft/autogen/edit/main/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb\n",
+    "---\n",
+    "\n",
+    "# Task Solving with Code Generation, Execution and Debugging\n",
+    "\n",
+    "<a href=\"https://colab.research.google.com/github/microsoft/autogen/blob/main/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>\n",
     "\n",
     "AutoGen offers conversable LLM agents, which can be used to solve various tasks with human or automatic feedback, including tasks that require using tools via code.\n",
     "Please find documentation about this feature [here](https://microsoft.github.io/autogen/docs/Use-Cases/agent_chat).\n",
     "\n",
     "In this notebook, we demonstrate how to use `AssistantAgent` and `UserProxyAgent` to write code and execute the code. Here `AssistantAgent` is an LLM-based agent that can write Python code (in a Python coding block) for a user to execute for a given task. `UserProxyAgent` is an agent which serves as a proxy for the human user to execute the code written by `AssistantAgent`, or automatically execute the code. Depending on the setting of `human_input_mode` and `max_consecutive_auto_reply`, the `UserProxyAgent` either solicits feedback from the human user or returns auto-feedback based on the result of code execution (success or failure and corresponding outputs) to `AssistantAgent`. `AssistantAgent` will debug the code and suggest new code if the result contains error. The two agents keep communicating to each other until the task is done.\n",
     "\n",
-    "## Requirements\n",
+    "\\:\\:\\:info Requirements\n",
     "\n",
-    "AutoGen requires `Python>=3.8`. To run this notebook example, please install:\n",
+    "Install `pyautogen`:\n",
     "```bash\n",
     "pip install pyautogen\n",
-    "```"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {
-    "execution": {
-     "iopub.execute_input": "2023-02-13T23:40:52.317406Z",
-     "iopub.status.busy": "2023-02-13T23:40:52.316561Z",
-     "iopub.status.idle": "2023-02-13T23:40:52.321193Z",
-     "shell.execute_reply": "2023-02-13T23:40:52.320628Z"
-    }
-   },
-   "outputs": [],
-   "source": [
-    "# %pip install pyautogen>=0.2.3"
-   ]
-  },
-  {
-   "attachments": {},
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Set your API Endpoint\n",
+    "```\n",
     "\n",
-    "The [`config_list_from_json`](https://microsoft.github.io/autogen/docs/reference/oai/openai_utils#config_list_from_json) function loads a list of configurations from an environment variable or a json file.\n"
+    "For more information, please refer to the [installation guide](/docs/installation/).\n",
+    "\n",
+    "\\:\\:\\:"
    ]
   },
   {
@@ -84,33 +63,11 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "It first looks for environment variable \"OAI_CONFIG_LIST\" which needs to be a valid json string. If that variable is not found, it then looks for a json file named \"OAI_CONFIG_LIST\". It filters the configs by models (you can filter by other keys as well). Only the gpt-4 models are kept in the list based on the filter condition.\n",
+    "\\:\\:\\:tip\n",
     "\n",
-    "The config list looks like the following:\n",
-    "```python\n",
-    "config_list = [\n",
-    "    {\n",
-    "        'model': 'gpt-4',\n",
-    "        'api_key': '<your OpenAI API key here>',\n",
-    "    },\n",
-    "    {\n",
-    "        'model': 'gpt-4',\n",
-    "        'api_key': '<your Azure OpenAI API key here>',\n",
-    "        'base_url': '<your Azure OpenAI API base here>',\n",
-    "        'api_type': 'azure',\n",
-    "        'api_version': '2023-06-01-preview',\n",
-    "    },\n",
-    "    {\n",
-    "        'model': 'gpt-4-32k',\n",
-    "        'api_key': '<your Azure OpenAI API key here>',\n",
-    "        'base_url': '<your Azure OpenAI API base here>',\n",
-    "        'api_type': 'azure',\n",
-    "        'api_version': '2023-06-01-preview',\n",
-    "    },\n",
-    "]\n",
-    "```\n",
+    "Learn more about the various ways to configure LLM endpoints [here](/docs/llm_endpoint_configuration).\n",
     "\n",
-    "You can set the value of config_list in any way you prefer. Please refer to this [notebook](https://github.com/microsoft/autogen/blob/main/notebook/oai_openai_utils.ipynb) for full code examples of the different methods."
+    "\\:\\:\\:"
    ]
   },
   {
diff --git a/notebook/agentchat_function_call_async.ipynb b/website/docs/notebooks/agentchat_function_call_async.ipynb
similarity index 83%
rename from notebook/agentchat_function_call_async.ipynb
rename to website/docs/notebooks/agentchat_function_call_async.ipynb
index ca65291b2c04..4715181a0bee 100644
--- a/notebook/agentchat_function_call_async.ipynb
+++ b/website/docs/notebooks/agentchat_function_call_async.ipynb
@@ -6,7 +6,16 @@
    "id": "ae1f50ec",
    "metadata": {},
    "source": [
-    "<a href=\"https://colab.research.google.com/github/microsoft/autogen/blob/main/notebook/agentchat_function_call.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
+    "---\n",
+    "tags: [\"code generation\", \"function call\", \"async\"]\n",
+    "description: |\n",
+    "    Learn how to implement both synchronous and asynchronous function calls using AssistantAgent and UserProxyAgent in AutoGen, with examples of their application in individual and group chat settings for task execution with language models.\n",
+    "custom_edit_url: https://github.com/microsoft/autogen/edit/main/website/docs/notebooks/agentchat_function_call_async.ipynb\n",
+    "---\n",
+    "\n",
+    "# Task Solving with Provided Tools as Functions (Asynchronous Function Calls)\n",
+    "\n",
+    "<a href=\"https://colab.research.google.com/github/microsoft/autogen/blob/main/website/docs/notebooks/agentchat_function_call.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
    ]
   },
   {
@@ -15,48 +24,20 @@
    "id": "9a71fa36",
    "metadata": {},
    "source": [
-    "# Auto Generated Agent Chat: Task Solving with Provided Tools as Functions (Asynchronous Function Calls)\n",
-    "\n",
     "AutoGen offers conversable agents powered by LLM, tool, or human, which can be used to perform tasks collectively via automated chat. This framework allows tool use and human participation through multi-agent conversation. Please find documentation about this feature [here](https://microsoft.github.io/autogen/docs/Use-Cases/agent_chat).\n",
     "\n",
     "In this notebook, we demonstrate how to use `AssistantAgent` and `UserProxyAgent` to make function calls with the new feature of OpenAI models (in model version 0613). A specified prompt and function configs must be passed to `AssistantAgent` to initialize the agent. The corresponding functions must be passed to `UserProxyAgent`, which will execute any function calls made by `AssistantAgent`. Besides this requirement of matching descriptions with functions, we recommend checking the system message in the `AssistantAgent` to ensure the instructions align with the function call descriptions.\n",
     "\n",
-    "## Requirements\n",
+    "\\:\\:\\:info Requirements\n",
     "\n",
-    "AutoGen requires `Python>=3.8`. To run this notebook example, please install `pyautogen`:\n",
+    "Install `pyautogen`:\n",
     "```bash\n",
     "pip install pyautogen\n",
-    "```"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "id": "2b803c17",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# %pip install \"pyautogen>=0.2.6\""
-   ]
-  },
-  {
-   "attachments": {},
-   "cell_type": "markdown",
-   "id": "5ebd2397",
-   "metadata": {},
-   "source": [
-    "## Set your API Endpoint\n",
-    "\n",
-    "The [`config_list_from_models`](https://microsoft.github.io/autogen/docs/reference/oai/openai_utils#config_list_from_models) function tries to create a list of configurations using Azure OpenAI endpoints and OpenAI endpoints for the provided list of models. It assumes the api keys and api bases are stored in the corresponding environment variables or local txt files:\n",
-    "\n",
-    "- OpenAI API key: os.environ[\"OPENAI_API_KEY\"] or `openai_api_key_file=\"key_openai.txt\"`.\n",
-    "- Azure OpenAI API key: os.environ[\"AZURE_OPENAI_API_KEY\"] or `aoai_api_key_file=\"key_aoai.txt\"`. Multiple keys can be stored, one per line.\n",
-    "- Azure OpenAI API base: os.environ[\"AZURE_OPENAI_API_BASE\"] or `aoai_api_base_file=\"base_aoai.txt\"`. Multiple bases can be stored, one per line.\n",
+    "```\n",
     "\n",
-    "It's OK to have only the OpenAI API key, or only the Azure OpenAI API key + base.\n",
-    "If you open this notebook in google colab, you can upload your files by clicking the file icon on the left panel and then choosing \"upload file\" icon.\n",
+    "For more information, please refer to the [installation guide](/docs/installation/).\n",
     "\n",
-    "The following code excludes Azure OpenAI endpoints from the config list because some endpoints don't support functions yet. Remove the `exclude` argument if they do."
+    "\\:\\:\\:\n"
    ]
   },
   {
@@ -72,9 +53,9 @@
     "\n",
     "import autogen\n",
     "\n",
+    "# Exclude Azure OpenAI endpoints because some endpoints don't support functions yet. Remove the filter dict if they do.\n",
     "config_list = autogen.config_list_from_json(\n",
     "    \"OAI_CONFIG_LIST\",\n",
-    "    file_location=\".\",\n",
     "    filter_dict={\n",
     "        \"model\": [\"gpt-4\"],\n",
     "    },\n",
@@ -87,23 +68,11 @@
    "id": "92fde41f",
    "metadata": {},
    "source": [
-    "The config list looks like the following:\n",
-    "```python\n",
-    "config_list = [\n",
-    "    {\n",
-    "        'model': 'gpt-4',\n",
-    "        'api_key': '<your OpenAI API key here>',\n",
-    "    },  # OpenAI API endpoint for gpt-4\n",
-    "    {\n",
-    "        'model': 'gpt-3.5-turbo',\n",
-    "        'api_key': '<your OpenAI API key here>',\n",
-    "    },  # OpenAI API endpoint for gpt-3.5-turbo\n",
-    "    {\n",
-    "        'model': 'gpt-3.5-turbo-16k',\n",
-    "        'api_key': '<your OpenAI API key here>',\n",
-    "    },  # OpenAI API endpoint for gpt-3.5-turbo-16k\n",
-    "]\n",
-    "```\n"
+    "\\:\\:\\:tip\n",
+    "\n",
+    "Learn more about the various ways to configure LLM endpoints [here](/docs/llm_endpoint_configuration).\n",
+    "\n",
+    "\\:\\:\\:"
    ]
   },
   {

From 2ec2e5efd5c4601178fcce8a4c13ec4ea10c61a5 Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 09:09:53 -0500
Subject: [PATCH 03/15] add readme notification for notebook dir

---
 notebook/readme.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 notebook/readme.md

diff --git a/notebook/readme.md b/notebook/readme.md
new file mode 100644
index 000000000000..f35ef8ca546a
--- /dev/null
+++ b/notebook/readme.md
@@ -0,0 +1,3 @@
+# Notebooks
+
+⚠️ The notebooks that were in this folder have been moved to [`/website/docs/notebooks`](/website/docs/notebooks) folder as they are now rendered as part of the website. ⚠️

From 87a1572c2873bb2806a6ffbcf05d93845654e883 Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 09:53:53 -0500
Subject: [PATCH 04/15] override 'text' prism language to add basic syntactical
 structure to autogens output

---
 website/src/theme/prism-include-languages.js | 41 ++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 website/src/theme/prism-include-languages.js

diff --git a/website/src/theme/prism-include-languages.js b/website/src/theme/prism-include-languages.js
new file mode 100644
index 000000000000..257eb41ac625
--- /dev/null
+++ b/website/src/theme/prism-include-languages.js
@@ -0,0 +1,41 @@
+import siteConfig from '@generated/docusaurus.config';
+export default function prismIncludeLanguages(PrismObject) {
+  const {
+    themeConfig: {prism},
+  } = siteConfig;
+  const {additionalLanguages} = prism;
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+  globalThis.Prism = PrismObject;
+
+  additionalLanguages.forEach((lang) => {
+    if (lang === 'php') {
+      // eslint-disable-next-line global-require
+      require('prismjs/components/prism-markup-templating.js');
+    }
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`);
+  });
+
+  Prism.languages['text'] = {
+      'message-id': {
+        pattern: /\b(:?[A-Za-z0-9\-_]+)\s+\(:?to\s([A-Za-z0=9\-_]+)\)\:/,
+        inside: {
+          'class-name': /\b(?!to\b)[A-Za-z0-9\-_^]+\b/,
+          punctuation: /[()]/,
+          keyword: /\bto\b/
+        }
+      },
+      builtin: /\bTERMINATE\b/,
+      punctuation: /(?:(---)-+)/,
+      function: />>>>>>>>.+[\r\n]?/
+   };
+
+
+
+  delete globalThis.Prism;
+}

From b8bb1c7d740c4775b3e8bab8b23768ac360760c0 Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 18:30:12 -0500
Subject: [PATCH 05/15] Rework to retain existing directory and not expose
 front matter to consumers of the notebook

---
 notebook/agentchat_RetrieveChat.ipynb         | 103 +++-----
 ...at_auto_feedback_from_code_execution.ipynb |   8 +-
 .../agentchat_function_call_async.ipynb       |  10 +-
 website/.gitignore                            |   6 +-
 website/docusaurus.config.js                  |  11 +-
 website/process_notebooks.py                  | 235 ++++++++++++++++++
 website/src/components/GalleryPage.js         |  19 +-
 website/src/components/NotebookUtils.js       |   5 +-
 website/src/css/custom.css                    |  15 ++
 9 files changed, 311 insertions(+), 101 deletions(-)
 rename {website/docs/notebooks => notebook}/agentchat_auto_feedback_from_code_execution.ipynb (99%)
 rename {website/docs/notebooks => notebook}/agentchat_function_call_async.ipynb (96%)
 create mode 100644 website/process_notebooks.py

diff --git a/notebook/agentchat_RetrieveChat.ipynb b/notebook/agentchat_RetrieveChat.ipynb
index d229f53da2e3..b40787fd8ea5 100644
--- a/notebook/agentchat_RetrieveChat.ipynb
+++ b/notebook/agentchat_RetrieveChat.ipynb
@@ -5,16 +5,13 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<a href=\"https://colab.research.google.com/github/microsoft/autogen/blob/main/notebook/agentchat_RetrieveChat.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
-   ]
-  },
-  {
-   "attachments": {},
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "<a id=\"toc\"></a>\n",
-    "# Auto Generated Agent Chat: Using RetrieveChat for Retrieve Augmented Code Generation and Question Answering\n",
+    "<!--\n",
+    "tags: [\"RAG\"]\n",
+    "description: |\n",
+    "    Explore the use of AutoGen's RetrieveChat for tasks like code generation from docstrings, answering complex questions with human feedback, and exploiting features like Update Context, custom prompts, and few-shot learning.\n",
+    "-->\n",
+    "\n",
+    "# Using RetrieveChat for Retrieve Augmented Code Generation and Question Answering\n",
     "\n",
     "AutoGen offers conversable agents powered by LLM, tool or human, which can be used to perform tasks collectively via automated chat. This framework allows tool use and human participation through multi-agent conversation.\n",
     "Please find documentation about this feature [here](https://microsoft.github.io/autogen/docs/Use-Cases/agent_chat).\n",
@@ -24,35 +21,24 @@
     "## Table of Contents\n",
     "We'll demonstrate six examples of using RetrieveChat for code generation and question answering:\n",
     "\n",
-    "[Example 1: Generate code based off docstrings w/o human feedback](#example-1)\n",
-    "\n",
-    "[Example 2: Answer a question based off docstrings w/o human feedback](#example-2)\n",
-    "\n",
-    "[Example 3: Generate code based off docstrings w/ human feedback](#example-3)\n",
-    "\n",
-    "[Example 4: Answer a question based off docstrings w/ human feedback](#example-4)\n",
+    "- [Example 1: Generate code based off docstrings w/o human feedback](#example-1)\n",
+    "- [Example 2: Answer a question based off docstrings w/o human feedback](#example-2)\n",
+    "- [Example 3: Generate code based off docstrings w/ human feedback](#example-3)\n",
+    "- [Example 4: Answer a question based off docstrings w/ human feedback](#example-4)\n",
+    "- [Example 5: Solve comprehensive QA problems with RetrieveChat's unique feature `Update Context`](#example-5)\n",
+    "- [Example 6: Solve comprehensive QA problems with customized prompt and few-shot learning](#example-6)\n",
     "\n",
-    "[Example 5: Solve comprehensive QA problems with RetrieveChat's unique feature `Update Context`](#example-5)\n",
-    "\n",
-    "[Example 6: Solve comprehensive QA problems with customized prompt and few-shot learning](#example-6)\n",
+    "\\:\\:\\:info Requirements\n",
     "\n",
+    "Some extra dependencies are needed for this notebook, which can be installed via pip:\n",
     "\n",
+    "```bash\n",
+    "pip install pyautogen[retrievechat] flaml[automl]\n",
+    "```\n",
     "\n",
-    "## Requirements\n",
+    "For more information, please refer to the [installation guide](/docs/installation/).\n",
     "\n",
-    "AutoGen requires `Python>=3.8`. To run this notebook example, please install the [retrievechat] option.\n",
-    "```bash\n",
-    "pip install \"pyautogen[retrievechat]>=0.2.3\" \"flaml[automl]\"\n",
-    "```"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# %pip install \"pyautogen[retrievechat]>=0.2.3\" \"flaml[automl]\""
+    "\\:\\:\\:\n"
    ]
   },
   {
@@ -94,7 +80,6 @@
     "\n",
     "config_list = autogen.config_list_from_json(\n",
     "    env_or_file=\"OAI_CONFIG_LIST\",\n",
-    "    file_location=\".\",\n",
     "    filter_dict={\n",
     "        \"model\": {\n",
     "            \"gpt-4\",\n",
@@ -116,35 +101,11 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "It first looks for environment variable \"OAI_CONFIG_LIST\" which needs to be a valid json string. If that variable is not found, it then looks for a json file named \"OAI_CONFIG_LIST\". It filters the configs by models (you can filter by other keys as well). Only the gpt-4 and gpt-3.5-turbo models are kept in the list based on the filter condition.\n",
-    "\n",
-    "The config list looks like the following:\n",
-    "```python\n",
-    "config_list = [\n",
-    "    {\n",
-    "        'model': 'gpt-4',\n",
-    "        'api_key': '<your OpenAI API key here>',\n",
-    "    },\n",
-    "    {\n",
-    "        'model': 'gpt-4',\n",
-    "        'api_key': '<your Azure OpenAI API key here>',\n",
-    "        'base_url': '<your Azure OpenAI API base here>',\n",
-    "        'api_type': 'azure',\n",
-    "        'api_version': '2023-06-01-preview',\n",
-    "    },\n",
-    "    {\n",
-    "        'model': 'gpt-3.5-turbo',\n",
-    "        'api_key': '<your Azure OpenAI API key here>',\n",
-    "        'base_url': '<your Azure OpenAI API base here>',\n",
-    "        'api_type': 'azure',\n",
-    "        'api_version': '2023-06-01-preview',\n",
-    "    },\n",
-    "]\n",
-    "```\n",
+    "\\:\\:\\:tip\n",
     "\n",
-    "If you open this notebook in colab, you can upload your files by clicking the file icon on the left panel and then choose \"upload file\" icon.\n",
+    "Learn more about the various ways to configure LLM endpoints [here](/docs/llm_endpoint_configuration).\n",
     "\n",
-    "You can set the value of config_list in other ways you prefer, e.g., loading from a YAML file."
+    "\\:\\:\\:"
    ]
   },
   {
@@ -230,10 +191,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<a id=\"example-1\"></a>\n",
     "### Example 1\n",
     "\n",
-    "[back to top](#toc)\n",
+    "[Back to top](#table-of-contents)\n",
     "\n",
     "Use RetrieveChat to help generate sample code and automatically run the code and fix errors if there is any.\n",
     "\n",
@@ -537,10 +497,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<a id=\"example-2\"></a>\n",
     "### Example 2\n",
     "\n",
-    "[back to top](#toc)\n",
+    "[Back to top](#table-of-contents)\n",
     "\n",
     "Use RetrieveChat to answer a question that is not related to code generation.\n",
     "\n",
@@ -1092,10 +1051,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<a id=\"example-3\"></a>\n",
     "### Example 3\n",
     "\n",
-    "[back to top](#toc)\n",
+    "[Back to top](#table-of-contents)\n",
     "\n",
     "Use RetrieveChat to help generate sample code and ask for human-in-loop feedbacks.\n",
     "\n",
@@ -1506,10 +1464,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<a id=\"example-4\"></a>\n",
     "### Example 4\n",
     "\n",
-    "[back to top](#toc)\n",
+    "[Back to top](#table-of-contents)\n",
     "\n",
     "Use RetrieveChat to answer a question and ask for human-in-loop feedbacks.\n",
     "\n",
@@ -2065,10 +2022,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<a id=\"example-5\"></a>\n",
     "### Example 5\n",
     "\n",
-    "[back to top](#toc)\n",
+    "[Back to top](#table-of-contents)\n",
     "\n",
     "Use RetrieveChat to answer questions for [NaturalQuestion](https://ai.google.com/research/NaturalQuestions) dataset.\n",
     "\n",
@@ -2665,10 +2621,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<a id=\"example-6\"></a>\n",
     "### Example 6\n",
     "\n",
-    "[back to top](#toc)\n",
+    "[Back to top](#table-of-contents)\n",
     "\n",
     "Use RetrieveChat to answer multi-hop questions for [2WikiMultihopQA](https://github.com/Alab-NII/2wikimultihop) dataset with customized prompt and few-shot learning.\n",
     "\n",
diff --git a/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb b/notebook/agentchat_auto_feedback_from_code_execution.ipynb
similarity index 99%
rename from website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb
rename to notebook/agentchat_auto_feedback_from_code_execution.ipynb
index 659cfe7ef19e..7541ba131c6e 100644
--- a/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb
+++ b/notebook/agentchat_auto_feedback_from_code_execution.ipynb
@@ -1,7 +1,6 @@
 {
  "cells": [
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {
     "slideshow": {
@@ -9,17 +8,14 @@
     }
    },
    "source": [
-    "---\n",
+    "<!--\n",
     "tags: [\"code generation\", \"debugging\"]\n",
     "description: |\n",
     "    Use conversable language learning model agents to solve tasks and provide automatic feedback through a comprehensive example of writing, executing, and debugging Python code to compare stock price changes.\n",
-    "custom_edit_url: https://github.com/microsoft/autogen/edit/main/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb\n",
-    "---\n",
+    "-->\n",
     "\n",
     "# Task Solving with Code Generation, Execution and Debugging\n",
     "\n",
-    "<a href=\"https://colab.research.google.com/github/microsoft/autogen/blob/main/website/docs/notebooks/agentchat_auto_feedback_from_code_execution.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>\n",
-    "\n",
     "AutoGen offers conversable LLM agents, which can be used to solve various tasks with human or automatic feedback, including tasks that require using tools via code.\n",
     "Please find documentation about this feature [here](https://microsoft.github.io/autogen/docs/Use-Cases/agent_chat).\n",
     "\n",
diff --git a/website/docs/notebooks/agentchat_function_call_async.ipynb b/notebook/agentchat_function_call_async.ipynb
similarity index 96%
rename from website/docs/notebooks/agentchat_function_call_async.ipynb
rename to notebook/agentchat_function_call_async.ipynb
index 4715181a0bee..876735b188aa 100644
--- a/website/docs/notebooks/agentchat_function_call_async.ipynb
+++ b/notebook/agentchat_function_call_async.ipynb
@@ -1,21 +1,17 @@
 {
  "cells": [
   {
-   "attachments": {},
    "cell_type": "markdown",
    "id": "ae1f50ec",
    "metadata": {},
    "source": [
-    "---\n",
+    "<!--\n",
     "tags: [\"code generation\", \"function call\", \"async\"]\n",
     "description: |\n",
     "    Learn how to implement both synchronous and asynchronous function calls using AssistantAgent and UserProxyAgent in AutoGen, with examples of their application in individual and group chat settings for task execution with language models.\n",
-    "custom_edit_url: https://github.com/microsoft/autogen/edit/main/website/docs/notebooks/agentchat_function_call_async.ipynb\n",
-    "---\n",
-    "\n",
-    "# Task Solving with Provided Tools as Functions (Asynchronous Function Calls)\n",
+    "-->\n",
     "\n",
-    "<a href=\"https://colab.research.google.com/github/microsoft/autogen/blob/main/website/docs/notebooks/agentchat_function_call.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
+    "# Task Solving with Provided Tools as Functions (Asynchronous Function Calls)\n"
    ]
   },
   {
diff --git a/website/.gitignore b/website/.gitignore
index 0de69db32929..0234ebd0689a 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -9,14 +9,10 @@ package-lock.json
 .docusaurus
 .cache-loader
 docs/reference
+/docs/notebooks
 
 docs/llm_endpoint_configuration.mdx
 
-# These are generated files from the notebooks
-docs/notebooks/*.mdx
-docs/notebooks/**/*.png
-docs/notebooks/*.svg
-
 # Misc
 .DS_Store
 .env.local
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index caf77b759643..27a4416b9119 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -68,11 +68,12 @@ module.exports = {
         //   to: 'examples',
         //   label: 'Examples',
         // },
-        {
-          to: "docs/notebooks",
-          position: "left",
-          label: "Notebooks",
-        },
+        // Uncomment below to add Notebooks to the navbar
+        // {
+        //   to: "docs/notebooks",
+        //   position: "left",
+        //   label: "Notebooks",
+        // },
         {
           label: "Resources",
           type: "dropdown",
diff --git a/website/process_notebooks.py b/website/process_notebooks.py
new file mode 100644
index 000000000000..c33e6d372b98
--- /dev/null
+++ b/website/process_notebooks.py
@@ -0,0 +1,235 @@
+import sys
+from pathlib import Path
+import subprocess
+import argparse
+import shutil
+import json
+import typing
+import concurrent.futures
+
+try:
+    import yaml
+except ImportError:
+    print("pyyaml not found.\n\nPlease install pyyaml:\n\tpip install pyyaml\n")
+    sys.exit(1)
+
+try:
+    from termcolor import colored
+except ImportError:
+
+    def colored(x, *args, **kwargs):
+        return x
+    
+
+class Result:
+    def __init__(self, returncode: int, stdout: str, stderr: str):
+        self.returncode = returncode
+        self.stdout = stdout
+        self.stderr = stderr
+
+
+def check_quarto_bin(quarto_bin: str = "quarto"):
+    """Check if quarto is installed."""
+    try:
+        subprocess.check_output([quarto_bin, "--version"])
+    except FileNotFoundError:
+        print("Quarto is not installed. Please install it from https://quarto.org")
+        sys.exit(1)
+
+def notebooks_target_dir(website_directory: Path) -> Path:
+    """Return the target directory for notebooks."""
+    return website_directory / "docs" / "notebooks"
+
+
+def exract_yaml_from_notebook(notebook: Path) -> typing.Optional[typing.Dict]:
+    with open(notebook, "r") as f:
+        content = f.read()
+
+    json_content = json.loads(content)
+    first_cell = json_content["cells"][0]
+
+    # <!-- and --> must exists on lines on their own
+    if first_cell["cell_type"] != "markdown":
+        return None
+    
+    lines = first_cell["source"]
+    if "<!--" != lines[0].strip():
+        return None
+    
+    # remove trailing whitespace
+    lines = [line.rstrip() for line in lines]
+
+    if "-->" not in lines:
+        return None
+    
+    closing_arrow_idx = lines.index("-->")
+
+    front_matter_lines = lines[1:closing_arrow_idx]
+    front_matter = yaml.safe_load("\n".join(front_matter_lines))
+    return front_matter
+
+def skip_reason_or_none_if_ok(notebook: Path) -> typing.Optional[str]:
+    """Return a reason to skip the notebook, or None if it should not be skipped."""
+    with open(notebook, "r") as f:
+        content = f.read()
+
+    # Load the json and get the first cell
+    json_content = json.loads(content)
+    first_cell = json_content["cells"][0]
+
+    # <!-- and --> must exists on lines on their own
+    if first_cell["cell_type"] != "markdown":
+        return "first cell is not markdown"
+    
+    lines = first_cell["source"]
+    if "<!--" != lines[0].strip():
+        return "first line does not contain only '<!--'"
+    
+    # remove trailing whitespace
+    lines = [line.rstrip() for line in lines]
+
+    if "-->" not in lines:
+        return "no closing --> found, or it is not on a line on its own"
+
+    front_matter = exract_yaml_from_notebook(notebook)
+    
+    if "skip" in front_matter and front_matter["skip"] == True:
+        return "skip is set to true"
+
+    if not "tags" in front_matter or not "description" in front_matter:
+        return "no tags or description found"
+
+    # Make sure tags is a list of strings
+    if not all([isinstance(tag, str) for tag in front_matter["tags"]]):
+        return "tags must be a list of strings"
+
+    # Make sure description is a string
+    if not isinstance(front_matter["description"], str):
+        return "description must be a string"
+
+    return None
+
+
+
+def process_notebook(src_notebook: Path, dest_dir: Path, quarto_bin: str, dry_run: bool) -> str:
+    """Process a single notebook."""
+    reason_or_none = skip_reason_or_none_if_ok(src_notebook)
+    if reason_or_none:
+        return colored(f"Skipping {src_notebook.name}, reason: {reason_or_none}", "yellow")
+    
+    target_mdx_file = dest_dir / f"{src_notebook.stem}.mdx"
+    intermediate_notebook = dest_dir / f"{src_notebook.stem}.ipynb"
+
+    # If the intermediate_notebook already exists, check if it is newer than the source file
+    if target_mdx_file.exists():
+        if target_mdx_file.stat().st_mtime > src_notebook.stat().st_mtime:
+            return colored(f"Skipping {src_notebook.name}, as target file is newer", "blue")
+    
+    if dry_run:
+        return colored(f"Would process {src_notebook.name}", "green")
+        
+    
+    # Copy notebook to target dir
+    # The reason we copy the notebook is that quarto does not support rendering from a different directory
+    shutil.copy(src_notebook, intermediate_notebook)
+
+    # Check if another file has to be copied too
+    # Solely added for the purpose of agent_library_example.json
+    front_matter = exract_yaml_from_notebook(src_notebook)
+    if "extra_files_to_copy" in front_matter:
+        for file in front_matter["extra_files_to_copy"]:
+            shutil.copy(src_notebook.parent / file, dest_dir / file)
+
+    # Capture output
+    result = subprocess.run([quarto_bin, "render", intermediate_notebook], stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True)
+    if result.returncode != 0:
+        return colored(f"Failed to render {intermediate_notebook}", "red") + f"\n{result.stderr}" + f"\n{result.stdout}"
+    
+    # Unlink intermediate files
+    intermediate_notebook.unlink()
+
+    if "extra_files_to_copy" in front_matter:
+        for file in front_matter["extra_files_to_copy"]:
+            (dest_dir / file).unlink()
+
+    # Post process the file
+    post_process_mdx(target_mdx_file)
+
+    return colored(f"Processed {src_notebook.name}", "green")
+
+# rendered_notebook is the final mdx file
+def post_process_mdx(rendered_mdx: Path) -> None:
+    notebook_name = f"{rendered_mdx.stem}.ipynb"
+    with open(rendered_mdx, "r") as f:
+        content = f.read()
+
+    # Check for existance of "export const quartoRawHtml", this indicates there was a front matter line in the file
+    if not "export const quartoRawHtml" in content:
+        raise ValueError(f"File {rendered_mdx} does not contain 'export const quartoRawHtml'")
+        
+    # Extract the text between <!-- and -->
+    front_matter = content.split("<!--")[1].split("-->")[0]
+    # Strip empy lines before and after
+    front_matter = "\n".join([line for line in front_matter.split("\n") if line.strip() != ""])
+
+    # add file path
+    front_matter += f"\nsource_notebook: /notebook/{notebook_name}"
+    # Custom edit url
+    front_matter += f"\ncustom_edit_url: https://github.com/microsoft/autogen/edit/main/notebook/{notebook_name}"
+
+    # inject in content directly after the markdown title the word done
+    # Find the end of the line with the title
+    title_end = content.find("\n", content.find("#"))
+
+    # Extract page title
+    title = content[content.find("#")+1:content.find("\n", content.find("#"))].strip()
+
+    front_matter += f"\ntitle: {title}"
+
+    github_link = f"https://github.com/microsoft/autogen/blob/main/notebook/{notebook_name}"
+    content = content[:title_end] + "\n[![Open on GitHub](https://img.shields.io/badge/Open%20on%20GitHub-grey?logo=github)](" +github_link+")" + content[title_end:]
+
+    # If no colab link is present, insert one
+    if not "colab-badge.svg" in content:
+        content = content[:title_end] + "\n[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/microsoft/autogen/blob/main/notebook/" + notebook_name + ")" + content[title_end:]
+
+    # Rewrite the content as
+    # ---
+    # front_matter
+    # ---
+    # content
+    new_content = f"---\n{front_matter}\n---\n{content}"
+    with open(rendered_mdx, "w") as f:
+        f.write(new_content)
+
+def path(path_str: str) -> Path:
+    """Return a Path object."""
+    return Path(path_str)
+
+def main():
+    script_dir = Path(__file__).parent.absolute()
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--notebook-directory",type=path, help="Directory containing notebooks to process", default=script_dir / "../notebook")
+    parser.add_argument("--website-directory", type=path, help="Root directory of docusarus website", default=script_dir)
+    parser.add_argument("--quarto-bin", help="Path to quarto binary", default="quarto")
+    parser.add_argument("--dry-run", help="Don't render", action="store_true")
+    parser.add_argument("--workers", help="Number of workers to use", type=int, default=-1)
+
+    args = parser.parse_args()
+
+    if args.workers == -1:
+        args.workers = None
+
+    check_quarto_bin(args.quarto_bin)
+
+    if not notebooks_target_dir(args.website_directory).exists():
+        notebooks_target_dir(args.website_directory).mkdir(parents=True)
+    
+    with concurrent.futures.ProcessPoolExecutor(max_workers=args.workers) as executor:
+        futures = [executor.submit(process_notebook, f, notebooks_target_dir(args.website_directory), args.quarto_bin, args.dry_run) for f in args.notebook_directory.glob("*.ipynb")]
+        for future in concurrent.futures.as_completed(futures):
+            print(future.result())
+
+        
+if __name__ == "__main__":
+    main()
\ No newline at end of file
diff --git a/website/src/components/GalleryPage.js b/website/src/components/GalleryPage.js
index d24cc334fa1b..91f33221bb03 100644
--- a/website/src/components/GalleryPage.js
+++ b/website/src/components/GalleryPage.js
@@ -87,6 +87,19 @@ const GalleryPage = (props) => {
     return imageToUse;
   }
 
+  const badges = (item) => {
+    if (!item.source) {
+      return null;
+    }
+    const colab_href = `https://colab.research.google.com/github/microsoft/autogen/blob/main/${item.source}`;
+    const github_href = `https://github.com/microsoft/autogen/blob/main/${item.source}`;
+    return (<span>
+      <a style={{marginRight: '5px'}}href={colab_href} target="_parent"><img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/></a>
+      <a href={github_href} target="_parent"><img alt="Static Badge" src="https://img.shields.io/badge/Open%20on%20GitHub-grey?logo=github"/></a>
+      </span>
+    );
+  }
+
   const target = props.target ?? "_blank";
   return (
     <div>
@@ -127,14 +140,16 @@ const GalleryPage = (props) => {
               <Card
                 hoverable
                 bordered
-                style={{ height: 370, paddingTop: 15 }}
+                style={{ height: 370, paddingTop: imageFunc(item) ? 15 : 0 }}
                 cover={imageFunc(item)}
               >
                 <Title level={5} ellipsis={{ rows: 4 }}>
                   {item.title}
                 </Title>
+                {badges(item)}
+                
                 <Paragraph
-                  ellipsis={{ rows: imageFunc(item) ? 3 : 7 }}
+                  ellipsis={{ rows: imageFunc(item) ? 3 : 6 }}
                   style={{
                     fontWeight: "normal",
                     color: "#727272",
diff --git a/website/src/components/NotebookUtils.js b/website/src/components/NotebookUtils.js
index 82ea4e3044f3..d54f6af591ae 100644
--- a/website/src/components/NotebookUtils.js
+++ b/website/src/components/NotebookUtils.js
@@ -7,11 +7,12 @@ function findAllNotebooks() {
         key = key.slice(0, -4);
 
         notebooks.push({
-            title: notebook.contentTitle,
+            title: notebook.frontMatter.title,
             link: "/autogen/docs/notebooks/" + key,
             description: notebook.frontMatter.description,
             image: notebook.frontMatter.image,
-            tags: notebook.frontMatter.tags
+            tags: notebook.frontMatter.tags,
+            source: notebook.frontMatter.source_notebook            
         });
     });
     console.log(notebooks);
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 1de514c241b9..a15d9f85997a 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -73,6 +73,21 @@ blockquote {
   color: white;
 }
 
+/* This puts a 10px border on the left of Python code blocks. This is to provide
+some visual distinction between code cells and output cells. The color is the
+prism code block background color lightened by 25% */
+.language-python.theme-code-block
+{
+  border-left: 10px solid #51597b;
+}
+
+/* Small visual differentiation for the code output cell. Code background
+lightened by 15% */
+.language-text.theme-code-block
+{
+  background-color: #414863;
+}
+
 html[data-theme="dark"] {
   --ifm-breadcrumb-color-active: #0c90ff;
   --ifm-hero-text-color: white;

From cb33c88650d131a8996b83007b24f7cb8590bd8b Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 18:34:04 -0500
Subject: [PATCH 06/15] improve error handling of process notebooks

---
 website/process_notebooks.py | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/website/process_notebooks.py b/website/process_notebooks.py
index c33e6d372b98..dae3bf6697ab 100644
--- a/website/process_notebooks.py
+++ b/website/process_notebooks.py
@@ -91,13 +91,19 @@ def skip_reason_or_none_if_ok(notebook: Path) -> typing.Optional[str]:
     if "-->" not in lines:
         return "no closing --> found, or it is not on a line on its own"
 
-    front_matter = exract_yaml_from_notebook(notebook)
+    try:
+        front_matter = exract_yaml_from_notebook(notebook)
+    except yaml.YAMLError as e:
+        return colored(f"Failed to parse front matter in {notebook.name}: {e}", "red")
     
     if "skip" in front_matter and front_matter["skip"] == True:
         return "skip is set to true"
 
-    if not "tags" in front_matter or not "description" in front_matter:
-        return "no tags or description found"
+    if not "tags" in front_matter:
+        return "tags is not in front matter"
+
+    if not "description" in front_matter:
+        return "description is not in front matter"
 
     # Make sure tags is a list of strings
     if not all([isinstance(tag, str) for tag in front_matter["tags"]]):

From d1c81b1f3e45c54a0e3531cd8980d8fdf4718523 Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 18:38:14 -0500
Subject: [PATCH 07/15] format, ruff and type fixes

---
 website/process_notebooks.py | 98 ++++++++++++++++++++++++------------
 1 file changed, 66 insertions(+), 32 deletions(-)

diff --git a/website/process_notebooks.py b/website/process_notebooks.py
index dae3bf6697ab..172b2e900206 100644
--- a/website/process_notebooks.py
+++ b/website/process_notebooks.py
@@ -19,7 +19,7 @@
 
     def colored(x, *args, **kwargs):
         return x
-    
+
 
 class Result:
     def __init__(self, returncode: int, stdout: str, stderr: str):
@@ -36,12 +36,13 @@ def check_quarto_bin(quarto_bin: str = "quarto"):
         print("Quarto is not installed. Please install it from https://quarto.org")
         sys.exit(1)
 
+
 def notebooks_target_dir(website_directory: Path) -> Path:
     """Return the target directory for notebooks."""
     return website_directory / "docs" / "notebooks"
 
 
-def exract_yaml_from_notebook(notebook: Path) -> typing.Optional[typing.Dict]:
+def extract_yaml_from_notebook(notebook: Path) -> typing.Optional[typing.Dict]:
     with open(notebook, "r") as f:
         content = f.read()
 
@@ -51,23 +52,24 @@ def exract_yaml_from_notebook(notebook: Path) -> typing.Optional[typing.Dict]:
     # <!-- and --> must exists on lines on their own
     if first_cell["cell_type"] != "markdown":
         return None
-    
+
     lines = first_cell["source"]
     if "<!--" != lines[0].strip():
         return None
-    
+
     # remove trailing whitespace
     lines = [line.rstrip() for line in lines]
 
     if "-->" not in lines:
         return None
-    
+
     closing_arrow_idx = lines.index("-->")
 
     front_matter_lines = lines[1:closing_arrow_idx]
     front_matter = yaml.safe_load("\n".join(front_matter_lines))
     return front_matter
 
+
 def skip_reason_or_none_if_ok(notebook: Path) -> typing.Optional[str]:
     """Return a reason to skip the notebook, or None if it should not be skipped."""
     with open(notebook, "r") as f:
@@ -80,11 +82,11 @@ def skip_reason_or_none_if_ok(notebook: Path) -> typing.Optional[str]:
     # <!-- and --> must exists on lines on their own
     if first_cell["cell_type"] != "markdown":
         return "first cell is not markdown"
-    
+
     lines = first_cell["source"]
     if "<!--" != lines[0].strip():
         return "first line does not contain only '<!--'"
-    
+
     # remove trailing whitespace
     lines = [line.rstrip() for line in lines]
 
@@ -92,17 +94,20 @@ def skip_reason_or_none_if_ok(notebook: Path) -> typing.Optional[str]:
         return "no closing --> found, or it is not on a line on its own"
 
     try:
-        front_matter = exract_yaml_from_notebook(notebook)
+        front_matter = extract_yaml_from_notebook(notebook)
     except yaml.YAMLError as e:
         return colored(f"Failed to parse front matter in {notebook.name}: {e}", "red")
-    
-    if "skip" in front_matter and front_matter["skip"] == True:
+
+    # Should not be none at this point as we have already done the smae checks as in extract_yaml_from_notebook
+    assert front_matter is not None, f"Front matter is None for {notebook.name}"
+
+    if "skip" in front_matter and front_matter["skip"] is True:
         return "skip is set to true"
 
-    if not "tags" in front_matter:
+    if "tags" not in front_matter:
         return "tags is not in front matter"
 
-    if not "description" in front_matter:
+    if "description" not in front_matter:
         return "description is not in front matter"
 
     # Make sure tags is a list of strings
@@ -116,13 +121,12 @@ def skip_reason_or_none_if_ok(notebook: Path) -> typing.Optional[str]:
     return None
 
 
-
 def process_notebook(src_notebook: Path, dest_dir: Path, quarto_bin: str, dry_run: bool) -> str:
     """Process a single notebook."""
     reason_or_none = skip_reason_or_none_if_ok(src_notebook)
     if reason_or_none:
         return colored(f"Skipping {src_notebook.name}, reason: {reason_or_none}", "yellow")
-    
+
     target_mdx_file = dest_dir / f"{src_notebook.stem}.mdx"
     intermediate_notebook = dest_dir / f"{src_notebook.stem}.ipynb"
 
@@ -130,27 +134,30 @@ def process_notebook(src_notebook: Path, dest_dir: Path, quarto_bin: str, dry_ru
     if target_mdx_file.exists():
         if target_mdx_file.stat().st_mtime > src_notebook.stat().st_mtime:
             return colored(f"Skipping {src_notebook.name}, as target file is newer", "blue")
-    
+
     if dry_run:
         return colored(f"Would process {src_notebook.name}", "green")
-        
-    
+
     # Copy notebook to target dir
     # The reason we copy the notebook is that quarto does not support rendering from a different directory
     shutil.copy(src_notebook, intermediate_notebook)
 
     # Check if another file has to be copied too
     # Solely added for the purpose of agent_library_example.json
-    front_matter = exract_yaml_from_notebook(src_notebook)
+    front_matter = extract_yaml_from_notebook(src_notebook)
+    # Should not be none at this point as we have already done the smae checks as in extract_yaml_from_notebook
+    assert front_matter is not None, f"Front matter is None for {src_notebook.name}"
     if "extra_files_to_copy" in front_matter:
         for file in front_matter["extra_files_to_copy"]:
             shutil.copy(src_notebook.parent / file, dest_dir / file)
 
     # Capture output
-    result = subprocess.run([quarto_bin, "render", intermediate_notebook], stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True)
+    result = subprocess.run(
+        [quarto_bin, "render", intermediate_notebook], stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True
+    )
     if result.returncode != 0:
         return colored(f"Failed to render {intermediate_notebook}", "red") + f"\n{result.stderr}" + f"\n{result.stdout}"
-    
+
     # Unlink intermediate files
     intermediate_notebook.unlink()
 
@@ -163,6 +170,7 @@ def process_notebook(src_notebook: Path, dest_dir: Path, quarto_bin: str, dry_ru
 
     return colored(f"Processed {src_notebook.name}", "green")
 
+
 # rendered_notebook is the final mdx file
 def post_process_mdx(rendered_mdx: Path) -> None:
     notebook_name = f"{rendered_mdx.stem}.ipynb"
@@ -170,9 +178,9 @@ def post_process_mdx(rendered_mdx: Path) -> None:
         content = f.read()
 
     # Check for existance of "export const quartoRawHtml", this indicates there was a front matter line in the file
-    if not "export const quartoRawHtml" in content:
+    if "export const quartoRawHtml" not in content:
         raise ValueError(f"File {rendered_mdx} does not contain 'export const quartoRawHtml'")
-        
+
     # Extract the text between <!-- and -->
     front_matter = content.split("<!--")[1].split("-->")[0]
     # Strip empy lines before and after
@@ -188,16 +196,28 @@ def post_process_mdx(rendered_mdx: Path) -> None:
     title_end = content.find("\n", content.find("#"))
 
     # Extract page title
-    title = content[content.find("#")+1:content.find("\n", content.find("#"))].strip()
+    title = content[content.find("#") + 1 : content.find("\n", content.find("#"))].strip()
 
     front_matter += f"\ntitle: {title}"
 
     github_link = f"https://github.com/microsoft/autogen/blob/main/notebook/{notebook_name}"
-    content = content[:title_end] + "\n[![Open on GitHub](https://img.shields.io/badge/Open%20on%20GitHub-grey?logo=github)](" +github_link+")" + content[title_end:]
+    content = (
+        content[:title_end]
+        + "\n[![Open on GitHub](https://img.shields.io/badge/Open%20on%20GitHub-grey?logo=github)]("
+        + github_link
+        + ")"
+        + content[title_end:]
+    )
 
     # If no colab link is present, insert one
-    if not "colab-badge.svg" in content:
-        content = content[:title_end] + "\n[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/microsoft/autogen/blob/main/notebook/" + notebook_name + ")" + content[title_end:]
+    if "colab-badge.svg" not in content:
+        content = (
+            content[:title_end]
+            + "\n[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/microsoft/autogen/blob/main/notebook/"
+            + notebook_name
+            + ")"
+            + content[title_end:]
+        )
 
     # Rewrite the content as
     # ---
@@ -208,15 +228,24 @@ def post_process_mdx(rendered_mdx: Path) -> None:
     with open(rendered_mdx, "w") as f:
         f.write(new_content)
 
+
 def path(path_str: str) -> Path:
     """Return a Path object."""
     return Path(path_str)
 
+
 def main():
     script_dir = Path(__file__).parent.absolute()
     parser = argparse.ArgumentParser()
-    parser.add_argument("--notebook-directory",type=path, help="Directory containing notebooks to process", default=script_dir / "../notebook")
-    parser.add_argument("--website-directory", type=path, help="Root directory of docusarus website", default=script_dir)
+    parser.add_argument(
+        "--notebook-directory",
+        type=path,
+        help="Directory containing notebooks to process",
+        default=script_dir / "../notebook",
+    )
+    parser.add_argument(
+        "--website-directory", type=path, help="Root directory of docusarus website", default=script_dir
+    )
     parser.add_argument("--quarto-bin", help="Path to quarto binary", default="quarto")
     parser.add_argument("--dry-run", help="Don't render", action="store_true")
     parser.add_argument("--workers", help="Number of workers to use", type=int, default=-1)
@@ -230,12 +259,17 @@ def main():
 
     if not notebooks_target_dir(args.website_directory).exists():
         notebooks_target_dir(args.website_directory).mkdir(parents=True)
-    
+
     with concurrent.futures.ProcessPoolExecutor(max_workers=args.workers) as executor:
-        futures = [executor.submit(process_notebook, f, notebooks_target_dir(args.website_directory), args.quarto_bin, args.dry_run) for f in args.notebook_directory.glob("*.ipynb")]
+        futures = [
+            executor.submit(
+                process_notebook, f, notebooks_target_dir(args.website_directory), args.quarto_bin, args.dry_run
+            )
+            for f in args.notebook_directory.glob("*.ipynb")
+        ]
         for future in concurrent.futures.as_completed(futures):
             print(future.result())
 
-        
+
 if __name__ == "__main__":
-    main()
\ No newline at end of file
+    main()

From dfd3f657c98d3073650b90641185cb9a3585d48b Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 18:40:04 -0500
Subject: [PATCH 08/15] undo changes to navbar

---
 website/docusaurus.config.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 27a4416b9119..9d69ede18db9 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -68,6 +68,12 @@ module.exports = {
         //   to: 'examples',
         //   label: 'Examples',
         // },
+        {
+          type: "doc",
+          docId: "Examples",
+          position: "left",
+          label: "Examples",
+        },
         // Uncomment below to add Notebooks to the navbar
         // {
         //   to: "docs/notebooks",

From 11757d9e082bbc216ac83f474fa0f865d382807c Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 18:43:54 -0500
Subject: [PATCH 09/15] update readme, CI

---
 .github/workflows/deploy-website.yml         | 10 +++++--
 notebook/readme.md                           |  3 --
 website/README.md                            |  3 +-
 website/src/theme/prism-include-languages.js | 30 +++++++++-----------
 4 files changed, 24 insertions(+), 22 deletions(-)
 delete mode 100644 notebook/readme.md

diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
index f90a78f877f4..7198a311de7f 100644
--- a/.github/workflows/deploy-website.yml
+++ b/.github/workflows/deploy-website.yml
@@ -37,7 +37,7 @@ jobs:
       - name: pydoc-markdown install
         run: |
           python -m pip install --upgrade pip
-          pip install pydoc-markdown
+          pip install pydoc-markdown pyyaml colored
       - name: pydoc-markdown run
         run: |
           pydoc-markdown
@@ -50,6 +50,9 @@ jobs:
       - name: quarto run
         run: |
           quarto render .
+      - name: Process notebooks
+        run: |
+          python process_notebooks.py
       - name: Test Build
         run: |
           if [ -e yarn.lock ]; then
@@ -80,7 +83,7 @@ jobs:
       - name: pydoc-markdown install
         run: |
           python -m pip install --upgrade pip
-          pip install pydoc-markdown
+          pip install pydoc-markdown pyyaml colored
       - name: pydoc-markdown run
         run: |
           pydoc-markdown
@@ -93,6 +96,9 @@ jobs:
       - name: quarto run
         run: |
           quarto render .
+      - name: Process notebooks
+        run: |
+          python process_notebooks.py
       - name: Build website
         run: |
           if [ -e yarn.lock ]; then
diff --git a/notebook/readme.md b/notebook/readme.md
deleted file mode 100644
index f35ef8ca546a..000000000000
--- a/notebook/readme.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Notebooks
-
-⚠️ The notebooks that were in this folder have been moved to [`/website/docs/notebooks`](/website/docs/notebooks) folder as they are now rendered as part of the website. ⚠️
diff --git a/website/README.md b/website/README.md
index cc52f448078a..c10d0d1d2370 100644
--- a/website/README.md
+++ b/website/README.md
@@ -14,7 +14,7 @@ npm install --global yarn
 ## Installation
 
 ```console
-pip install pydoc-markdown
+pip install pydoc-markdown pyyaml colored
 cd website
 yarn install
 ```
@@ -32,6 +32,7 @@ Navigate to the `website` folder and run:
 ```console
 pydoc-markdown
 quarto render ./docs
+python ./process_notebooks.py
 yarn start
 ```
 
diff --git a/website/src/theme/prism-include-languages.js b/website/src/theme/prism-include-languages.js
index 257eb41ac625..437c5396c59f 100644
--- a/website/src/theme/prism-include-languages.js
+++ b/website/src/theme/prism-include-languages.js
@@ -1,9 +1,9 @@
 import siteConfig from '@generated/docusaurus.config';
 export default function prismIncludeLanguages(PrismObject) {
   const {
-    themeConfig: {prism},
+    themeConfig: { prism },
   } = siteConfig;
-  const {additionalLanguages} = prism;
+  const { additionalLanguages } = prism;
   // Prism components work on the Prism instance on the window, while prism-
   // react-renderer uses its own Prism instance. We temporarily mount the
   // instance onto window, import components to enhance it, then remove it to
@@ -22,20 +22,18 @@ export default function prismIncludeLanguages(PrismObject) {
   });
 
   Prism.languages['text'] = {
-      'message-id': {
-        pattern: /\b(:?[A-Za-z0-9\-_]+)\s+\(:?to\s([A-Za-z0=9\-_]+)\)\:/,
-        inside: {
-          'class-name': /\b(?!to\b)[A-Za-z0-9\-_^]+\b/,
-          punctuation: /[()]/,
-          keyword: /\bto\b/
-        }
-      },
-      builtin: /\bTERMINATE\b/,
-      punctuation: /(?:(---)-+)/,
-      function: />>>>>>>>.+[\r\n]?/
-   };
-
-
+    'message-id': {
+      pattern: /\b(:?[A-Za-z0-9\-_]+)\s+\(:?to\s([A-Za-z0=9\-_]+)\)\:/,
+      inside: {
+        'class-name': /\b(?!to\b)[A-Za-z0-9\-_^]+\b/,
+        punctuation: /[()]/,
+        keyword: /\bto\b/
+      }
+    },
+    builtin: /\bTERMINATE\b/,
+    punctuation: /(?:(---)-+)/,
+    function: />>>>>>>>.+[\r\n]?/
+  };
 
   delete globalThis.Prism;
 }

From c3c27554062eb98d710d15220c37f624e1664ff9 Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 19:17:18 -0500
Subject: [PATCH 10/15] whitespace

---
 website/src/components/GalleryPage.js   | 2 +-
 website/src/components/NotebookUtils.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/components/GalleryPage.js b/website/src/components/GalleryPage.js
index 91f33221bb03..839cb7279772 100644
--- a/website/src/components/GalleryPage.js
+++ b/website/src/components/GalleryPage.js
@@ -147,7 +147,7 @@ const GalleryPage = (props) => {
                   {item.title}
                 </Title>
                 {badges(item)}
-                
+
                 <Paragraph
                   ellipsis={{ rows: imageFunc(item) ? 3 : 6 }}
                   style={{
diff --git a/website/src/components/NotebookUtils.js b/website/src/components/NotebookUtils.js
index d54f6af591ae..4b7cb88bbe5e 100644
--- a/website/src/components/NotebookUtils.js
+++ b/website/src/components/NotebookUtils.js
@@ -12,7 +12,7 @@ function findAllNotebooks() {
             description: notebook.frontMatter.description,
             image: notebook.frontMatter.image,
             tags: notebook.frontMatter.tags,
-            source: notebook.frontMatter.source_notebook            
+            source: notebook.frontMatter.source_notebook
         });
     });
     console.log(notebooks);

From b0e238665476d2525c2d5cca44c9449726b111cf Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Wed, 31 Jan 2024 19:19:31 -0500
Subject: [PATCH 11/15] spelling mistakes

---
 website/process_notebooks.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/process_notebooks.py b/website/process_notebooks.py
index 172b2e900206..2c5bc169dabc 100644
--- a/website/process_notebooks.py
+++ b/website/process_notebooks.py
@@ -98,7 +98,7 @@ def skip_reason_or_none_if_ok(notebook: Path) -> typing.Optional[str]:
     except yaml.YAMLError as e:
         return colored(f"Failed to parse front matter in {notebook.name}: {e}", "red")
 
-    # Should not be none at this point as we have already done the smae checks as in extract_yaml_from_notebook
+    # Should not be none at this point as we have already done the same checks as in extract_yaml_from_notebook
     assert front_matter is not None, f"Front matter is None for {notebook.name}"
 
     if "skip" in front_matter and front_matter["skip"] is True:
@@ -145,7 +145,7 @@ def process_notebook(src_notebook: Path, dest_dir: Path, quarto_bin: str, dry_ru
     # Check if another file has to be copied too
     # Solely added for the purpose of agent_library_example.json
     front_matter = extract_yaml_from_notebook(src_notebook)
-    # Should not be none at this point as we have already done the smae checks as in extract_yaml_from_notebook
+    # Should not be none at this point as we have already done the same checks as in extract_yaml_from_notebook
     assert front_matter is not None, f"Front matter is None for {src_notebook.name}"
     if "extra_files_to_copy" in front_matter:
         for file in front_matter["extra_files_to_copy"]:
@@ -177,7 +177,7 @@ def post_process_mdx(rendered_mdx: Path) -> None:
     with open(rendered_mdx, "r") as f:
         content = f.read()
 
-    # Check for existance of "export const quartoRawHtml", this indicates there was a front matter line in the file
+    # Check for existence of "export const quartoRawHtml", this indicates there was a front matter line in the file
     if "export const quartoRawHtml" not in content:
         raise ValueError(f"File {rendered_mdx} does not contain 'export const quartoRawHtml'")
 

From b72eb35ae05a0da81fd027af56c4f9dd42ed946e Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Thu, 1 Feb 2024 10:35:11 -0500
Subject: [PATCH 12/15] spelling

---
 website/process_notebooks.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/process_notebooks.py b/website/process_notebooks.py
index 2c5bc169dabc..5873c5dfa91e 100644
--- a/website/process_notebooks.py
+++ b/website/process_notebooks.py
@@ -183,7 +183,7 @@ def post_process_mdx(rendered_mdx: Path) -> None:
 
     # Extract the text between <!-- and -->
     front_matter = content.split("<!--")[1].split("-->")[0]
-    # Strip empy lines before and after
+    # Strip empty lines before and after
     front_matter = "\n".join([line for line in front_matter.split("\n") if line.strip() != ""])
 
     # add file path

From 4e54dfd5c45d43f1d891974f1d06dae3a00d033a Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Fri, 2 Feb 2024 11:57:40 -0500
Subject: [PATCH 13/15] Add contributing guide for notebooks

---
 notebook/contributing.md | 56 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 notebook/contributing.md

diff --git a/notebook/contributing.md b/notebook/contributing.md
new file mode 100644
index 000000000000..81e6a8e3449a
--- /dev/null
+++ b/notebook/contributing.md
@@ -0,0 +1,56 @@
+# Contributing
+
+## How to get a notebook displayed on the website
+
+Ensure the first cell is markdown and before absolutely anything else include the following yaml within a comment.
+
+```markdown
+<!--
+tags: ["code generation", "debugging"]
+description: |
+    Use conversable language learning model agents to solve tasks and provide automatic feedback through a comprehensive example of writing, executing, and debugging Python code to compare stock price changes.
+-->
+```
+
+The `tags` field is a list of tags that will be used to categorize the notebook. The `description` field is a brief description of the notebook.
+
+## Best practices for authoring notebooks
+
+The following points are best practices for authoring notebooks to ensure consistency and ease of use for the website.
+
+- The Colab button will be automatically generated on the website for all notebooks where it is missing. Going forward, it is recommended to not include the Colab button in the notebook itself.
+- Ensure the header is a `h1` header, - `#`
+- Don't put anything between the yaml and the header
+
+### Consistency for installation and LLM config
+
+You don't need to explain in depth how to install AutoGen. Unless there are specific instructions for the notebook just use the following markdown snippet:
+
+\:\:info Requirements
+
+Install `pyautogen`:
+```bash
+pip install pyautogen
+```
+
+For more information, please refer to the [installation guide](/docs/installation/).
+
+\:\:\:
+
+When specifying the config list, to ensure consistency it is best to use approximately the following code:
+
+```python
+config_list = autogen.config_list_from_json(
+    env_or_file="OAI_CONFIG_LIST",
+)
+```
+
+Then after the code cell where this is used, include the following markdown snippet:
+
+```
+\:\:\:tip
+
+Learn more about the various ways to configure LLM endpoints [here](/docs/llm_endpoint_configuration).
+
+\:\:\:
+```

From 3f94e076556a5775ad0708be30938beea013355e Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Sat, 3 Feb 2024 11:16:23 -0500
Subject: [PATCH 14/15] update notebook

---
 notebook/agentchat_function_call_async.ipynb | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/notebook/agentchat_function_call_async.ipynb b/notebook/agentchat_function_call_async.ipynb
index 85377e2aa26e..5fee842e4215 100644
--- a/notebook/agentchat_function_call_async.ipynb
+++ b/notebook/agentchat_function_call_async.ipynb
@@ -50,12 +50,8 @@
     "import autogen\n",
     "from autogen.cache import Cache\n",
     "\n",
-    "# Exclude Azure OpenAI endpoints because some endpoints don't support functions yet. Remove the filter dict if they do.\n",
     "config_list = autogen.config_list_from_json(\n",
-    "    \"OAI_CONFIG_LIST\",\n",
-    "    filter_dict={\n",
-    "        \"model\": [\"gpt-4\"],\n",
-    "    },\n",
+    "    env_or_file=\"OAI_CONFIG_LIST\"\n",
     ")"
    ]
   },

From 7ef56c43f6f90db938ccce5a85b63c85e8ebb854 Mon Sep 17 00:00:00 2001
From: Jack Gerrits <jack@jackgerrits.com>
Date: Sat, 3 Feb 2024 11:17:57 -0500
Subject: [PATCH 15/15] formatting

---
 notebook/agentchat_function_call_async.ipynb | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/notebook/agentchat_function_call_async.ipynb b/notebook/agentchat_function_call_async.ipynb
index 5fee842e4215..e9831b8fcd19 100644
--- a/notebook/agentchat_function_call_async.ipynb
+++ b/notebook/agentchat_function_call_async.ipynb
@@ -50,9 +50,7 @@
     "import autogen\n",
     "from autogen.cache import Cache\n",
     "\n",
-    "config_list = autogen.config_list_from_json(\n",
-    "    env_or_file=\"OAI_CONFIG_LIST\"\n",
-    ")"
+    "config_list = autogen.config_list_from_json(env_or_file=\"OAI_CONFIG_LIST\")"
    ]
   },
   {