@12-apps/mcp 3.5.1 → 3.7.0

package/src/react/ai-flow-steps.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { McpAiCopy } from "./copy";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import { useEffect, useState } from "react";
@@ -32,21 +33,21 @@ const POLL_INTERVAL_MS = 3000;
 function StepNav({
   nav,
   onNext,
-  nextLabel = "Próximo",
+  nextLabel,
   nextDisabled = false,
   nextTestId,
+  copy,
 }: {
   nav: GuidedNav;
   onNext: () => void;
   nextLabel?: string;
   nextDisabled?: boolean;
   nextTestId?: string;
+  copy: McpAiCopy;
 }): React.JSX.Element {
   return (
     <Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between">
-      <Button variant="ghost" onClick={() => nav.back()} data-testid="ai-step-back">
-        Voltar
-      </Button>
+      <Button variant="ghost" onClick={() => nav.back()} data-testid="ai-step-back">{copy.flow.back}</Button>
       <Button onClick={onNext} disabled={nextDisabled} data-testid={nextTestId}>
         {nextLabel}
       </Button>
@@ -55,39 +56,53 @@ function StepNav({
 }
 
 /** Step 2 — copy the store URL; copying is the action that advances the wizard. */
-export function CopyUrlStep({ nav, endpointUrl }: { nav: GuidedNav; endpointUrl: string }): React.JSX.Element {
+export function CopyUrlStep({
+  nav,
+  endpointUrl,
+  copy,
+}: {
+  nav: GuidedNav;
+  endpointUrl: string;
+  copy: McpAiCopy;
+}): React.JSX.Element {
   return (
     <Stack spacing={3} data-testid="ai-copy-step">
       <Box>
         <Text variant="heading" size="sm" as="h2">
-          Copie a URL da sua loja
+          {copy.flow.copyUrlTitle}
         </Text>
         <Text variant="caption" as="p" color="secondary">
-          É o único dado que você cola no assistente — ao copiar, seguimos para o próximo passo.
+          {copy.flow.urlCaption}
         </Text>
       </Box>
-      <EndpointCopyBlock endpointUrl={endpointUrl} copied={false} onCopy={() => nav.next()} />
+      <EndpointCopyBlock copy={copy.connectGuide} flowCopy={copy.flow} endpointUrl={endpointUrl} copied={false} onCopy={() => nav.next()} />
       <Box>
-        <Button variant="ghost" onClick={() => nav.back()} data-testid="ai-step-back">
-          Voltar
-        </Button>
+        <Button variant="ghost" onClick={() => nav.back()} data-testid="ai-step-back">{copy.flow.back}</Button>
       </Box>
     </Stack>
   );
 }
 
 /** Step 3 — open the host's connectors and add + configure the custom connector. */
-export function ConfigureStep({ nav, host }: { nav: GuidedNav; host: AiHostGuide }): React.JSX.Element {
+export function ConfigureStep({
+  nav,
+  host,
+  copy,
+}: {
+  nav: GuidedNav;
+  host: AiHostGuide;
+  copy: McpAiCopy;
+}): React.JSX.Element {
   // Hosts with no direct link (e.g. Claude Desktop) have nothing to open, so
   // "Próximo" is available immediately; otherwise it unlocks on the open click.
   const [opened, setOpened] = useState(!host.link);
   return (
     <Stack spacing={2.5} data-testid="ai-configure-step">
-      <HostConnectHeader host={host} />
+      <HostConnectHeader copy={copy.connectGuide} host={host} />
       <HostOpenButton host={host} onOpen={() => setOpened(true)} />
       <HostStepList steps={host.steps.slice(0, CONFIGURE_STEP_COUNT)} start={1} />
-      <HostDocsLink host={host} />
-      <StepNav nav={nav} onNext={() => nav.next()} nextDisabled={!opened} nextTestId="ai-configure-next" />
+      <HostDocsLink copy={copy.connectGuide} host={host} />
+      <StepNav copy={copy} nav={nav} onNext={() => nav.next()} nextDisabled={!opened} nextTestId="ai-configure-next" />
     </Stack>
   );
 }
@@ -101,15 +116,17 @@ export function ConfigureStageStep({
   nav,
   host,
   stage,
+  copy,
 }: {
   nav: GuidedNav;
   host: AiHostGuide;
   stage: AiHostConfigureStage;
+  copy: McpAiCopy;
 }): React.JSX.Element {
   const [opened, setOpened] = useState(!stage.link);
   return (
     <Stack spacing={2.5} data-testid={`ai-stage-${stage.id}`}>
-      <HostConnectHeader host={host} />
+      <HostConnectHeader copy={copy.connectGuide} host={host} />
       {stage.link && (
         <Box>
           <Button
@@ -125,8 +142,8 @@ export function ConfigureStageStep({
         </Box>
       )}
       <HostStepList steps={stage.steps} start={1} />
-      <HostDocsLink host={host} />
-      <StepNav
+      <HostDocsLink copy={copy.connectGuide} host={host} />
+      <StepNav copy={copy}
         nav={nav}
         onNext={() => nav.next()}
         nextDisabled={!opened}
@@ -141,22 +158,24 @@ export function ConnectStep({
   nav,
   host,
   connectPrompt,
+  copy,
 }: {
   nav: GuidedNav;
   host: AiHostGuide;
   connectPrompt: string;
+  copy: McpAiCopy;
 }): React.JSX.Element {
   return (
     <Stack spacing={2.5} data-testid="ai-connect-step">
-      <HostConnectHeader host={host} />
+      <HostConnectHeader copy={copy.connectGuide} host={host} />
       <HostStepList steps={host.steps.slice(CONFIGURE_STEP_COUNT)} start={CONFIGURE_STEP_COUNT + 1} />
-      <PromptCopyBlock
-        title="Cole esta mensagem no assistente"
-        caption="Assim ele se conecta, se identifica (Claude, ChatGPT…) e registramos a conexão."
+      <PromptCopyBlock flowCopy={copy.flow}
+        title={copy.flow.pasteTitle}
+        caption={copy.flow.promptCaption}
         message={connectPrompt}
       />
-      <HostDocsLink host={host} />
-      <StepNav nav={nav} onNext={() => nav.next()} nextLabel="Continuar" nextTestId="ai-connect-done" />
+      <HostDocsLink copy={copy.connectGuide} host={host} />
+      <StepNav copy={copy} nav={nav} onNext={() => nav.next()} nextLabel={copy.flow.advance} nextTestId="ai-connect-done" />
     </Stack>
   );
 }
@@ -170,18 +189,19 @@ export function InstallStep({
   nav,
   host,
   connectPrompt,
+  copy,
 }: {
   nav: GuidedNav;
   host: AiHostGuide;
   connectPrompt: string;
+  copy: McpAiCopy;
 }): React.JSX.Element {
   const [opened, setOpened] = useState(false);
   return (
     <Stack spacing={2.5} data-testid="ai-install-step">
-      <HostConnectHeader host={host} />
+      <HostConnectHeader copy={copy.connectGuide} host={host} />
       <Text variant="body" as="p" color="secondary">
-        Abra o plugin da sua loja, clique em Instalar e autorize o acesso — sem copiar URL nem gerar
-        credenciais.
+        {copy.flow.installBody}
       </Text>
       {host.pluginUrl && (
         <Box>
@@ -192,21 +212,21 @@ export function InstallStep({
             }}
             data-testid="ai-install-open"
           >
-            Instalar o plugin da loja
+            {copy.flow.installAction}
             <OpenInNewIcon sx={{ fontSize: 16, ml: 0.5 }} />
           </Button>
         </Box>
       )}
-      <PromptCopyBlock
-        title="Peça ao assistente para conectar"
-        caption="Cole no assistente para ele se conectar, se identificar e confirmar o acesso."
+      <PromptCopyBlock flowCopy={copy.flow}
+        title={copy.flow.askTitle}
+        caption={copy.flow.pasteInstallCaption}
         message={connectPrompt}
       />
-      <HostDocsLink host={host} />
-      <StepNav
+      <HostDocsLink copy={copy.connectGuide} host={host} />
+      <StepNav copy={copy}
         nav={nav}
         onNext={() => nav.next()}
-        nextLabel="Continuar"
+        nextLabel={copy.flow.advance}
         nextDisabled={!opened}
         nextTestId="ai-install-done"
       />
@@ -225,11 +245,13 @@ export function ConfirmStep({
   connections,
   hosts,
   onRetest,
+  copy,
 }: {
   nav: GuidedNav;
   connections: readonly AiConnection[];
   hosts: readonly AiHostGuide[];
   onRetest: () => void;
+  copy: McpAiCopy;
 }): React.JSX.Element {
   const selectedHostId = nav.data.selectedHost as string | undefined;
   const connection = connectionForHost(connections, selectedHostId);
@@ -250,15 +272,15 @@ export function ConfirmStep({
           <CheckCircleIcon sx={{ color: "success.main" }} />
           <Box>
             <Text variant="body" weight="bold" as="p">
-              {label} está conectado à sua loja.
+              {copy.flow.connectedTo(label)}
             </Text>
             <Text variant="caption" as="p" color="secondary">
-              {activeAgo(connection.lastActiveAt)}
+              {activeAgo(connection.lastActiveAt, copy.summary)}
             </Text>
           </Box>
         </Stack>
         <Box>
-          <Button onClick={() => nav.complete({ connectedHost: selectedHostId })}>Concluir</Button>
+          <Button onClick={() => nav.complete({ connectedHost: selectedHostId })}>{copy.flow.finish}</Button>
         </Box>
       </Stack>
     );
@@ -270,20 +292,18 @@ export function ConfirmStep({
         <Progress variant="circular" circularSize={22} thickness={4} dataTestId="ai-confirm-spinner" />
         <Box>
           <Text variant="body" weight="bold" as="p">
-            Esperando conexão
+            {copy.flow.waitingTitle}
           </Text>
           <Text variant="caption" as="p" color="secondary">
-            Assim que você autorizar o acesso no {label}, ela aparece aqui automaticamente.
+            {copy.flow.waitingBody(label)}
           </Text>
         </Box>
       </Stack>
       <Stack direction="row" spacing={1}>
         <Button variant="ghost" size="sm" onClick={onRetest} data-testid="ai-confirm-retest">
-          Testar agora
-        </Button>
-        <Button variant="ghost" size="sm" onClick={() => nav.back()}>
-          Voltar
+          {copy.flow.testNow}
         </Button>
+        <Button variant="ghost" size="sm" onClick={() => nav.back()}>{copy.flow.back}</Button>
       </Stack>
     </Stack>
   );

package/src/react/ai-landing.tsx

@@ -10,19 +10,42 @@ import { Box } from "@12-apps/ui/mui/Box";
 import { Stack } from "@12-apps/ui/mui/Stack";
 import { Text } from "@12-apps/ui/typography/Text";
 
-import { AI_CAPABILITIES, AI_PERMISSION_MODEL, type AiCapability } from "../guide";
+import type { AiCapability } from "../guide";
+import type { AiCapabilitiesCopy, AiLandingCopy } from "./copy";
 import { AiCapabilities } from "./ai-capabilities";
 import { FeatureBadge, type FeatureBadgeItem } from "./feature-badge";
 
-const FEATURES: FeatureBadgeItem[] = [
-  { icon: <LockOpenOutlinedIcon />, label: "Usa o seu próprio login", caption: "Sem chaves ou credenciais extras" },
-  { icon: <BoltOutlinedIcon />, label: "Sem instalar nada", caption: "Conecta em poucos minutos" },
-  { icon: <VerifiedUserOutlinedIcon />, label: "Só o que você pode", caption: "As suas permissões, nada além" },
-  { icon: <LanguageOutlinedIcon />, label: "Navegador ou app", caption: "Claude, ChatGPT, Codex" },
-];
+/**
+ * The ICONS for the landing's reassurance strip, keyed by the copy's own ids.
+ *
+ * The package keeps the icons and the host keeps the words: an icon is not
+ * copy, and a pack that had to ship React elements could not be a plain data
+ * file. An id the map does not know renders without an icon rather than
+ * throwing — a host adding a fifth point should get its words on screen.
+ */
+const TRUST_ICONS: Readonly<Record<string, React.JSX.Element>> = {
+  login: <LockOpenOutlinedIcon />,
+  install: <BoltOutlinedIcon />,
+  permissions: <VerifiedUserOutlinedIcon />,
+  surface: <LanguageOutlinedIcon />,
+};
+
+function trustBadges(trust: AiLandingCopy["trust"]): FeatureBadgeItem[] {
+  return trust.map((point) => ({
+    icon: TRUST_ICONS[point.id],
+    label: point.label,
+    caption: point.caption,
+  }));
+}
 
 /** The single-column marketing hero: eyebrow + headline + description + CTA. */
-function Hero({ onStart }: { onStart: () => void }): React.JSX.Element {
+function Hero({
+  onStart,
+  copy,
+}: {
+  onStart: () => void;
+  copy: AiLandingCopy;
+}): React.JSX.Element {
   return (
     <Stack spacing={2.5} sx={{ maxWidth: 680 }}>
       <Box
@@ -34,19 +57,17 @@ function Hero({ onStart }: { onStart: () => void }): React.JSX.Element {
           textTransform: "uppercase",
         }}
       >
-        Integração com IA
+        {copy.eyebrow}
       </Box>
       <Text variant="heading" size="xl" weight="bold" as="h1">
         Conecte{" "}
         <Box component="span" sx={{ color: "primary.main" }}>
           assistentes de IA
         </Box>{" "}
-        à sua loja
+        {copy.titleTail}
       </Text>
       <Text variant="body" color="secondary" as="p">
-        Deixe o Claude, o ChatGPT e outros assistentes responderem sobre o seu cardápio, estoque e
-        pedidos — e executarem ações por você, direto na conversa. Com segurança e sem instalar
-        nada.
+        {copy.lede}
       </Text>
       <Box sx={{ pt: 1 }}>
         <Button onClick={onStart} data-testid="ai-landing-start">
@@ -61,20 +82,25 @@ function Hero({ onStart }: { onStart: () => void }): React.JSX.Element {
  * Homepage-style marketing landing for the AI integration (shown before the
  * owner starts): a hero, the permission reassurance, a trust/feature strip, and
  * the capability highlights. `onStart` begins the guided flow. `permissionModel`
- * and `capabilities` default to the shared copy; apps can override.
+ * and `capabilities` are REQUIRED host copy — the package ships no default
+ * sentence (FUT-760).
  */
 export function AiLanding({
   onStart,
-  permissionModel = AI_PERMISSION_MODEL,
-  capabilities = AI_CAPABILITIES,
+  permissionModel,
+  capabilities,
+  copy,
+  capabilitiesCopy,
 }: {
   onStart: () => void;
-  permissionModel?: string;
-  capabilities?: readonly AiCapability[];
+  permissionModel: string;
+  capabilities: readonly AiCapability[];
+  copy: AiLandingCopy;
+  capabilitiesCopy: AiCapabilitiesCopy;
 }): React.JSX.Element {
   return (
     <Stack spacing={6} data-testid="ai-landing">
-      <Hero onStart={onStart} />
+      <Hero onStart={onStart} copy={copy} />
 
       <Stack
         direction="row"
@@ -111,14 +137,14 @@ export function AiLanding({
             gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr", md: "repeat(4, 1fr)" },
           }}
         >
-          {FEATURES.map((f) => (
+          {trustBadges(copy.trust).map((f) => (
             <FeatureBadge key={f.label} icon={f.icon} label={f.label} caption={f.caption} />
           ))}
         </Box>
       </Box>
 
       <Box>
-        <AiCapabilities capabilities={capabilities} />
+        <AiCapabilities capabilities={capabilities} copy={capabilitiesCopy} />
       </Box>
     </Stack>
   );

package/src/react/ai-onboarding.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { McpAiCopy } from "./copy";
 import {
   GuidedSection,
   OnboardingProvider,
@@ -9,9 +10,6 @@ import {
 } from "@12-apps/onboarding";
 
 import {
-  AI_CAPABILITIES,
-  aiHostGuides,
-  AI_PERMISSION_MODEL,
   type AiCapability,
   type AiHostGuide,
 } from "../guide";
@@ -44,20 +42,20 @@ export interface AiIntegrationOnboardingProps {
   /** Show the dev-only "reset onboarding" button. @default false */
   devReset?: boolean;
   /**
-   * The platform operating this MCP server, as its OAuth consent button names
-   * it. REQUIRED, and it is the reason `hosts` can have a default at all: one
-   * ChatGPT step tells the owner which "Sign in with …" button to click, and
-   * that button carries whoever runs the server. It used to be a hard-coded
-   * name — of a single STORE on one deployment, not even the product — so every
-   * other adopter pointed its owners at a button that does not exist.
+   * Assistants offered in the flow, with their step-by-step instructions.
+   *
+   * REQUIRED since FUT-760. These used to default to this package's own pt-BR
+   * walkthrough, so a host that said nothing shipped one product's Portuguese
+   * and had no field to decline it. `PT_BR_AI_HOST_GUIDES(platformName)` is that
+   * exact content, now chosen by name.
    */
-  platformName: string;
-  /** Assistants offered in the flow. @default aiHostGuides(platformName) */
-  hosts?: readonly AiHostGuide[];
-  /** Capability cards on the landing. @default the shared AI_CAPABILITIES */
-  capabilities?: readonly AiCapability[];
-  /** Permission reassurance copy on the landing. @default AI_PERMISSION_MODEL */
-  permissionModel?: string;
+  hosts: readonly AiHostGuide[];
+  /** Capability cards on the landing. REQUIRED — see `hosts`. */
+  capabilities: readonly AiCapability[];
+  /** Permission reassurance copy on the landing. REQUIRED — see `hosts`. */
+  permissionModel: string;
+  /** Every sentence the screens render. REQUIRED — see `hosts`. */
+  copy: McpAiCopy;
   /**
    * Message the owner pastes into the assistant on the Conectar step.
    *
@@ -97,6 +95,7 @@ interface FlowProps {
   onRetest: () => void;
   onDisconnect: DisconnectHandler | undefined;
   devReset: boolean;
+  copy: McpAiCopy;
 }
 
 /**
@@ -116,6 +115,7 @@ function AiOnboardingFlow(props: FlowProps): React.JSX.Element {
     onRetest,
     onDisconnect,
     devReset,
+    copy,
   } = props;
   const { state } = useOnboarding();
   const selectedHost =
@@ -128,6 +128,7 @@ function AiOnboardingFlow(props: FlowProps): React.JSX.Element {
     connectPrompt,
     connections,
     onRetest,
+    copy,
   });
   const connectedHostId = (state.data.connectedHost ??
     state.data.selectedHost) as string | undefined;
@@ -135,24 +136,28 @@ function AiOnboardingFlow(props: FlowProps): React.JSX.Element {
   return (
     <GuidedSection
       steps={steps}
-      title="Conecte assistentes de IA à sua loja"
-      startLabel="Ver como conectar"
+      title={copy.onboarding.title}
+      startLabel={copy.landing.start}
       renderLanding={(start) => (
         <AiLanding
           onStart={start}
           permissionModel={permissionModel}
           capabilities={capabilities}
+          copy={copy.landing}
+          capabilitiesCopy={copy.capabilities}
         />
       )}
-      configuredTitle={connectedTitle(connections, hosts, connectedHostId)}
-      configuredSummary={connectedSummary(connections)}
-      editLabel="Conectar IA"
+      configuredTitle={connectedTitle(connections, hosts, connectedHostId, copy.summary)}
+      configuredSummary={connectedSummary(connections, copy.summary)}
+      editLabel={copy.onboarding.editLabel}
+      collapseLabel={copy.onboarding.collapseLabel}
       completedContent={(nav) => (
         <StatusBoard
           nav={nav}
           connections={connections}
           hosts={hosts}
           onDisconnect={onDisconnect}
+          copy={copy}
         />
       )}
       devReset={devReset}
@@ -179,15 +184,15 @@ export function AiIntegrationOnboarding({
   connections,
   featureKey = DEFAULT_FEATURE_KEY,
   devReset = false,
-  platformName,
-  hosts = aiHostGuides(platformName),
-  capabilities = AI_CAPABILITIES,
-  permissionModel = AI_PERMISSION_MODEL,
+  hosts,
+  capabilities,
+  permissionModel,
   connectPrompt,
   onRetest = () => {
     if (typeof window !== "undefined") window.location.reload();
   },
   onDisconnect,
+  copy,
 }: AiIntegrationOnboardingProps): React.JSX.Element {
   return (
     <OnboardingProvider
@@ -205,6 +210,7 @@ export function AiIntegrationOnboarding({
         onRetest={onRetest}
         onDisconnect={onDisconnect}
         devReset={devReset}
+        copy={copy}
       />
     </OnboardingProvider>
   );