update readme with explanations

README.md

@@ -1,6 +1,15 @@
-Welcome to the Pomerium chat app, a minimal chat application for showcasing remote MCP servers secured with [Pomerium](https://pomerium.com).
+Welcome to the Pomerium Chat, a minimal chat application for showcasing remote Model Context Protocol servers secured with [Pomerium](https://pomerium.com).
 
-## Getting Started
+# Quick start
+
+## Pre-requisites
+
+1. Linux or MacOS host
+2. Docker and Docker Compose
+3. Your machine should have port 443 exposed to the internet so that it could acquire TLS certificates from LetsEncrypt and OpenAI could call your MCP server endpoints.
+4. OpenAI API Key
+
+## Quickstart
 
 ### Environment Variables
 
@@ -10,7 +19,225 @@ Create a `.env` file in the root directory and add the following environment var
 OPENAI_API_KEY=your_api_key_here
 ```
 
-### Development
+### Pomerium Config
+
+Update [`pomerium-config.yaml`](./pomerium-config.yaml) and replace **YOUR-DOMAIN** with the subdomain you control. Create A DNS records for relevant hosts (or **`*.YOUR-DOMAIN`**).
+
+By default, the access policy limits access to users with emails in **YOUR-DOMAIN**. See [policy language reference](https://www.pomerium.com/docs/internals/ppl) if you need to adjust it.
+
+### Docker Compose
+
+See [`docker-compose.yaml`](./docker-compose.yaml) file in this repo.
+
+```bash
+docker compose up -d
+```
+
+### Testing
+
+Now you should be able to navigate to `https://mcp-app-demo.YOUR-DOMAIN/`.
+A sign-in page would open. After you signed in, you should be redirected to the application itself.
+
+There should be a demo database server (Northwind DB) acessible and in Connected status. Click on it to use it in the conversation.
+
+Now you may ask some questions like "What were our sales by year", and see how OpenAI large language model inference would interact with the MCP database server running on your computer to obtain the answers.
+
+# How does it work
+
+## Token Vocabulary
+
+- **External Token (TE):**  
+  An externally-facing token issued by Pomerium that represents the user's session. This token is used by external clients (such as Claude.ai, OpenAI, or your own apps) to authenticate requests to Pomerium-protected MCP servers.  
+  Example: The token you provide to an LLM API or agentic framework to allow it to call your MCP server.
+
+- **Internal Token (TI):**  
+  An internal authentication token that Pomerium obtains from an upstream OAuth2 provider (such as Notion, Google Drive, GitHub, etc.) on behalf of the user. This token is never exposed to external clients. Pomerium uses this token to authenticate requests to the upstream service when proxying requests to your MCP server.
+
+Pomerium acts as a secure gateway between Model Context Protocol (MCP) clients and servers. It provides authentication and authorization for local HTTP MCP servers, using OAuth 2.1 flows. This setup is especially useful when your MCP server needs to access upstream APIs that require OAuth tokens (such as Notion, Google Drive, GitHub, etc.).
+
+It also enables you to build internal applications that use agentic frameworks or LLM APIs capable of invoking MCP servers, as demonstrated in this repository.
+
+To understand this setup, let's look at how an MCP client communicates with MCP servers that are protected by Pomerium.
+
+## 1. Exposing an Internal MCP Server to a Remote Client
+
+Suppose you want to allow an external MCP client (like Claude.ai) to access your internal MCP server, but you want to keep it secure. Pomerium sits in front of your server and manages authentication and authorization for all incoming requests.
+
+This means you can safely share access to internal resources (like a database) with external clients, without exposing them directly to the internet.
+
+You configure your Pomerium Route as usual with an additional `mcp` property that signifies that this route represents a Model Context Protocol server route.
+
+```yaml
+routes:
+  - from: https://my-mcp-server.your-domain.com
+    to: http://my-mcp-server.int:8080/mcp
+    name: My MCP Server
+    mcp: {}
+```
+
+```mermaid
+sequenceDiagram
+  actor U as User
+  participant C as MCP Client
+  participant P as Pomerium
+  participant S as MCP Server
+  U ->> C: Adds a server URL
+  C ->> P: Registers client, initiates auth
+  P ->> C: Sign-in URL
+  C ->> U: Redirect to sign-in URL
+  U ->> P: Sign-in
+  P ->> C: Redirect to client
+  C ->> P: Obtain Token
+  C ->> P: GET https://mcp-server Authorization: Bearer Token
+  P ->> S: Proxy request to MCP Server
+```
+
+## 2. MCP Server Needs Upstream OAuth
+
+If your MCP server needs to access an upstream service that requires OAuth (for example, GitHub or Google Drive), Pomerium can handle the OAuth flow for you. Here’s how the process works:
+
+1. The user adds the MCP server URL in the client (e.g., Claude.ai).
+2. The client registers with Pomerium and starts authentication.
+3. Pomerium gives the client a sign-in URL, which is shown to the user.
+4. The user signs in to Pomerium, then is redirected to the upstream OAuth provider.
+5. The user authenticates with the upstream provider. The provider returns an **Internal Token (TI)** to Pomerium.
+6. Pomerium finishes the sign-in and redirects the user back to the client.
+7. The client receives an **External Token (TE)** from Pomerium.
+8. The client uses **TE** to make requests to the MCP server.
+9. Pomerium refreshes the upstream token (**TI**) as needed and proxies requests to the MCP server, passing **TI** in the `Authorization` header.
+
+**Key benefits:**
+
+- External clients (like Claude.ai) never see your upstream OAuth tokens.
+- Your MCP server always receives a valid upstream token.
+- The MCP server can remain stateless and does not need to manage OAuth flows or tokens.
+
+**Route configuration:**
+
+```yaml
+routes:
+  - from: https://github.your-domain
+    to: http://github-mcp.int:8080/mcp
+    name: GitHub
+    mcp:
+      upstream_oauth2:
+        client_id: xxxxxxxxxxxx
+        client_secret: yyyyyyyyy
+        scopes: ['read:user', 'user:email']
+        endpoint:
+          auth_url: 'https://github.com/login/oauth/authorize'
+          token_url: 'https://github.com/login/oauth/access_token'
+```
+
+```mermaid
+sequenceDiagram
+  actor U as User
+  participant C as MCP Client
+  participant O as Upstream OAuth
+  participant P as Pomerium
+  participant S as MCP Server
+  U ->> C: Adds a server URL
+  C ->> P: Registers client, initiates auth
+  P ->> C: Sign-in URL
+  C ->> U: Redirect to sign-in URL
+  U ->> P: Sign-in
+  P ->> U: Redirect to upstream OAuth
+  U ->> O: Authenticate with upstream OAuth
+  O ->> P: Return Internal Token (TI)
+  P ->> C: Redirect to client
+  C ->> P: Obtain External Token (TE)
+  C ->> P: GET https://mcp-server Authorization: Bearer (TE)
+  P ->> O: Refresh (TI) if necessary
+  P ->> S: Proxy request to MCP Server, Bearer (TI)
+```
+
+### 3. Calling internal MCP server from your app
+
+Some inference APIs, such as the [OpenAI API](https://platform.openai.com/docs/guides/tools-remote-mcp) and [Claude API](https://docs.anthropic.com/en/docs/agents-and-tools/mcp-connector), now support direct invocation of MCP servers. This trend is expected to grow, and many agentic frameworks are adding support for MCP server calls. You can also implement MCP tool calls manually in your app using LLM function calling capabilities. All these approaches require providing an `Authorization: Bearer` **External Token (TE)** for the MCP server so that requests can be securely routed through Pomerium.
+
+If you are building your own internal application and need to obtain such a token, Pomerium offers a _client MCP mode_ for routes. By setting the `mcp.pass_upstream_access_token` option, Pomerium will supply your upstream application with an `Authorization: Bearer` **External Token (TE)** representing the current user session. You can then pass this token to external LLMs or agentic frameworks, allowing them to access MCP servers behind Pomerium according to your authorization policy.
+
+The following flow illustrates this process, assuming the user is already authenticated with Pomerium:
+
+```mermaid
+sequenceDiagram
+  actor U as User
+  participant C as Your App Backend
+  participant P as Pomerium
+  participant S as MCP Server
+  participant I as LLM API
+  U ->> P: GET https://mcp-app-demo.your-domain.com
+  P ->> C: GET http://mcp-app-demo:3000 Authorization: Bearer (TE)
+  C ->> I: call tool https://mcp-server.your-domain Authorization: Bearer (TE)
+  I ->> P: GET https://mcp-server.your-domain Authorization: Bearer (TE)
+  C ->> P: GET https://mcp-server
+```
+
+Example route configuration:
+
+```yaml
+routes:
+  - from: https://mcp-app-demo.your-domain.com
+    to: http://mcp-app-demo:3000
+    mcp:
+      pass_upstream_access_token: true
+    policy: {} # define your policy here
+  - from: https://mcp-server.your-domain.com
+    to: http://mcp-server.int:8080/mcp
+    name: My MCP Server
+    mcp: {}
+    policy: {} # define your policy here
+```
+
+### 4. Listing available MCP servers from your app
+
+You can provide users with a dynamic list of MCP servers protected by the same Pomerium instance as your application. To do this, issue an HTTP request to your app backend using the same `Authorization: Bearer` token your backend received. The response will include the list and connection status of each MCP server upstream available to this Pomerium cluster.
+
+The **connected** property indicates whether the current user has all required internal tokens for upstream OAuth (if needed):
+
+- **true** – The user has all required internal tokens from upstream OAuth providers, or none are required for this server.
+- **false** – The user needs to authenticate with the upstream OAuth provider before accessing this MCP server.
+
+A later section will explain how to ensure your user has all required internal tokens.
+
+```
+GET https://mcp-demo-app.yourdomain.com/ HTTP/1.1
+Accept: application/json
+Authorization: Bearer (TE)
+
+Content-Type: application/json
+{
+    "servers": [
+        {
+            "name": "DB",
+            "url": "https://db-mcp.your-domain.com",
+            "connected": true
+        },
+        {
+            "name": "GitHub",
+            "url": "https://github-mcp.your-domain.com",
+            "connected": false
+        }
+    ]
+}
+```
+
+## 5. Ensuring your current user has authenticated with an upstream OAuth2 provider
+
+If your target MCP server shows `connected: false`, the user needs to authenticate with the required upstream OAuth2 provider.  
+To do this, redirect the user's browser to the special `/.pomerium/mcp/connect` path on the MCP server route (for example: `https://db-mcp.your-domain.com/.pomerium/mcp/connect`).  
+Include a `redirect_url` query parameter that points back to your application's page—this is where the user should return after authentication, and where you can reload the MCP server list and their connection status.
+
+**Note:** For security, the `redirect_url` must be a host that matches one of your MCP Client routes.
+
+After the user completes authentication, the MCP server's `connected` status should become `true`.
+
+## 6. Obtaining User Details
+
+To access the authenticated user's identity and claims, both your MCP client application and MCP server should read the [`X-Pomerium-Assertion`](https://www.pomerium.com/docs/get-started/fundamentals/core/jwt-verification#manually-verify-the-jwt) HTTP header.  
+This header contains a signed JWT with user information, which you can decode and verify to obtain details such as the user's email, name, and other claims.
+
+# Development
 
 To run this application in development mode:
 
@@ -30,15 +257,6 @@ npm run build
 npm run start
 ```
 
-### Docker Deployment
-
-You can also run the application using Docker:
-
-```bash
-docker build -t mcp-app-demo .
-docker run -p 3000:3000 -e OPENAI_API_KEY=your_api_key_here mcp-app-demo
-```
-
 ## Features
 
 - AI-powered chat interface using OpenAI
@@ -87,96 +305,3 @@ pnpx shadcn@latest add button
 ## Routing
 
 This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
-
-### Adding A Route
-
-To add a new route to your application just add another a new file in the `./src/routes` directory.
-
-TanStack will automatically generate the content of the route file for you.
-
-Now that you have two routes you can use a `Link` component to navigate between them.
-
-### Adding Links
-
-To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
-
-```tsx
-import { Link } from '@tanstack/react-router'
-```
-
-Then anywhere in your JSX you can use it like so:
-
-```tsx
-<Link to="/about">About</Link>
-```
-
-This will create a link that will navigate to the `/about` route.
-
-More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
-
-### Using A Layout
-
-In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
-
-Here is an example layout that includes a header:
-
-```tsx
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
-
-import { Link } from '@tanstack/react-router'
-
-export const Route = createRootRoute({
-  component: () => (
-    <>
-      <header>
-        <nav>
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-        </nav>
-      </header>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-})
-```
-
-The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
-
-More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
-
-## Data Fetching
-
-There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
-
-For example:
-
-```tsx
-const peopleRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/people',
-  loader: async () => {
-    const response = await fetch('https://swapi.dev/api/people')
-    return response.json() as Promise<{
-      results: {
-        name: string
-      }[]
-    }>
-  },
-  component: () => {
-    const data = peopleRoute.useLoaderData()
-    return (
-      <ul>
-        {data.results.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    )
-  },
-})
-```
-
-# Learn More
-
-You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

docker-compose.yaml

@@ -0,0 +1,40 @@
+services:
+  # PostgreSQL database is required for Pomerium to interact with external MCP Clients such as claude.ai
+  postgres:
+    image: postgres:17
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: pomerium
+      POSTGRES_HOST_AUTH_METHOD: trust
+    ports:
+      - 5432:5432
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+  #
+  # Pomerium is a secure access management solution that provides identity-aware access to applications and services.
+  # It acts as a reverse proxy, managing authentication and authorization for web applications.
+  pomerium:
+    image: pomerium/pomerium:main
+    ports:
+      - '443:443'
+      - '80:80'
+    volumes:
+      - ./pomerium-config.yaml:/pomerium/config.yaml
+      - pomerium-autocert:/data/autocert
+  #
+  # MCP App Demo is a sample application that demonstrates the capabilities of Pomerium's Model Context Protocol integration (this repo).
+  #
+  mcp-app-demo:
+    restart: unless-stopped
+    image: pomerium/mcp-app-demo:main
+    environment:
+      __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS: mcp-app-demo
+    env_file: .env
+    expose:
+      - 3000
+    ports:
+      - 3000:3000
+volumes:
+  postgres-data:
+  pomerium-autocert: