snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/aiCenter/AICenterCapabilityCard.tsx

@@ -0,0 +1,37 @@
+import { Box, Button, Card, CardBody, CardControls, CardHeader, CardTitle, FramedIcon } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { useId } from 'react';
+
+export type AICenterCapabilityCardProps = {
+	icon: ComponentProps<typeof FramedIcon>['icon'];
+	title: string;
+	description: string;
+	status?: ReactNode;
+	actionLabel: string;
+	href: string;
+};
+
+const AICenterCapabilityCard = ({ icon, title, description, status, actionLabel, href }: AICenterCapabilityCardProps): ReactElement => {
+	const titleId = useId();
+	const descriptionId = useId();
+
+	return (
+		<Card height='full' role='region' aria-labelledby={titleId} aria-describedby={descriptionId}>
+			<CardHeader>
+				<FramedIcon icon={icon} />
+				{status && <Box marginInlineStart='auto'>{status}</Box>}
+			</CardHeader>
+			<CardTitle id={titleId}>{title}</CardTitle>
+			<CardBody id={descriptionId} flexDirection='column'>
+				{description}
+			</CardBody>
+			<CardControls>
+				<Button is='a' href={href} medium>
+					{actionLabel}
+				</Button>
+			</CardControls>
+		</Card>
+	);
+};
+
+export default AICenterCapabilityCard;

apps/meteor/client/views/admin/aiCenter/AICenterOverview.tsx

@@ -0,0 +1,88 @@
+import { AI_LICENSE_MODULE } from '@rocket.chat/ai-search';
+import { Box, Button, Callout, CardGrid, Tag } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
+import { useRouter, useSetting } from '@rocket.chat/ui-contexts';
+import type { ReactElement, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AICenterCapabilityCard from './AICenterCapabilityCard';
+import PageSkeleton from '../../../components/PageSkeleton';
+import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
+
+const AICenterOverview = (): ReactElement => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const { data: hasAILicense, isPending } = useHasLicenseModule(AI_LICENSE_MODULE);
+	const intelligentSearchEnabled = useSetting('AI_Intelligent_Search_Enabled', false);
+	const mcpEnabled = useSetting('MCP_Enabled', false);
+	const searchSettingsHref = router.buildRoutePath({ name: 'admin-ai-center', params: { section: 'search' } });
+	const llmSettingsHref = router.buildRoutePath({ name: 'admin-ai-center', params: { section: 'llm-providers' } });
+	const mcpSettingsHref = router.buildRoutePath({ name: 'admin-ai-center', params: { section: 'mcp' } });
+	const subscriptionHref = router.buildRoutePath({ name: 'subscription' });
+
+	if (isPending) {
+		return <PageSkeleton />;
+	}
+
+	let aiSearchStatus: ReactNode;
+	let llmProviderStatus: ReactNode;
+	let mcpStatus: ReactNode;
+	if (hasAILicense === false) {
+		aiSearchStatus = <Tag variant='danger'>{t('Locked')}</Tag>;
+		llmProviderStatus = <Tag variant='danger'>{t('Locked')}</Tag>;
+		mcpStatus = <Tag variant='danger'>{t('Locked')}</Tag>;
+	} else if (hasAILicense) {
+		aiSearchStatus = intelligentSearchEnabled ? <Tag variant='primary'>{t('Enabled')}</Tag> : <Tag>{t('Disabled')}</Tag>;
+		llmProviderStatus = <Tag>{t('Available')}</Tag>;
+		mcpStatus = mcpEnabled ? <Tag variant='primary'>{t('Enabled')}</Tag> : <Tag>{t('Disabled')}</Tag>;
+	}
+
+	return (
+		<Page background='tint'>
+			<PageHeader title={t('AI_Center')} />
+			<PageScrollableContentWithShadow padding={24}>
+				<Box marginInline='auto' width='full'>
+					{hasAILicense === false && (
+						<Callout type='info' icon='stars' title={t('AI_Center_license_required_title')} marginBlockEnd={24}>
+							<Box>{t('AI_Center_license_required_description')}</Box>
+							<Button is='a' href={subscriptionHref} small marginBlockStart={12}>
+								{t('View_options')}
+							</Button>
+						</Callout>
+					)}
+					<Box is='h2' fontScale='h3' marginBlockEnd={16}>
+						{t('Capabilities')}
+					</Box>
+					<CardGrid breakpoints={{ xs: 4, sm: 4, md: 6, lg: 6, xl: 6 }}>
+						<AICenterCapabilityCard
+							icon='stars'
+							title={t('Intelligent_Search')}
+							description={t('AI_Center_Intelligent_Search_card_description')}
+							status={aiSearchStatus}
+							actionLabel={t('Configure')}
+							href={searchSettingsHref}
+						/>
+						<AICenterCapabilityCard
+							icon='smart'
+							title={t('AI_Center_LLM_Providers')}
+							description={t('AI_Center_LLM_Providers_card_description')}
+							status={llmProviderStatus}
+							actionLabel={t('Manage')}
+							href={llmSettingsHref}
+						/>
+						<AICenterCapabilityCard
+							icon='link'
+							title={t('MCP')}
+							description={t('AI_Center_MCP_card_description')}
+							status={mcpStatus}
+							actionLabel={t('Configure')}
+							href={mcpSettingsHref}
+						/>
+					</CardGrid>
+				</Box>
+			</PageScrollableContentWithShadow>
+		</Page>
+	);
+};
+
+export default AICenterOverview;

apps/meteor/client/views/admin/aiCenter/AICenterRoute.tsx

@@ -0,0 +1,31 @@
+import { useIsPrivilegedSettingsContext, useRouteParameter } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+
+import AICenterOverview from './AICenterOverview';
+import AISettingsSection from './AISettingsSection';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const AICenterRoute = (): ReactElement => {
+	const hasPermission = useIsPrivilegedSettingsContext();
+	const section = useRouteParameter('section');
+
+	if (!hasPermission) {
+		return <NotAuthorizedPage />;
+	}
+
+	if (section === 'search') {
+		return <AISettingsSection section='Intelligent_Search' />;
+	}
+
+	if (section === 'llm-providers') {
+		return <AISettingsSection section='AI_LLM_Provider' />;
+	}
+
+	if (section === 'mcp') {
+		return <AISettingsSection section='MCP' />;
+	}
+
+	return <AICenterOverview />;
+};
+
+export default AICenterRoute;

apps/meteor/client/views/admin/aiCenter/AISettingsSection.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+
+import EditableSettingsProvider from '../settings/EditableSettingsProvider';
+import GenericGroupPage from '../settings/groups/GenericGroupPage';
+
+export type AISettingsSectionName = 'Intelligent_Search' | 'AI_LLM_Provider' | 'MCP';
+
+export type AISettingsSectionProps = {
+	section: AISettingsSectionName;
+};
+
+const sectionTitles: Record<AISettingsSectionName, string> = {
+	Intelligent_Search: 'Intelligent_Search',
+	AI_LLM_Provider: 'AI_Center_LLM_Providers',
+	MCP: 'MCP',
+};
+
+const AISettingsSection = ({ section }: AISettingsSectionProps): ReactElement => {
+	const router = useRouter();
+	const title = sectionTitles[section];
+
+	return (
+		<EditableSettingsProvider>
+			<GenericGroupPage _id='AI_Center' i18nLabel={title} sections={[section]} onClickBack={() => router.navigate('/admin/ai-center')} />
+		</EditableSettingsProvider>
+	);
+};
+
+export default AISettingsSection;