docs: init use cases

docs/quick-starts/third-party/oidc/README.mdx

@@ -6,6 +6,8 @@ sidebar_custom_props:
   logoFilename: 'oidc.svg'
 ---
 
+import QuickStartsReference from './_quick-starts-reference.md';
+
 # Integrate third-party app with OIDC / OAuth
 
 Use Logto as your identity provider (IdP) to integrate third-party apps via OpenID Connect (OIDC) or OAuth 2.0 protocol.
@@ -35,9 +37,12 @@ In order to set up Logto as an IdP for your third-party applications, you need t
 3. Retrieve the **authorization endpoint** and **token endpoint** from Logto application details page and provide them to your service provider.
 
    - If your service provider supports OIDC discovery, you can simply copy the **discovery endpoint** from Logto application details page and provide it to your service provider. The service provider will be able to retrieve all the up to date OIDC authentication information from the discovery endpoint automatically.
-
    - Otherwise, click on the **Show endpoint details** button to view all the OIDC authentication endpoints.
 
+---
+
+<QuickStartsReference />
+
 ## Manage your third-party applications \{#manage-your-third-party-applications}
 
 All third-party applications will be catalogued on the **Applications** page, specifically under the **Third-party apps** tab. This arrangement distinguishes them from first-party applications for you, ensuring easy management.

docs/quick-starts/third-party/oidc/_quick-starts-reference.md

@@ -0,0 +1,11 @@
+Under the hood, a third-party app is just a standard OAuth 2.0 / OIDC client. This means you (or the third-party developer) can use any OAuth 2.0 / OIDC library or framework to integrate with Logto.
+
+If you're not familiar with OAuth 2.0 or OIDC, you can start by following one of our “Traditional web” quick start guides.
+
+A few things to keep in mind:
+
+1. Logto currently requires third-party apps to be “Traditional web” apps. In other words, the app needs a backend server (or backend-for-frontend) to securely store the client secret.
+2. Most our quick start guides are written for first-party apps, but you can still use them as a reference for third-party app integration.
+3. The main difference is that third-party apps will show a consent screen, asking users for explicit permission to access their data.
+
+You can find more information in our [quick start guides](https://docs.logto.io/quick-starts).

docs/use-cases/README.mdx

@@ -0,0 +1,24 @@
+---
+sidebar_position: 1
+sidebar_label: Introduction
+---
+
+import AiCatalog from './ai/fragments/_catalog.mdx';
+import AuthorizationCatalog from './authorization/fragments/_catalog.mdx';
+import MultiTenancyCatalog from './multi-tenancy/fragments/_catalog.mdx';
+
+# Logto use cases
+
+Logto is a powerful auth infrastructure and identity and access management (IAM) solution that can be used in various scenarios. We have created a series of use cases to help you understand how to leverage Logto in different contexts.
+
+## Authorization
+
+<AuthorizationCatalog headingLevel={3} />
+
+## Multi-tenancy
+
+<MultiTenancyCatalog headingLevel={3} />
+
+## AI
+
+<AiCatalog headingLevel={3} />

docs/use-cases/ai/README.mdx

@@ -0,0 +1,11 @@
+---
+sidebar_position: 3
+sidebar_label: AI
+description: Explore how Logto can help you build secure, AI-enabled experiences.
+---
+
+import Catalog from './fragments/_catalog.mdx';
+
+# AI integration use cases with Logto
+
+<Catalog />

docs/use-cases/ai/enable-third-party-ai-agent-access.mdx

@@ -0,0 +1,29 @@
+---
+sidebar_position: 3
+sidebar_label: Enable third-party AI agent access to app
+---
+
+# Enable third-party AI agent access to your app
+
+:::caution
+👷 This tutorial is still in progress. Please check back later for updates. 🚧
+:::
+
+This guide walks you through integrating Logto with your service and enabling AI agents to access it.
+
+You'll learn how to:
+
+- Configure Logto as the authorization server for your service.
+- Obtain an access token for the AI agent to access your service.
+- Test the flow with an AI agent.
+
+## Prerequisites
+
+- A [Logto Cloud](https://cloud.logto.io) (or self-hosted) tenant
+- A service that exposes API endpoints to be accessed by the AI agent
+
+### Understanding the flow
+
+- **Service**: The service you want to expose to the AI agent.
+- **AI agent**: The AI agent that will access your service.
+- **Logto**: Serves as the OpenID Connect provider (authorization server) and manages user identities.

docs/use-cases/ai/fragments/_catalog.mdx

@@ -0,0 +1,50 @@
+import FlaskIcon from '@site/src/assets/flask.svg';
+import RobotIcon from '@site/src/assets/robot.svg';
+import SecurityIcon from '@site/src/assets/security.svg';
+import DynamicHeading from '@site/src/components/DynamicHeading';
+
+Explore how Logto empowers you to build secure, AI-enabled experiences. Whether you’re implementing the Model Context Protocol (MCP) or integrating AI agents into your app, Logto offers developer-friendly authentication and authorization solutions.
+
+<DynamicHeading level={props.headingLevel ?? 2}>Build your MCP server</DynamicHeading>
+
+<DocCardList
+  items={[
+    {
+      type: 'link',
+      label: 'Enable auth for your MCP-powered apps',
+      href: '/use-cases/ai/mcp-server-add-auth',
+      description:
+        'Learn how to integrate authentication and authorization into your MCP server, allowing secure access for your own apps and services.',
+      customProps: {
+        icon: <SecurityIcon />,
+      },
+    },
+    {
+      type: 'link',
+      label: 'Enable third-party AI agent access to your MCP server',
+      href: '/use-cases/ai/mcp-server-enable-third-party-ai-agent-access',
+      description:
+        'Find out how to enable authentication and authorization for third-party AI agents and apps connecting to your MCP server.',
+      customProps: {
+        icon: <FlaskIcon />,
+      },
+    },
+  ]}
+/>
+
+<DynamicHeading level={props.headingLevel ?? 2}>AI-ready auth for your app</DynamicHeading>
+
+<DocCardList
+  items={[
+    {
+      type: 'link',
+      label: 'Enable third-party AI agent access to your app',
+      href: '/use-cases/ai/enable-third-party-ai-agent-access',
+      description:
+        'Discover how to add authentication and authorization for third-party AI agents accessing your app, ensuring security and control across AI-driven workflows.',
+      customProps: {
+        icon: <RobotIcon />,
+      },
+    },
+  ]}
+/>

docs/use-cases/ai/fragments/_mcp-prerequisites.mdx

@@ -0,0 +1,44 @@
+import Mermaid from '@theme/Mermaid';
+
+## Prerequisites
+
+- A [Logto Cloud](https://cloud.logto.io) (or self-hosted) tenant
+- Node.js or Python environment
+
+### Understanding the architecture
+
+- **MCP server**: The server that exposes tools and resources to MCP clients.
+- **MCP client**: A client used to initiate the authentication flow and test the integration. {<b>{props.isThirdParty ? 'The third-party AI agent will be used as the client in this guide.' : "We'll use the MCP Inspector as the client in this guide."}</b>}
+- **Logto**: Serves as the OpenID Connect provider (authorization server) and manages user identities.
+
+A non-normative sequence diagram illustrates the overall flow of the process:
+
+<Mermaid value={`sequenceDiagram
+    participant Client as MCP Client<br/>${props.isThirdParty ? '(third-party AI agent)' : '(MCP Inspector)'}
+    participant Server as MCP Server
+    participant Logto
+
+    Server->>Logto: Request OpenID Connect configuration
+    Logto->>Server: Return configuration
+    Note over Server: Cache the configuration
+    Client->>Server: Request access to a tool
+    Server->>Client: Not authenticated (401 Unauthorized)
+    Client->>Server: Request OAuth 2.0 Authorization Server Metadata
+    Note over Server: In this context, “OpenID Connect configuration” and<br/>“OAuth 2.0 Authorization Server Metadata”<br/>refer to the same thing.
+    Server->>Client: Return OpenID Connect configuration retrieved from Logto
+    Client->>Logto: Redirect to Logto for authentication
+    Logto->>Logto: User authenticates
+    ${props.isThirdParty ? 'Logto->>Logto: User authorizes (consents) scopes<br/>to the third-party app' : ''}
+    Logto->>Client: Redirect back to MCP server with authorization code
+    Client->>Logto: Request access token using authorization code
+    Logto->>Client: Return access token
+    Client->>Server: Request tool with access token
+    Server->>Logto: Request user info using access token
+    Logto->>Server: Return user info
+    Server->>Client: Return tool response`}
+
+/>
+
+:::note
+Due to MCP is quickly evolving, the above diagram may not be fully up to date. Please refer to the [mcp-auth](https://mcp-auth.dev) documentation for the latest information.
+:::

docs/use-cases/ai/fragments/_mcp-sample-code.mdx

@@ -0,0 +1,15 @@
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
+<Tabs groupId="sdk">
+<TabItem value="python" label="Python">
+
+The full MCP server code can be found in the [mcp-auth/python](https://github.com/mcp-auth/python) repository.
+
+</TabItem>
+<TabItem value="node" label="Node.js">
+
+The full MCP server code can be found in the [mcp-auth/js](https://github.com/mcp-auth/js) repository.
+
+</TabItem>
+</Tabs>