From ac4d8d8500dba1836f2d68ba73ce2d2e8a268605 Mon Sep 17 00:00:00 2001 From: Bogdan Carpusor Date: Mon, 7 Jul 2025 15:27:03 +0300 Subject: [PATCH 1/3] Add documentation for the mcp plugin --- docs/authentication/ai/_category_.json | 0 .../ai/authenticate-mcp-servers.mdx | 101 ++++++++++++++++++ docs/authentication/ai/introduction.mdx | 1 + docs/quickstart/build-with-ai-tools.mdx | 33 ++++++ 4 files changed, 135 insertions(+) create mode 100644 docs/authentication/ai/_category_.json create mode 100644 docs/authentication/ai/authenticate-mcp-servers.mdx create mode 100644 docs/authentication/ai/introduction.mdx create mode 100644 docs/quickstart/build-with-ai-tools.mdx diff --git a/docs/authentication/ai/_category_.json b/docs/authentication/ai/_category_.json new file mode 100644 index 000000000..e69de29bb diff --git a/docs/authentication/ai/authenticate-mcp-servers.mdx b/docs/authentication/ai/authenticate-mcp-servers.mdx new file mode 100644 index 000000000..7cdab2931 --- /dev/null +++ b/docs/authentication/ai/authenticate-mcp-servers.mdx @@ -0,0 +1,101 @@ +--- +title: Authenticate MCP Servers +hide_title: true +sidebar_position: 1 +pagination_next: null +pagination_prev: null +skip_llms_txt: true +description: >- + Authenticate MCP server actions using the SuperTokens MCP plugin + to use with AI tools and agents. +--- + +# Authenticate MCP Servers + +This guide explains how to authenticate MCP Servers using the provided code snippet. Follow the steps below to integrate and initialize your MCP server with SuperTokens. + +## Overview + +This guide covers the following topics: + +- Installing the MCP plugin. +- Initializing the plugin. +- Registering tools. +- Initializing the SDK. + +We use a sample code snippet to illustrate the server configuration and how to add administrative tools. + +## Before you start + +Before setting up your MCP servers, ensure you have: + +- Installed the required packages (e.g., **mcp-plugin** and its dependencies). +- Configured your authentication system with SuperTokens. +- Setup your development environment with Node.js. + +Review your permission requirements, as the servers validate user roles to authorize access. + +## Steps + +### 1. Install the plugin + +Install the MCP plugin via npm: + +```bash +npm install mcp-plugin +``` + +
Ensure that all dependencies for SuperTokens are also installed according to your project requirements. + +### 2. Initialize the plugin + +In your project file, import the necessary components and initialize your MCP server. The following example shows how to create an instance of ⁠SuperTokensMCPServer and configure its basic parameters: + +```ts +import { MCPPlugin, SuperTokensMCPServer, AdminToolMCPServer } from "mcp-plugin"; + +const mcpServer = new SuperTokensMCPServer({ + name: "mcp-server", + version: "1.0.0", + path: "/mcp-server-for-admins", + claimValidators: [{ + UserRoles.validate.includesAll("admin") + }], +}); +``` + +### 3. Register your tools + +Register the tool with your MCP server. This step involves defining the tool name, description, and an execution function that processes the input and returns an output. The execution function used in the example fetches a user by ID and returns a simple greeting: + +```ts + +mcpServer.registerTool({ + name: "mcp-server", + description: "A tool for the mcp-server", + execute: (toolInput, extra) => { + const { user } = getUserById(extra._meta.accessTokenPayload.sub); + return { + output: "Hello, world!", + }; + }, +}); +``` + +Create an administrative version of the MCP server using the ⁠AdminToolMCPServer class. This server uses a different claim validator to enforce additional role-based constraints: + + +### 4. Initialize the SDK + +Finally, initialize the SuperTokens SDK and add the MCP plugin to your SuperTokens configuration. The MCP plugin is provided with both the standard and administrative server configurations: + +```ts +SuperTokens.init({ + plugins: [ + new MCPPlugin({ + mcpServers: [mcpServer, adminToolMCPServer], + }), + ], +}) +``` + diff --git a/docs/authentication/ai/introduction.mdx b/docs/authentication/ai/introduction.mdx new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/authentication/ai/introduction.mdx @@ -0,0 +1 @@ + diff --git a/docs/quickstart/build-with-ai-tools.mdx b/docs/quickstart/build-with-ai-tools.mdx new file mode 100644 index 000000000..f9c302a10 --- /dev/null +++ b/docs/quickstart/build-with-ai-tools.mdx @@ -0,0 +1,33 @@ + +# Build with AI Tools + +## Overview + +If you plan on using LLMs to assist in the building of SuperTokens integrations, reference this guide to improve your development experience. +The documentation has various helper tools that can aid you when you are interacting with different AI tools + +## Text documentation + +You can access all the documentation as plain text markdown files by appending `.md` to the end of any URL. +For example, you can find the plain text version of this page at [https://supertokens.com/docs/quickstart/build-with-ai-tools.md](https://supertokens.com/docs/quickstart/build-with-ai-tools.md). + +This plain text format is ideal for AI tools and agents as it: +- Contains fewer formatting tokens. +- Displays content that might otherwise be hidden in the HTML or JavaScript-rendered version (such as content in tabs). +- Maintains a clear markdown hierarchy that LLMs can easily parse and understand. + +https://llmstxt.org + +### `/llms.txt` + +We also host an [/llms.txt file](https://docs.supertokens.com/llms.txt.md) which instructs AI tools and agents on how to retrieve the plain text versions of our pages. The `/llms.txt` file follows an [emerging standard](https://llmstxt.org/) for enhancing content accessibility to LLMs. + + +Additionally, our documentation pages feature buttons for copying the docs as markdown and for opening the full documentation page in an AI chat interface. + +## Model Context Protocol (MCP) Server + +You can use the SuperTokens Model Context Protocol (MCP) server if you use AI-enhanced code editors (such as Cursor or Windsurf) or general purpose tools like Claude Desktop. +The MCP server provides AI agents a suite of tools to call the SuperTokens API and search our knowledge base (documentation, support articles, and more). + +For a local setup, you can run the [local SuperTokens MCP server](https://github.com/supertokens/agent-toolkit/tree/main/modelcontextprotocol). From 835143f25bb7e057fff8bb95983a804646f12331 Mon Sep 17 00:00:00 2001 From: Bogdan Carpusor Date: Mon, 14 Jul 2025 10:58:01 +0300 Subject: [PATCH 2/3] Add complete instructions --- docs/authentication/ai-authentication.mdx | 153 +++++++++ docs/authentication/ai/_category_.json | 0 .../ai/authenticate-mcp-servers.mdx | 101 ------ docs/authentication/ai/introduction.mdx | 1 - docs/quickstart/build-with-ai-tools.mdx | 291 +++++++++++++++++- docs/quickstart/integrations/_category_.json | 2 +- src/theme/DocItem/Content/index.scss | 4 - src/theme/MDXComponents.tsx | 1 + 8 files changed, 436 insertions(+), 117 deletions(-) create mode 100644 docs/authentication/ai-authentication.mdx delete mode 100644 docs/authentication/ai/_category_.json delete mode 100644 docs/authentication/ai/authenticate-mcp-servers.mdx delete mode 100644 docs/authentication/ai/introduction.mdx diff --git a/docs/authentication/ai-authentication.mdx b/docs/authentication/ai-authentication.mdx new file mode 100644 index 000000000..f0ee74bc4 --- /dev/null +++ b/docs/authentication/ai-authentication.mdx @@ -0,0 +1,153 @@ +--- +title: Authenticate MCP Servers +hide_title: true +sidebar_position: 8 +pagination_next: null +pagination_prev: null +description: >- + Authenticate MCP server actions using the SuperTokens MCP plugin. +category: authentication +recipe: oauth2 +page_type: tutorial +--- + +# Authenticate MCP Servers + +## Overview + +This guide explains how to authenticate Model Context Protocol (MCP) Servers using **SuperTokens**. +The instructions make use of the `plugins` functionality. +It is a new way to abstract common functionalities into a reusable package. + +## Before you start + + + +The [MCP authentication flow](https://modelcontextprotocol.io/specification/2025-03-26/basic/authorization) complies with the OAuth2 specifications. +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. + +## Steps + +### 1. Install the plugin + +Add the `supertokens-mcp-plugin` package to your project. + + + + ```bash + npm i -s supertokens-mcp-plugin + ``` + + + ```bash + yarn add supertokens-mcp-plugin + ``` + + + ```bash + pnpm add supertokens-auth-react supertokens-web-js + ``` + + + + +### 2. Add the MCP server + +Use the `SuperTokensMcpServer` class when in your implementation. +The class extends the base MCP server exposed by the `@modelcontextprotocol/sdk`, and adds custom authentication logic on top of it. + +You can authorize the client requests in two different ways. +By using the standard [claim validators](/docs/additional-verification/session-verification/claim-validation). +Or you can write your own custom validation logic in the `validateTokenPayload` function. + +The authentication state can be accessed inside a tool call through the second function argument, `extra.authInfo`. + +```ts +import UserRoles, { UserRoleClaim } from "supertokens-node/recipe/userroles"; +import OAuth2Provider from "supertokens-node/recipe/oauth2provider"; +import type { TypeInput } from "supertokens-node/types"; +import { z } from "zod"; +import SuperTokensMcpPlugin, { + SuperTokensMcpServer, +} from "supertokens-mcp-plugin"; +import SuperTokens from "supertokens-node"; + +const server = new SuperTokensMcpServer({ + name: "example-mcp", + version: "1.0.0", + path: "/mcp", + validateTokenPayload: async (_accessTokenPayload, _userContext) => { + // You can check the acccess token payload for any specific values + return { + status: "OK", + }; + }, + // By default, you can use calim validators to determine who can access the MCP server + claimValidators: [UserRoleClaim.validators.includes("admin")], +}); + + +server.registerTool( + "session-info", + { + inputSchema: {}, + description: "Get session information", + }, + async (_args, extra) => { + return { + content: [ + { + type: "text", + text: JSON.stringify(extra.authInfo), + }, + ], + }; + } +); + +``` + +### 3. Update the SDK initialization code + +Now that you have created your server include it in the SuperTokens SDK configuration. +This way, the SDK middleware will expose your new endpoint and authenticate each request. + +```ts +import supertokens from "supertokens-node"; +import SuperTokensMcpPlugin, { + SuperTokensMcpServer, +} from "supertokens-mcp-plugin"; + +// The server that you have previously created +const server = new SuperTokensMcpServer({}); + +supertokens.init({ + supertokens: { + connectionURI: "", + apiKey: "", + }, + appInfo: { + appName: "", + apiDomain: "", + websiteDomain: "", + apiBasePath: "", + websiteBasePath: "", + }, + recipeList: [ + // Include your existing recipes here + // The OAuth2Provider recipe is required for the MCP authorization process + OAuth2Provider.init(), + ], + experimental: { + plugins: [ + SuperTokensMcpPlugin.init({ + mcpServers: [server], + }), + ], + }, +}); +``` + + diff --git a/docs/authentication/ai/_category_.json b/docs/authentication/ai/_category_.json deleted file mode 100644 index e69de29bb..000000000 diff --git a/docs/authentication/ai/authenticate-mcp-servers.mdx b/docs/authentication/ai/authenticate-mcp-servers.mdx deleted file mode 100644 index 7cdab2931..000000000 --- a/docs/authentication/ai/authenticate-mcp-servers.mdx +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Authenticate MCP Servers -hide_title: true -sidebar_position: 1 -pagination_next: null -pagination_prev: null -skip_llms_txt: true -description: >- - Authenticate MCP server actions using the SuperTokens MCP plugin - to use with AI tools and agents. ---- - -# Authenticate MCP Servers - -This guide explains how to authenticate MCP Servers using the provided code snippet. Follow the steps below to integrate and initialize your MCP server with SuperTokens. - -## Overview - -This guide covers the following topics: - -- Installing the MCP plugin. -- Initializing the plugin. -- Registering tools. -- Initializing the SDK. - -We use a sample code snippet to illustrate the server configuration and how to add administrative tools. - -## Before you start - -Before setting up your MCP servers, ensure you have: - -- Installed the required packages (e.g., **mcp-plugin** and its dependencies). -- Configured your authentication system with SuperTokens. -- Setup your development environment with Node.js. - -Review your permission requirements, as the servers validate user roles to authorize access. - -## Steps - -### 1. Install the plugin - -Install the MCP plugin via npm: - -```bash -npm install mcp-plugin -``` - -
Ensure that all dependencies for SuperTokens are also installed according to your project requirements. - -### 2. Initialize the plugin - -In your project file, import the necessary components and initialize your MCP server. The following example shows how to create an instance of ⁠SuperTokensMCPServer and configure its basic parameters: - -```ts -import { MCPPlugin, SuperTokensMCPServer, AdminToolMCPServer } from "mcp-plugin"; - -const mcpServer = new SuperTokensMCPServer({ - name: "mcp-server", - version: "1.0.0", - path: "/mcp-server-for-admins", - claimValidators: [{ - UserRoles.validate.includesAll("admin") - }], -}); -``` - -### 3. Register your tools - -Register the tool with your MCP server. This step involves defining the tool name, description, and an execution function that processes the input and returns an output. The execution function used in the example fetches a user by ID and returns a simple greeting: - -```ts - -mcpServer.registerTool({ - name: "mcp-server", - description: "A tool for the mcp-server", - execute: (toolInput, extra) => { - const { user } = getUserById(extra._meta.accessTokenPayload.sub); - return { - output: "Hello, world!", - }; - }, -}); -``` - -Create an administrative version of the MCP server using the ⁠AdminToolMCPServer class. This server uses a different claim validator to enforce additional role-based constraints: - - -### 4. Initialize the SDK - -Finally, initialize the SuperTokens SDK and add the MCP plugin to your SuperTokens configuration. The MCP plugin is provided with both the standard and administrative server configurations: - -```ts -SuperTokens.init({ - plugins: [ - new MCPPlugin({ - mcpServers: [mcpServer, adminToolMCPServer], - }), - ], -}) -``` - diff --git a/docs/authentication/ai/introduction.mdx b/docs/authentication/ai/introduction.mdx deleted file mode 100644 index 8b1378917..000000000 --- a/docs/authentication/ai/introduction.mdx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/quickstart/build-with-ai-tools.mdx b/docs/quickstart/build-with-ai-tools.mdx index f9c302a10..87ab8e6c1 100644 --- a/docs/quickstart/build-with-ai-tools.mdx +++ b/docs/quickstart/build-with-ai-tools.mdx @@ -1,33 +1,304 @@ +--- +title: Build with AI Tools +hide_title: true +pagination_next: null +sidebar_position: 6 +description: >- + Learn how to leverage the plain text documentation format inside AI tools. +page_type: tutorial +category: quickstart +skip_llms: true +--- # Build with AI Tools ## Overview -If you plan on using LLMs to assist in the building of SuperTokens integrations, reference this guide to improve your development experience. -The documentation has various helper tools that can aid you when you are interacting with different AI tools +If you plan on using large language models (LLMs) to assist in the process of integrating SuperTokens, the documentation exposes a set of helpers that can aid you. ## Text documentation -You can access all the documentation as plain text markdown files by appending `.md` to the end of any URL. +You can access all the documentation as plain text markdown files by appending `.md` to the end of any URL or by using the `Copy Markdown` button, from the top right part of each page. For example, you can find the plain text version of this page at [https://supertokens.com/docs/quickstart/build-with-ai-tools.md](https://supertokens.com/docs/quickstart/build-with-ai-tools.md). This plain text format is ideal for AI tools and agents as it: - Contains fewer formatting tokens. - Displays content that might otherwise be hidden in the HTML or JavaScript-rendered version (such as content in tabs). - Maintains a clear markdown hierarchy that LLMs can easily parse and understand. +- Can be read in a paginated format using the `offset` and `length` query parameters. -https://llmstxt.org ### `/llms.txt` -We also host an [/llms.txt file](https://docs.supertokens.com/llms.txt.md) which instructs AI tools and agents on how to retrieve the plain text versions of our pages. The `/llms.txt` file follows an [emerging standard](https://llmstxt.org/) for enhancing content accessibility to LLMs. +The documentation website hosts an [/llms.txt file](https://docs.supertokens.com/llms.txt) which instructs AI tools and agents on how to retrieve the plain text versions of our pages. +The file follows an [emerging standard](https://llmstxt.org/) for enhancing content accessibility to LLMs. - -Additionally, our documentation pages feature buttons for copying the docs as markdown and for opening the full documentation page in an AI chat interface. +Additionally, to access the entire documentation content in a single page you can use the [/llms-full.txt file](https://docs.supertokens.com/llms-full.txt). +Keep in mind that this file is really large and might get ignored by LLMs. +You can use the `offset` and `length` query parameters to paginate the content. ## Model Context Protocol (MCP) Server -You can use the SuperTokens Model Context Protocol (MCP) server if you use AI-enhanced code editors (such as Cursor or Windsurf) or general purpose tools like Claude Desktop. -The MCP server provides AI agents a suite of tools to call the SuperTokens API and search our knowledge base (documentation, support articles, and more). +If you want to leverage the agentic capabilities of an LLM tool you can use the **SuperTokens Model Context Protocol** (MCP) server. +The server exposes a set of tools which instruct the LLM on how to access and read the documentation as well as how to administer your authentication integration. + + +### Installation + +You can use the MCP server in two ways: +- over HTTP, as an endpoint exposed by your current server +- as a CLI script, over STDIO + +#### Using HTTP + + + + +### Install the plugin + + + + ```bash + npm i -s supertokens-mcp-plugin + ``` + + + ```bash + yarn add supertokens-mcp-plugin + ``` + + + ```bash + pnpm add supertokens-auth-react supertokens-web-js + ``` + + + +### Update the SDK initialization code + +Initialize and include the `SuperTokensAdminMcpServer` in your SDK configuration. +You have to specify how the client will be authorized through either [claim validators](/docs/additional-verification/session-verification/claim-validation) or through custom logic defined in the `validateTokenPayload` function. + +```ts +import UserRoles, { UserRoleClaim } from "supertokens-node/recipe/userroles"; +import OAuth2Provider from "supertokens-node/recipe/oauth2provider"; +import OpenID from "supertokens-node/recipe/openid"; +import SuperTokensMcpPlugin, { + SuperTokensAdminMcpServer, +} from "supertokens-mcp-plugin"; + +const adminMcpServer = new SuperTokensAdminMcpServer({ + path: "/mcp/admin", + validateTokenPayload: async (accessTokenPayload) => { + // Use custom logic to authenticate who can access the admin MCP server + return { status: "OK" }; + }, + claimValidators: [UserRoleClaim.validators.includes("admin")], +}); + +export const SuperTokensConfig = { + supertokens: { + connectionURI: "", + apiKey: "", + }, + appInfo: { + appName: "", + apiDomain: "", + websiteDomain: "", + apiBasePath: "", + websiteBasePath: "", + }, + recipeList: [ + // Include your existing recipes here + // The OAuth2Provider recipe is required for the MCP authorization process + OAuth2Provider.init(), + ], + // Pass the MCP server through the plguin configuration section + experimental: { + plugins: [ + SuperTokensMcpPlugin.init({ + mcpServers: [adminMcpServer], + }), + ], + }, +}; +``` + +### Add the MCP server in a client configuration + + + +Add the following to your `~/.cursor/mcp.json` file. +To learn more, see the [Cursor documentation](https://docs.cursor.com/context/model-context-protocol). + +```json +{ + "mcpServers": { + "server-with-authentication": { + "command": "npx", + "args": ["mcp-remote", "/mcp"] + } + } +} +``` + + + +Add the following to your `.vscode/mcp.json` file. +To learn more, see the [VS Code documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers). + +```json +{ + "servers": { + "server-with-authentication": { + "command": "npx", + "args": ["mcp-remote", "/mcp"] + } + } +} +``` + + +Add the following to your `~/.codeium/windsurf/mcp_config.json` file. +To learn more, see the [Windsurf documentation](https://docs.windsurf.com/windsurf/cascade/mcp). + +```json +{ + "mcpServers": { + "server-with-authentication": { + "command": "npx", + "args": ["mcp-remote", "/mcp"] + } + } +} +``` + + +Add the following to your `claude_desktop_config.json` file. +To learn more, see the [Claude Desktop documentation](https://modelcontextprotocol.io/quickstart/user). + + ```json +{ + "mcpServers": { + "server-with-authentication": { + "command": "npx", + "args": ["mcp-remote", "/mcp"] + } + } +} + ``` + + + + + + +#### Using STDIO + +If you plan on using the server locally you can run it directly through `npx`. +You have to provide a set of environment variables that match the SDK configuration values. + + + +Add the following to your `~/.cursor/mcp.json` file. +To learn more, see the [Cursor documentation](https://docs.cursor.com/context/model-context-protocol). + +```json +{ + "mcpServers": { + "stripe": { + "command": "npx", + "args": ["-y", "supertokens-mcp-plugin"], + "env": { + "APP_NAME":"", + "API_DOMAIN":"", + "WEBSITE_DOMAIN":"", + "API_BASE_PATH":"", + "WEBSITE_BASE_PATH":"", + "CONNECTION_URI":"", + "API_KEY":"API_KEY" + } + } + } +} +``` + + + +Add the following to your `.vscode/mcp.json` file. +To learn more, see the [VS Code documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers). + +```json +{ + "servers": { + "stripe": { + "command": "npx", + "args": ["-y", "supertokens-mcp-plugin"], + "env": { + "APP_NAME":"", + "API_DOMAIN":"", + "WEBSITE_DOMAIN":"", + "API_BASE_PATH":"", + "WEBSITE_BASE_PATH":"", + "CONNECTION_URI":"", + "API_KEY":"API_KEY" + } + } + } +} +``` + + + +Add the following to your `~/.codeium/windsurf/mcp_config.json` file. +To learn more, see the [Windsurf documentation](https://docs.windsurf.com/windsurf/cascade/mcp). + +```json +{ + "mcpServers": { + "stripe": { + "command": "npx", + "args": ["-y", "supertokens-mcp-plugin"], + "env": { + "APP_NAME":"", + "API_DOMAIN":"", + "WEBSITE_DOMAIN":"", + "API_BASE_PATH":"", + "WEBSITE_BASE_PATH":"", + "CONNECTION_URI":"", + "API_KEY":"API_KEY" + } + } + } +} +``` + + + +Add the following to your `claude_desktop_config.json` file. +To learn more, see the [Claude Desktop documentation](https://modelcontextprotocol.io/quickstart/user). + +```json +{ + "mcpServers": { + "stripe": { + "command": "npx", + "args": ["-y", "supertokens-mcp-plugin"], + "env": { + "APP_NAME":"", + "API_DOMAIN":"", + "WEBSITE_DOMAIN":"", + "API_BASE_PATH":"", + "WEBSITE_BASE_PATH":"", + "CONNECTION_URI":"", + "API_KEY":"API_KEY" + } + } + } +} +``` + + + + -For a local setup, you can run the [local SuperTokens MCP server](https://github.com/supertokens/agent-toolkit/tree/main/modelcontextprotocol). diff --git a/docs/quickstart/integrations/_category_.json b/docs/quickstart/integrations/_category_.json index 4f0292cd7..0563a646e 100644 --- a/docs/quickstart/integrations/_category_.json +++ b/docs/quickstart/integrations/_category_.json @@ -1,4 +1,4 @@ { "label": "Integrations", - "position": 6 + "position": 7 } diff --git a/src/theme/DocItem/Content/index.scss b/src/theme/DocItem/Content/index.scss index 82e6862f0..726c7bff4 100644 --- a/src/theme/DocItem/Content/index.scss +++ b/src/theme/DocItem/Content/index.scss @@ -10,10 +10,6 @@ } ul li { - &:not(:last-child) { - margin-bottom: var(--space-2); - } - & > * { margin-bottom: calc(var(--space-1) + 5px); margin-top: calc(var(--space-1) + 5px); diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx index a428e73ad..603c714cf 100644 --- a/src/theme/MDXComponents.tsx +++ b/src/theme/MDXComponents.tsx @@ -135,6 +135,7 @@ export default { DescriptionText: DescriptionText, DocItemContextValue, Tabs, + Tab: TabItem, TabItem, PaidFeatureCallout, TokensCallout, From f6c1d7b7a94f7ce18c5586bfb18211e8614f70fb Mon Sep 17 00:00:00 2001 From: Bogdan Carpusor Date: Fri, 8 Aug 2025 21:27:23 +0300 Subject: [PATCH 3/3] Add icons and badges --- docs/authentication/ai-authentication.mdx | 3 ++- src/components/MenuItemIcon.tsx | 5 ++++ src/theme/DocSidebarItem/Link/index.tsx | 30 +++++++++++++++++++++++ static/img/logos/mcp.svg | 1 + 4 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 static/img/logos/mcp.svg diff --git a/docs/authentication/ai-authentication.mdx b/docs/authentication/ai-authentication.mdx index f0ee74bc4..3df644ce5 100644 --- a/docs/authentication/ai-authentication.mdx +++ b/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 diff --git a/src/components/MenuItemIcon.tsx b/src/components/MenuItemIcon.tsx index affc58b89..e8be20403 100644 --- a/src/components/MenuItemIcon.tsx +++ b/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, diff --git a/src/theme/DocSidebarItem/Link/index.tsx b/src/theme/DocSidebarItem/Link/index.tsx index e3c3811ef..ea02ae85b 100644 --- a/src/theme/DocSidebarItem/Link/index.tsx +++ b/src/theme/DocSidebarItem/Link/index.tsx @@ -75,7 +75,37 @@ export default function DocSidebarItemLink({ ) : null} + + ); } + +const NewPages = ["/docs/quickstart/build-with-ai-tools"]; + +function NewBadge({ href }: { href: string }) { + if (!NewPages.includes(href)) return null; + + return ( + + + New + + + ); +} + +const BetaPages = ["/docs/authentication/ai-authentication"]; + +function BetaBadge({ href }: { href: string }) { + if (!BetaPages.includes(href)) return null; + + return ( + + + Beta + + + ); +} diff --git a/static/img/logos/mcp.svg b/static/img/logos/mcp.svg new file mode 100644 index 000000000..5cd83a8bf --- /dev/null +++ b/static/img/logos/mcp.svg @@ -0,0 +1 @@ +ModelContextProtocol \ No newline at end of file