Add icons and badges

Author: bcbogdan

docs/authentication/ai-authentication.mdx

@@ -1,5 +1,5 @@
 ---
-title: Authenticate MCP Servers
+title: MCP Authentication
 hide_title: true
 sidebar_position: 8
 pagination_next: null
@@ -27,6 +27,7 @@ The [MCP authentication flow](https://modelcontextprotocol.io/specification/2025
 This means that you will have to use the `OAuth2` recipe in your configuration which is a paid feature.
 
 The functionality is only available alongside the `node` SDK at the moment.
+Keep in mind that the feature is currently in beta and might be subject to breaking changes.
 
 ## Steps
 

src/components/MenuItemIcon.tsx

@@ -16,6 +16,7 @@ import {
   Shield,
   CircleUserRound,
   UserPlus,
+  Brain,
   FileTerminal,
   FileCode,
   HardDrive,
@@ -57,6 +58,7 @@ import AwsLambdaLogo from "/img/logos/aws-lambda.svg";
 import GraphqlLogo from "/img/logos/graphql.svg";
 import CdiLogo from "/img/logos/cdi.svg";
 import FdiLogo from "/img/logos/fdi.svg";
+import MCPLogo from "/img/logos/mcp.svg";
 
 const categoryIcons = {
   // Main categories
@@ -135,6 +137,9 @@ const categoryIcons = {
   "/docs/quickstart/introduction": Book,
   "/docs/quickstart/next-steps": NotebookTabs,
   "/docs/quickstart/example-applications": Play,
+  "/docs/quickstart/build-with-ai-tools": Brain,
+
+  "/docs/authentication/ai-authentication": MCPLogo,
 
   // Other
   "Session Verification": BadgeCheck,

src/theme/DocSidebarItem/Link/index.tsx

@@ -75,7 +75,37 @@ export default function DocSidebarItemLink({
             <APIRequestMethodBadge method={method as APIRequestMethod} size="1" />
           </span>
         ) : null}
+        <NewBadge href={href} />
+        <BetaBadge href={href} />
       </Link>
     </li>
   );
 }
+
+const NewPages = ["/docs/quickstart/build-with-ai-tools"];
+
+function NewBadge({ href }: { href: string }) {
+  if (!NewPages.includes(href)) return null;
+
+  return (
+    <span style={{ marginLeft: "auto" }}>
+      <Badge variant="outline" color={"orange"} size="1" radius="small">
+        New
+      </Badge>
+    </span>
+  );
+}
+
+const BetaPages = ["/docs/authentication/ai-authentication"];
+
+function BetaBadge({ href }: { href: string }) {
+  if (!BetaPages.includes(href)) return null;
+
+  return (
+    <span style={{ marginLeft: "auto" }}>
+      <Badge variant="outline" color="blue" size="1" radius="small">
+        Beta
+      </Badge>
+    </span>
+  );
+}