[Agent Builder ]Add tech preview label mcp tool

x-pack/platform/plugins/shared/agent_builder/public/application/components/tools/bulk_import/bulk_import_mcp_tools.tsx

@@ -7,6 +7,7 @@
 
 import React, { useCallback, useState } from 'react';
 import {
+  EuiBetaBadge,
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
@@ -15,6 +16,7 @@ import {
   useGeneratedHtmlId,
 } from '@elastic/eui';
 import type { EuiButtonProps, UseEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import { defer } from 'lodash';
@@ -37,6 +39,19 @@ const headerStyles = ({ euiTheme }: UseEuiTheme) => css`
   border-block-end: none;
 `;
 
+const TECH_PREVIEW_LABEL = i18n.translate(
+  'xpack.agentBuilder.tools.bulkImportMcp.techPreviewBadgeLabel',
+  { defaultMessage: 'Technical preview' }
+);
+
+const TECH_PREVIEW_DESCRIPTION = i18n.translate(
+  'xpack.agentBuilder.tools.bulkImportMcp.techPreviewBadgeDescription',
+  {
+    defaultMessage:
+      'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
+  }
+);
+
 const bottomBarStyles = ({ euiTheme }: UseEuiTheme) => css`
   z-index: ${euiTheme.levels.header};
 `;
@@ -151,7 +166,18 @@ export const BulkImportMcpTools: React.FC = () => {
     <FormProvider {...form}>
       <KibanaPageTemplate data-test-subj="agentBuilderBulkImportMcpToolsPage">
         <KibanaPageTemplate.Header
-          pageTitle={labels.tools.bulkImportMcp.title}
+          pageTitle={
+            <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
+              <EuiFlexItem grow={false}>{labels.tools.bulkImportMcp.title}</EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiBetaBadge
+                  label={TECH_PREVIEW_LABEL}
+                  tooltipContent={TECH_PREVIEW_DESCRIPTION}
+                  size="m"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          }
           description={labels.tools.bulkImportMcp.description}
           rightSideItems={[
             renderImportToolsButton({ size: 'm', testSubj: 'bulkImportMcpToolsImportButton' }),

x-pack/platform/plugins/shared/agent_builder/public/application/components/tools/form/sections/type.tsx

@@ -5,7 +5,9 @@
  * 2.0.
  */
 
-import { EuiFormRow, EuiSelect } from '@elastic/eui';
+import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSuperSelect } from '@elastic/eui';
+import { ToolType } from '@kbn/agent-builder-common';
+import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { useAgentBuilderServices } from '../../../../hooks/use_agent_builder_service';
@@ -16,6 +18,10 @@ import type { ToolFormData } from '../types/tool_form_types';
 import { getToolTypeConfig, getEditableToolTypes } from '../registry/tools_form_registry';
 import { ToolFormMode } from '../tool_form';
 
+const TECH_PREVIEW_LABEL = i18n.translate('xpack.agentBuilder.tools.techPreviewBadgeLabel', {
+  defaultMessage: 'Tech preview',
+});
+
 export interface TypeProps {
   mode: ToolFormMode;
 }
@@ -44,7 +50,21 @@ export const TypeSection = ({ mode }: TypeProps) => {
 
       editableTypes = editableTypes.filter((t) => serverEnabledEditableTypes.includes(t.value));
     }
-    return editableTypes;
+    return editableTypes.map((t) => ({
+      value: t.value,
+      inputDisplay: t.text,
+      'data-test-subj': `agentBuilderToolTypeOption-${t.value}`,
+      dropdownDisplay: (
+        <EuiFlexGroup gutterSize="s" responsive={false}>
+          <EuiFlexItem grow={false}>{t.text}</EuiFlexItem>
+          {t.value === ToolType.mcp && (
+            <EuiFlexItem grow={false}>
+              <EuiBetaBadge iconType="flask" label={TECH_PREVIEW_LABEL} size="s" />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      ),
+    }));
   }, [serverToolTypes, toolTypesLoading]);
 
   return (
@@ -61,13 +81,14 @@ export const TypeSection = ({ mode }: TypeProps) => {
         <Controller
           control={control}
           name="type"
-          render={({ field: { ref, ...field } }) => (
-            <EuiSelect
+          render={({ field: { value, onChange } }) => (
+            <EuiSuperSelect
               data-test-subj="agentBuilderToolTypeSelect"
               options={editableToolTypes}
-              {...field}
-              inputRef={ref}
+              valueOfSelected={value}
+              onChange={onChange}
               disabled={mode === ToolFormMode.Edit}
+              fullWidth
             />
           )}
         />

x-pack/platform/plugins/shared/stack_connectors/public/connector_types/mcp/mcp.tsx

@@ -16,6 +16,7 @@ export const getConnectorType = (): MCPConnector => {
   return {
     id: CONNECTOR_ID,
     actionTypeTitle: CONNECTOR_NAME,
+    isExperimental: true,
     iconClass: lazy(() => import('./logo')),
     selectMessage: i18n.translate('xpack.stackConnectors.components.mcp.selectMessageText', {
       defaultMessage: 'Connect to an MCP (Model Context Protocol) server.',

x-pack/platform/test/functional/page_objects/agent_builder_page.ts

@@ -338,7 +338,9 @@ export class AgentBuilderPageObject extends FtrService {
   }
 
   async selectToolType(type: Exclude<ToolType, ToolType.builtin>) {
-    await this.testSubjects.selectValue('agentBuilderToolTypeSelect', type);
+    // EuiSuperSelect requires clicking the button to open the dropdown, then clicking the option
+    await this.testSubjects.click('agentBuilderToolTypeSelect');
+    await this.testSubjects.click(`agentBuilderToolTypeOption-${type}`);
   }
 
   async setToolDescription(description: string) {