Merge pull request #1047 from ashera96/mcp-support-v2

Add MCP Server Support for API Manager

Author: HeshanSudarshana

portals/devportal/src/main/webapp/.eslintrc.js

@@ -23,8 +23,10 @@ module.exports = {
             jsx: true,
             modules: true,
         },
+        requireConfigFile: true,
         babelOptions: {
             presets: ['@babel/preset-react', '@babel/preset-typescript'],
+            configFile: require.resolve('./babel.config.js'),
         },
     },
     env: {
@@ -36,7 +38,7 @@ module.exports = {
     },
     extends: ['airbnb', 'plugin:jsx-a11y/recommended'], // http://airbnb.io/javascript/react/
     rules: {
-        "linebreak-style": 0,
+        'linebreak-style': 0,
         'max-len': ['error', { code: 140, tabWidth: 4 }],
         'require-jsdoc': [
             'warn',
@@ -99,10 +101,37 @@ module.exports = {
         }],
         'react/sort-comp': [1],
         'react/jsx-props-no-spreading': [1, {
-            exceptions:
-          ['Route', 'Operation', 'Listing', 'DeferredDetails', 'Details', 'svg', 'Paper', 'EditableRow', 'CreateScope', 'EditScope', 'WrappedComponent', 'ErrorIcon', 'WarningIcon', 'CheckCircleIcon', 'InfoIcon'],
+            exceptions: [
+                'Route',
+                'Operation',
+                'Listing',
+                'DeferredDetails',
+                'Details',
+                'svg',
+                'Paper',
+                'EditableRow',
+                'CreateScope',
+                'EditScope',
+                'WrappedComponent',
+                'ErrorIcon',
+                'WarningIcon',
+                'CheckCircleIcon',
+                'InfoIcon',
+            ],
         }],
-        'react/prop-types': [1, { ignore: ['classes', 'api', 'theme', 'history', 'intl'] }], // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
+        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
+        'react/prop-types': [
+            1,
+            {
+                ignore: [
+                    'classes',
+                    'api',
+                    'theme',
+                    'history',
+                    'intl',
+                ],
+            },
+        ],
         'react/destructuring-assignment': [1, 'always'],
     },
     plugins: ['react', 'jest', 'prettier'],

portals/devportal/src/main/webapp/WEB-INF/web.xml

@@ -103,6 +103,7 @@
         <url-pattern>/api-products/*</url-pattern>
         <url-pattern>/home/*</url-pattern>
         <url-pattern>/apis/*</url-pattern>
+        <url-pattern>/mcp-servers/*</url-pattern>
         <url-pattern>/policy/*</url-pattern>
         <url-pattern>/apiGroups/*</url-pattern>
         <url-pattern>/sign-up/*</url-pattern>

portals/devportal/src/main/webapp/package-lock.json

@@ -31,8 +31,8 @@
         "@asyncapi/react-component": "^2.0.4",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "@hapi/joi": "^17.1.1",
         "@graphiql/plugin-explorer": "^3.0.3",
+        "@hapi/joi": "^17.1.1",
         "@iconify/icons-simple-icons": "^1.0.52",
         "@iconify/react": "^1.1.3",
         "@mdi/js": "^6.9.96",
@@ -42,6 +42,7 @@
         "@mui/material": "^5.15.6",
         "@stoplight/elements": "^8.3.2",
         "@ui5/webcomponents-icons": "^1.9.3",
+        "@wso2-org/mcp-playground": "^1.0.6",
         "ajv": "^8.12.0",
         "async-mutex": "^0.5.0",
         "autosuggest-highlight": "^3.3.4",

portals/devportal/src/main/webapp/package.json

@@ -524,4 +524,12 @@ a {
   margin: 0 0 20px;
   font-size: 17.5px;
   border-left: 5px solid #eee;
-}
+}
+
+/* MCP Playground font family override to match portal theme */
+.mcp-playground,
+.mcp-playground *,
+[data-testid="mcp-playground"],
+[data-testid="mcp-playground"] * {
+    font-family: "Open Sans", "Helvetica", "Arial", sans-serif !important;
+}

portals/devportal/src/main/webapp/site/public/css/main.css

@@ -0,0 +1,7 @@
+/* MCP Playground font family override to match portal theme */
+.mcp-playground,
+.mcp-playground *,
+[data-testid="mcp-playground"],
+[data-testid="mcp-playground"] * {
+    font-family: "Open Sans", "Helvetica", "Arial", sans-serif !important;
+}

portals/devportal/src/main/webapp/site/public/css/overrides.css

@@ -1,4 +1,7 @@
 {
+  "ApiTryOut.SecurityDetailsPanel.btn.cancel": "Cancel",
+  "ApiTryOut.SecurityDetailsPanel.btn.done": "Done",
+  "ApiTryOut.SecurityDetailsPanel.title": "Security Configuration",
   "Apis.Chat.Chat.Messages.subject.line": "API Marketplace Assistant is an early feature and can make mistakes. Verify its outputs.",
   "Apis.Chat.ChatIcon.disable.chat.label": "Disable chat",
   "Apis.Chat.ChatIcon.tooltip.label": "Open Chat",
@@ -27,9 +30,6 @@
   "Apis.Details.ApiChat.components.ApiChatResponse.executionResults": "Certainly! Here are the results of the API calls I executed on your behalf:",
   "Apis.Details.ApiChat.components.ApiChatResponse.loadingMessage": "Loading next execution step...",
   "Apis.Details.ApiChat.components.ApiChatResponse.terminatingMessage": "Execution is terminating...",
-  "Apis.Details.ApiChat.components.ConfigureKeyDrawer.cancel": "Cancel",
-  "Apis.Details.ApiChat.components.ConfigureKeyDrawer.done": "Done",
-  "Apis.Details.ApiChat.components.ConfigureKeyDrawer.title": "Configure Key",
   "Apis.Details.ApiChat.components.CopyToClipboard.copiedText": "Copied",
   "Apis.Details.ApiChat.components.CopyToClipboard.copyText": "Copy to Clipboard",
   "Apis.Details.ApiChat.components.SampleQueryCard.executeButton": "Execute",
@@ -106,6 +106,7 @@
   "Apis.Details.AsyncApiConsole.Webhooks.secret": "Secret",
   "Apis.Details.Breadcrumb.comments": "Comments",
   "Apis.Details.Breadcrumb.documents": "Documents",
+  "Apis.Details.Breadcrumb.mcp.playground": "MCP Playground",
   "Apis.Details.Breadcrumb.overview": "Overview",
   "Apis.Details.Breadcrumb.route.try.out": "Try Out",
   "Apis.Details.Breadcrumb.sdks": "SDKs",
@@ -314,7 +315,6 @@
   "Apis.Details.Swagger.URL.copied": "Copied",
   "Apis.Details.Swagger.URL.copy.to.clipboard": "Copy to clipboard",
   "Apis.Details.TryOutConsole.access.token.tooltip": "You can use your existing Access Token or you can generate a new Test Key.",
-  "Apis.Details.index.all.apis": "ALL APIs",
   "Apis.Details.index.comments": "Comments",
   "Apis.Details.index.definition": "Definition",
   "Apis.Details.index.documentation": "Documents",
@@ -327,15 +327,8 @@
   "Apis.Details.index.try.out.": "Try Out",
   "Apis.Details.index.try.out.api.chat": "API Chat",
   "Apis.Details.index.try.out.api.console": "API Console",
+  "Apis.Details.index.try.out.mcp.playground": "MCP Playground",
   "Apis.Details.protocols.and.endpoints": "Protocols & Endpoints",
-  "Apis.Listing.APICardView.already.subscribed": "Subscribed",
-  "Apis.Listing.APICardView.not.allowed": "Not Allowed",
-  "Apis.Listing.APICardView.rows.per.page": "Rows per page",
-  "Apis.Listing.APIList.id": "Id",
-  "Apis.Listing.APIList.isSubscriptionAvailable": "Is Subscription Available",
-  "Apis.Listing.APIList.name": "Name",
-  "Apis.Listing.APIList.subscription.status": "Subscription Status",
-  "Apis.Listing.APIList.version": "Version",
   "Apis.Listing.ApiBreadcrumbs.apigroups.main": "API Groups",
   "Apis.Listing.ApiTableView.business.owner.caption": "(Business Owner)",
   "Apis.Listing.ApiTableView.context": "Context",
@@ -367,7 +360,6 @@
   "Apis.Listing.DocThumb.apiVersion": "API Version",
   "Apis.Listing.DocThumb.sourceType": "Source Type:",
   "Apis.Listing.Listing.ApiTagCloud.title": "Tags / API Categories",
-  "Apis.Listing.Listing.apis.main": "APIs",
   "Apis.Listing.NoApi.nodata.content": "There are no APIs to display right now.",
   "Apis.Listing.NoApi.nodata.title": "No APIs Available",
   "Apis.Listing.Recommendations.error.loading": "Error While Loading APIs",
@@ -439,32 +431,43 @@
   "Applications.Details.SubscriptionTableData.update.throttling.policy.rejected": "Subscription is currently REJECTED state. You need to get approval to the subscription before editing the tier",
   "Applications.Details.SubscriptionTableData.update.throttling.policy.tier.update": "Pending Tier Update :",
   "Applications.Details.SubscriptionTableData.update.throttling.policy.tierUpdatePending": "Subscription is currently TIER_UPDATE_PENDING state. You need to get approval to the existing subscription edit request before editing the tier",
-  "Applications.Details.Subscriptions\n                                                                            .business.plan": "Business Plan",
-  "Applications.Details.Subscriptions\n                                                                            .subscription.state": "Lifecycle State",
   "Applications.Details.Subscriptions.Status": "Subscription Status",
   "Applications.Details.Subscriptions.action": "Action",
   "Applications.Details.Subscriptions.api.name": "API",
   "Applications.Details.Subscriptions.api.webhooks": "Webhooks",
   "Applications.Details.Subscriptions.api.webhooks.delivery.time.unavailable": "Delivery data unavailable",
   "Applications.Details.Subscriptions.api.webhooks.subscriptions.unavailable": "No Webhook subscriptions available at this time.",
+  "Applications.Details.Subscriptions.apis.add.subscription.button": "Subscribe",
+  "Applications.Details.Subscriptions.business.plan": "Business Plan",
   "Applications.Details.Subscriptions.business.plan.updated": "Business Plan updated successfully!",
   "Applications.Details.Subscriptions.delete.success": "Subscription deleted successfully!",
   "Applications.Details.Subscriptions.error.occurred.during.subscription": "Error occurred during subscription",
   "Applications.Details.Subscriptions.error.occurred.during.subscription.not.201": "Error occurred during subscription",
   "Applications.Details.Subscriptions.error.occurred.webhook.subscription": "Error while retrieving webhook subscriptions",
   "Applications.Details.Subscriptions.error.when.updating": "Error occurred when updating subscription",
   "Applications.Details.Subscriptions.error.while.deleting": "Error occurred when deleting subscription",
+  "Applications.Details.Subscriptions.filter.mcp.msg": "Filtered MCP Servers for",
   "Applications.Details.Subscriptions.filter.msg": "Filtered APIs for",
   "Applications.Details.Subscriptions.filter.msg.all.apis": "Displaying all APIs",
-  "Applications.Details.Subscriptions.no.subscriptions": "No Subscriptions Available",
-  "Applications.Details.Subscriptions.no.subscriptions.content": "No subscriptions are available for this Application",
+  "Applications.Details.Subscriptions.filter.msg.all.mcp": "Displaying all MCP Servers",
+  "Applications.Details.Subscriptions.mcp.server.name": "MCP Server",
+  "Applications.Details.Subscriptions.mcp.servers.add.subscription.button": "Subscribe",
+  "Applications.Details.Subscriptions.no.api.subscriptions": "No API Subscriptions Available",
+  "Applications.Details.Subscriptions.no.api.subscriptions.content": "No API subscriptions are available for this Application",
+  "Applications.Details.Subscriptions.no.mcp.subscriptions": "No MCP Server Subscriptions Available",
+  "Applications.Details.Subscriptions.no.mcp.subscriptions.content": "No MCP server subscriptions are available for this Application",
   "Applications.Details.Subscriptions.request.created": "Subscription Deletion Request Created!",
   "Applications.Details.Subscriptions.search": "Search APIs",
+  "Applications.Details.Subscriptions.search.mcp": "Search MCP Servers",
   "Applications.Details.Subscriptions.select.a.subscription.policy": "Select a subscription policy",
   "Applications.Details.Subscriptions.something.went.wrong": "Something went wrong while deleting the Subscription!",
-  "Applications.Details.Subscriptions.subscription.management": "Subscription Management",
-  "Applications.Details.Subscriptions.subscription.management.add": "Subscribe APIs",
+  "Applications.Details.Subscriptions.subscribed.apis": "Subscribed APIs",
+  "Applications.Details.Subscriptions.subscribed.mcp.servers": "Subscribed MCP Servers",
+  "Applications.Details.Subscriptions.subscription.state": "Lifecycle State",
+  "Applications.Details.Subscriptions.subscription.subscribe.apis": "Subscribe to API(s)",
+  "Applications.Details.Subscriptions.subscription.subscribe.mcp.servers": "Subscribe to MCP Server(s)",
   "Applications.Details.Subscriptions.subscription.successful": "Subscription successful",
+  "Applications.Details.Subscriptions.subscriptions": "Subscriptions",
   "Applications.Details.Subscriptions.wrong.with.subscription": "Something went wrong while updating the Subscription!",
   "Applications.Details.api.keys.title": "API Key",
   "Applications.Details.applications.all": "ALL APPs",
@@ -540,6 +543,7 @@
   "Base.Header.GlobalNavbar.menu.apis": "APIs",
   "Base.Header.GlobalNavbar.menu.applications": "Applications",
   "Base.Header.GlobalNavbar.menu.home": "Home",
+  "Base.Header.GlobalNavbar.menu.mcpServers": "MCP Servers",
   "Base.Header.headersearch.HeaderSearch.search_api.tooltip": "Search APIs",
   "Base.Header.headersearch.HeaderSearch.tooltip.option0": "Content [ Default ]",
   "Base.Header.headersearch.HeaderSearch.tooltip.option1": "Name [ Syntax - name:xxxx ]",
@@ -586,12 +590,15 @@
   "GraphQL.Devportal.Tryout.Addtional.headers.help": "This configuration is used to add additional Headers.",
   "GraphQL.Devportal.Tryout.Addtional.headers.hide.group": "Hide group",
   "GraphQL.Devportal.Tryout.Addtional.headers.title.text": "Add additional headers",
+  "HAlOn1": "Name",
+  "I3b4hn": "Version",
   "LandingPage.ApisWithTag.invalid.tenant.domain": "Invalid tenant domain",
   "Login.RedirectToLogin.you.will.be.redirected.to": "You will be redirected to {page}",
   "LoginDenied.anonymousview": "Go To Public Portal",
   "LoginDenied.logout": "Logout",
   "LoginDenied.message": "You don't have sufficient privileges to access the Developer Portal.",
   "LoginDenied.title": "Error 403 : Forbidden",
+  "Pgb3Xj": "Subscribed",
   "Settings.ChangePasswordForm.Cancel.Button.text": "Cancel",
   "Settings.ChangePasswordForm.Save.Button.text": "Save",
   "Settings.ChangePasswordForm.confirm.new.password": "Confirm new Password",
@@ -753,6 +760,8 @@
   "Shared.ConfirmDialog.please.confirm.sure": "Are you sure?",
   "TenantListing.title": "Tenant Developer Portals",
   "Throttling.Advanced.Delete.will.be.deleted": "will be deleted.",
+  "VCZBMt": "Rows per page",
+  "YgOCYk": "Not Allowed",
   "access.token": "Access Token",
   "api.console.gateway.heading": "Gateway",
   "api.console.gql.additional.headers": "Additional Headers",
@@ -773,8 +782,11 @@
   "application.productionKeys.oAuth.tokenGeneration.step2.description": "Obtain test token",
   "application.update.pending": "A request to update the application has been sent.",
   "enter.access.token": "Enter access Token",
+  "j2RZ00": "Is Subscription Available",
+  "kGGU2D": "Id",
   "notice": "Notice",
   "password": "Password",
+  "qZLN4k": "Subscription Status",
   "solace.application.available.topics.heading": "Available Topics",
   "solace.application.available.topics.subheading": "Topics permitted to access from solace applications",
   "solace.application.topics.publish": "Publish Topics",

portals/devportal/src/main/webapp/site/public/locales/en.json

@@ -24,6 +24,7 @@ import Progress from 'AppComponents/Shared/Progress';
 import { useTheme } from '@mui/material';
 
 const Apis = lazy(() => import('AppComponents/Apis/Apis' /* webpackChunkName: "Apis" */));
+const MCPServers = lazy(() => import('AppComponents/MCPServers/MCPServers' /* webpackChunkName: "MCPServers" */));
 const Landing = lazy(() => import('AppComponents/LandingPage/Landing' /* webpackChunkName: "Landing" */));
 const TagCloudListing = lazy(() => import('AppComponents/Apis/Listing/TagCloudListing' /* webpackChunkName: "TagCloudListing" */));
 const ChangePassword = lazy(() => import('AppComponents/Settings/ChangePassword/ChangePassword'));
@@ -64,6 +65,7 @@ function AppRouts(props) {
                 <Route path='/home' component={Landing} />
                 <Route path='/api-groups' component={TagCloudListing} />
                 <Route path='/(apis|api-products)' component={Apis} />
+                <Route path='/mcp-servers' component={MCPServers} />
                 <Route
                     path='/settings/change-password/'
                     render={(localProps) => {

portals/devportal/src/main/webapp/source/src/app/AppRouts.jsx

@@ -36,10 +36,10 @@ import { CircularProgress, Typography } from '@mui/material';
 import Utils from 'AppData/Utils';
 import AuthManager from 'AppData/AuthManager';
 import { fetchToCurl } from 'fetch-to-curl';
+import SecurityDetailsPanel from 'AppComponents/Shared/ApiTryOut/SecurityDetailsPanel';
 import ApiChatPoweredBy from './components/ApiChatPoweredBy';
 import ApiChatBanner from './components/ApiChatBanner';
 import ApiChatExecute from './components/ApiChatExecute';
-import ConfigureKeyDrawer from './components/ConfigureKeyDrawer';
 import SampleQueryCard from './components/SampleQueryCard';
 import ApiChatResponse from './components/ApiChatResponse';
 
@@ -737,7 +737,7 @@ const ApiChat = () => {
             <Box className={classes.tryWithAiMain}>
                 <Box sx={{ flexGrow: 1 }}>
                     {apiChatEnabled && aiAuthTokenProvided && (
-                        <ConfigureKeyDrawer
+                        <SecurityDetailsPanel
                             isDrawerOpen={configureKeyDrawerOpen}
                             updateDrawerOpen={setConfigureKeyDrawerOpen}
                             onConfigChange={handleConfigChange}

portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiChat/ApiChat.jsx

@@ -33,6 +33,7 @@ import openapiToPostman from 'openapi-to-postmanv2';
 import FileCopyIcon from '@mui/icons-material/FileCopy';
 import Tooltip from '@mui/material/Tooltip';
 import CloudDownloadRounded from '@mui/icons-material/CloudDownloadRounded';
+import MCPTryOut from 'AppComponents/Apis/Details/MCPTryOut/MCPTryOut';
 import queryString from 'query-string';
 import Settings from 'Settings';
 import Utils from 'AppData/Utils';
@@ -512,6 +513,7 @@ class ApiConsole extends React.Component {
         const downloadSwagger = JSON.stringify({ ...swagger });
         const downloadLink = 'data:text/json;charset=utf-8, ' + encodeURIComponent(downloadSwagger);
         const fileName = 'swagger.json';
+        const isMCPServersRoute = window.location.pathname.includes('/mcp-servers');
 
         if (api == null || swagger == null) {
             return <Progress />;
@@ -615,7 +617,7 @@ class ApiConsole extends React.Component {
                         />
                     </Grid>
 
-                    {api.type !== 'SOAP' && (
+                    {api.type !== 'SOAP' && !isMCPServersRoute && (
                         <Grid container>
                             <Grid xs={7} item />
                             <Grid xs={2} item>
@@ -671,15 +673,27 @@ class ApiConsole extends React.Component {
                         </Grid>
                     )}
                 </Paper>
-                <Paper className={classes.swaggerUIPaper}>
-                    <SwaggerUI
-                        api={this.state.api}
-                        accessTokenProvider={this.accessTokenProvider}
-                        spec={swaggerSpec}
-                        authorizationHeader={authorizationHeader}
-                        securitySchemeType={securitySchemeType}
-                    />
-                </Paper>
+                {!isMCPServersRoute && (
+                    <Paper className={classes.swaggerUIPaper}>
+                        <SwaggerUI
+                            api={this.state.api}
+                            accessTokenProvider={this.accessTokenProvider}
+                            spec={swaggerSpec}
+                            authorizationHeader={authorizationHeader}
+                            securitySchemeType={securitySchemeType}
+                        />
+                    </Paper>
+                )}
+                {isMCPServersRoute && (
+                    <Grid container className={classes.grid}>
+                        <MCPTryOut
+                            api={this.state.api}
+                            authorizationHeader={authorizationHeader}
+                            securitySchemeType={securitySchemeType}
+                            accessToken={productionAccessToken || sandboxAccessToken}
+                        />
+                    </Grid>
+                )}
             </Root>
         );
     }