[mcp] Web UI and Teleport Connect adjustments for SSE and Streamable HTTP MCP servers

web/packages/shared/services/apps.test.ts

@@ -0,0 +1,50 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { getAppProtocol, getAppUriScheme } from './apps';
+import type { AppProtocol } from './types';
+
+describe('getAppProtocol', () => {
+  test.each<[string, AppProtocol]>([
+    // TCP
+    ['tcp://localhost:8080', 'TCP'],
+
+    // MCP
+    ['mcp+stdio://', 'MCP'],
+    ['mcp+http://example.com/mcp', 'MCP'],
+    ['mcp+sse+https://example.com/sse', 'MCP'],
+
+    // HTTP (fallback/default)
+    ['http://localhost:8080', 'HTTP'],
+    ['https://localhost:8080', 'HTTP'],
+    ['cloud://AWS', 'HTTP'],
+  ])('%s is %s', (uri, expected) => {
+    expect(getAppProtocol(uri)).toBe(expected);
+  });
+});
+
+describe('getAppUriScheme', () => {
+  test.each<[string, string]>([
+    ['tcp://localhost:8080', 'tcp'],
+    ['https://localhost:8080', 'https'],
+    ['mcp+http://example.com/mcp', 'mcp+http'],
+    ['', ''],
+  ])('scheme from %s is %s', (uri, expected) => {
+    expect(getAppUriScheme(uri)).toBe(expected);
+  });
+});

web/packages/shared/services/apps.ts

@@ -15,10 +15,33 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { AppProtocol } from 'shared/services/types';
 
 export type AwsRole = {
   name: string;
   arn: string;
   display: string;
   accountId: string;
 };
+
+/**
+ * getAppProtocol returns the protocol of the application. Equivalent to
+ * types.Application.GetProtocol.
+ */
+export function getAppProtocol(appURI: string): AppProtocol {
+  if (appURI.startsWith('tcp://')) {
+    return 'TCP';
+  }
+  if (appURI.startsWith('mcp+')) {
+    return 'MCP';
+  }
+  return 'HTTP';
+}
+
+/**
+ * getAppUriScheme extracts the scheme from the app URI.
+ */
+export function getAppUriScheme(appURI: string): string {
+  const sepIdx = appURI.indexOf('://');
+  return sepIdx > 0 ? appURI.slice(0, sepIdx) : '';
+}

web/packages/shared/services/types.ts

@@ -62,3 +62,8 @@ export enum AppSubKind {
   AwsIcAccount = 'aws_ic_account',
   MCP = 'mcp',
 }
+
+/**
+ * AppProtocol defines the protocol of an App resource.
+ */
+export type AppProtocol = 'TCP' | 'HTTP' | 'MCP';

web/packages/teleport/src/services/apps/apps.test.ts

@@ -180,6 +180,30 @@ test('correct formatting of apps fetch response', async () => {
           runAsHostUser: 'hostuser',
         },
       },
+      {
+        kind: 'app',
+        id: 'cluster-id-mcp-http-app-mcp-http-app.example.com',
+        name: 'mcp-http-app',
+        useAnyProxyPublicAddr: false,
+        description: 'Some MCP HTTP app',
+        uri: 'mcp+http://localhost:12345/mcp',
+        publicAddr: 'mcp-http-app.example.com',
+        labels: [],
+        clusterId: 'cluster-id',
+        fqdn: '',
+        friendlyName: '',
+        launchUrl: '',
+        awsRoles: [],
+        awsConsole: false,
+        isCloud: false,
+        isTcp: false,
+        addrWithProtocol: 'mcp+http://mcp-http-app.example.com',
+        userGroups: [],
+        samlApp: false,
+        samlAppSsoUrl: '',
+        integration: '',
+        permissionSets: [],
+      },
     ],
     startKey: mockResponse.startKey,
     totalCount: mockResponse.totalCount,
@@ -285,6 +309,13 @@ const mockResponse = {
         runAsHostUser: 'hostuser',
       },
     },
+    {
+      clusterId: 'cluster-id',
+      name: 'mcp-http-app',
+      publicAddr: 'mcp-http-app.example.com',
+      description: 'Some MCP HTTP app',
+      uri: 'mcp+http://localhost:12345/mcp',
+    },
   ],
   startKey: 'mockKey',
   totalCount: 100,

web/packages/teleport/src/services/apps/makeApps.ts

@@ -17,7 +17,7 @@
  */
 
 import { AppSubKind } from 'shared/services';
-import { AwsRole } from 'shared/services/apps';
+import { AwsRole, getAppUriScheme } from 'shared/services/apps';
 
 import cfg from 'teleport/config';
 
@@ -80,18 +80,20 @@ export default function makeApp(json: any): App {
   const userGroups = json.userGroups || [];
   const permissionSets: PermissionSet[] = json.permissionSets || [];
 
-  const isTcp = !!uri && uri.startsWith('tcp://');
-  const isCloud = !!uri && uri.startsWith('cloud://');
-  const isMCPStdio = !!uri && uri.startsWith('mcp+stdio://');
+  const scheme = getAppUriScheme(uri);
+  const isTcp = scheme === 'tcp';
+  const isCloud = scheme === 'cloud';
+  const isMcp = scheme.startsWith('mcp+');
 
   let addrWithProtocol = uri;
   if (publicAddr) {
     if (isCloud) {
       addrWithProtocol = `cloud://${publicAddr}`;
     } else if (isTcp) {
       addrWithProtocol = `tcp://${publicAddr}`;
-    } else if (isMCPStdio) {
-      addrWithProtocol = `mcp+stdio://${publicAddr}`;
+    } else if (isMcp) {
+      // Not used anywhere yet.
+      addrWithProtocol = `${scheme}://${publicAddr}`;
     } else if (subKind === AppSubKind.AwsIcAccount) {
       /** publicAddr for Identity Center account app is a URL with scheme. */
       addrWithProtocol = publicAddr;

web/packages/teleterm/src/services/tshd/app.ts

@@ -22,6 +22,7 @@ import {
   RouteToApp,
 } from 'gen-proto-ts/teleport/lib/teleterm/v1/app_pb';
 import { Cluster } from 'gen-proto-ts/teleport/lib/teleterm/v1/cluster_pb';
+import { getAppUriScheme } from 'shared/services/apps';
 
 /** Returns a URL that opens the web app in the browser. */
 export function getWebAppLaunchUrl({
@@ -93,6 +94,18 @@ export function isMcp(app: App): boolean {
   return app.endpointUri.startsWith('mcp+');
 }
 
+/**
+ * doesMcpAppSupportGateway returns true for MCP servers that supports local
+ * proxy gateway. Currently only MCP servers with streamable HTTP transport
+ * support the gateway.
+ */
+export function doesMcpAppSupportGateway(app: App): boolean {
+  return (
+    app.endpointUri.startsWith('mcp+http://') ||
+    app.endpointUri.startsWith('mcp+https://')
+  );
+}
+
 /**
  * Returns address with protocol which is an app protocol + a public address.
  * If the public address is empty, it falls back to the endpoint URI.
@@ -102,17 +115,18 @@ export function isMcp(app: App): boolean {
 export function getAppAddrWithProtocol(source: App): string {
   const { publicAddr, endpointUri } = source;
 
+  const scheme = getAppUriScheme(endpointUri);
   const isTcp = endpointUri && endpointUri.startsWith('tcp://');
   const isCloud = endpointUri && endpointUri.startsWith('cloud://');
-  const isMCPStdio = endpointUri && endpointUri.startsWith('mcp+stdio://');
+  const isMcp = scheme.startsWith('mcp+');
   let addrWithProtocol = endpointUri;
   if (publicAddr) {
     if (isCloud) {
       addrWithProtocol = `cloud://${publicAddr}`;
     } else if (isTcp) {
       addrWithProtocol = `tcp://${publicAddr}`;
-    } else if (isMCPStdio) {
-      addrWithProtocol = `mcp+stdio://${publicAddr}`;
+    } else if (isMcp) {
+      addrWithProtocol = `${scheme}://${publicAddr}`;
     } else {
       // publicAddr for Identity Center account app is a URL with scheme.
       addrWithProtocol = publicAddr.startsWith('https://')

web/packages/teleterm/src/ui/DocumentCluster/ActionButtons.story.tsx

@@ -123,10 +123,14 @@ function Buttons(props: StoryProps) {
         </Box>
         <HoverTooltip tipContent="Connect doesn't support MCP apps properly yet but it renders a div with consintent width.">
           <Box>
-            <Text>MCP</Text>
-            <Mcp />
+            <Text>MCP (Stdio)</Text>
+            <Mcp scheme={'mcp+stdio'} />
           </Box>
         </HoverTooltip>
+        <Box>
+          <Text>MCP (Streamable HTTP)</Text>
+          <Mcp scheme={'mcp+http'} />
+        </Box>
       </Flex>
       <Box>
         <Text>Server</Text>
@@ -266,11 +270,11 @@ function SamlApp() {
   );
 }
 
-function Mcp() {
+function Mcp(props: { scheme: string }) {
   return (
     <ConnectAppActionButton
       app={makeApp({
-        endpointUri: 'mcp+stdio://localhost:3000',
+        endpointUri: `${props.scheme}://localhost:3000`,
         uri: `${testCluster.uri}/apps/bar`,
       })}
     />

web/packages/teleterm/src/ui/DocumentCluster/ActionButtons.tsx

@@ -43,8 +43,10 @@ import {
   MenuLoginProps,
 } from 'shared/components/MenuLogin';
 import { MenuLoginWithActionMenu } from 'shared/components/MenuLoginWithActionMenu';
+import { getAppProtocol } from 'shared/services/apps';
 
 import {
+  doesMcpAppSupportGateway,
   formatPortRange,
   getAwsAppLaunchUrl,
   getSamlAppSsoUrl,
@@ -178,6 +180,7 @@ export function ConnectAppActionButton(props: { app: App }): React.JSX.Element {
     setUpAppGateway(appContext, props.app.uri, {
       telemetry: { origin: 'resource_table' },
       targetPort,
+      targetProtocol: getAppProtocol(props.app.endpointUri),
     });
   }
 
@@ -326,7 +329,20 @@ function AppButton(props: {
   }
 
   if (isMcp(props.app)) {
-    // TODO(greedy52) decide what to do with MCP servers.
+    // Streamable HTTP MCP servers support local proxy gateway.
+    if (doesMcpAppSupportGateway(props.app)) {
+      return (
+        <ButtonBorder
+          size="small"
+          onClick={() => props.setUpGateway()}
+          textTransform="none"
+          width={buttonWidth}
+        >
+          Connect
+        </ButtonBorder>
+      );
+    }
+    // TODO(greedy52) decide what to do with MCP servers that don't support gateway.
     // In the meantime, display a box of specific width to make the other columns line up for MCP
     // apps in the list view of unified resources.
     return <Box width={buttonWidth} />;

web/packages/teleterm/src/ui/DocumentGatewayApp/AppGateway.tsx

@@ -87,8 +87,10 @@ export function AppGateway(props: {
   const handleTargetPortChange =
     useDebouncedPortChangeHandler(changeTargetPort);
 
+  const isMcp = gateway.protocol === 'MCP';
+  const isHttpWebApp = gateway.protocol === 'HTTP';
   let address = `${gateway.localAddress}:${gateway.localPort}`;
-  if (gateway.protocol === 'HTTP') {
+  if (isHttpWebApp || isMcp) {
     address = `http://${address}`;
   }
 
@@ -147,6 +149,7 @@ export function AppGateway(props: {
     setUpAppGateway(ctx, targetUri, {
       telemetry: { origin: 'resource_table' },
       targetPort,
+      targetProtocol: gateway.protocol,
     });
   };
 
@@ -162,7 +165,7 @@ export function AppGateway(props: {
     >
       <Flex flexDirection="column" gap={2}>
         <Flex justifyContent="space-between" mb="2" flexWrap="wrap" gap={2}>
-          <H1>App Connection</H1>
+          <H1>{isMcp ? 'MCP Server Connection' : 'App Connection'}</H1>
           <Flex gap={2}>
             {isMultiPort && (
               <MenuLogin
@@ -219,7 +222,11 @@ export function AppGateway(props: {
 
       <Flex flexDirection="column" gap={2}>
         <div>
-          <Text>Access the app at:</Text>
+          <Text>
+            {isMcp
+              ? 'Access the MCP server with a streamable-HTTP-compatible client like "mcp-remote" at:'
+              : 'Access the app at:'}
+          </Text>
           <TextSelectCopy mt={1} text={address} bash={false} />
         </div>
 

web/packages/teleterm/src/ui/DocumentGatewayApp/DocumentGatewayApp.story.tsx

@@ -34,7 +34,7 @@ import { MockWorkspaceContextProvider } from 'teleterm/ui/fixtures/MockWorkspace
 import * as types from 'teleterm/ui/services/workspacesService';
 
 type StoryProps = {
-  appType: 'web' | 'tcp' | 'tcp-multi-port';
+  appType: 'web' | 'tcp' | 'tcp-multi-port' | 'mcp';
   online: boolean;
   changeLocalPort: 'succeed' | 'throw-error';
   changeTargetPort: 'succeed' | 'throw-error';
@@ -48,7 +48,7 @@ const meta: Meta<StoryProps> = {
   argTypes: {
     appType: {
       control: { type: 'radio' },
-      options: ['web', 'tcp', 'tcp-multi-port'],
+      options: ['web', 'tcp', 'tcp-multi-port', 'mcp'],
     },
     changeLocalPort: {
       if: { arg: 'online' },
@@ -93,6 +93,9 @@ export function Story(props: StoryProps) {
     gateway.protocol = 'TCP';
     gateway.targetSubresourceName = '4242';
   }
+  if (props.appType === 'mcp') {
+    gateway.protocol = 'MCP';
+  }
   const documentGateway: types.DocumentGateway = {
     kind: 'doc.gateway',
     targetUri: '/clusters/bar/apps/quux',

web/packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx

@@ -281,6 +281,30 @@ const makeConnections = (index = 0) => {
       login: 'casey',
       clusterName: 'teleport.example.sh',
     },
+    {
+      connected: true,
+      kind: 'connection.gateway' as const,
+      title: 'some-web-app' + suffix,
+      targetName: 'some-web-app',
+      id: '11111' + suffix,
+      targetUri: '/clusters/foo/apps/some-web-app' + suffix,
+      port: '11111',
+      gatewayUri: '/gateways/some-web-app',
+      clusterName: 'teleport.example.sh',
+      targetProtocol: 'HTTP',
+    },
+    {
+      connected: true,
+      kind: 'connection.gateway' as const,
+      title: 'some-mcp-server' + suffix,
+      targetName: 'some-mcp-server',
+      id: '22222' + suffix,
+      targetUri: '/clusters/foo/apps/some-mcp-server' + suffix,
+      port: '22222',
+      gatewayUri: '/gateways/some-mcp-server',
+      clusterName: 'teleport.example.sh',
+      targetProtocol: 'MCP',
+    },
   ];
 };