clerk · rafaelrcamargo · Aug 25, 2026 · Aug 25, 2026 · Aug 25, 2026 · Aug 25, 2026
diff --git a/.changeset/add-agent-action-approval.md b/.changeset/add-agent-action-approval.md
@@ -0,0 +1,12 @@
+---
+'@clerk/shared': minor
+'@clerk/clerk-js': minor
+'@clerk/ui': minor
+'@clerk/react': minor
+'@clerk/react-router': minor
+'@clerk/nextjs': minor
+'@clerk/tanstack-react-start': minor
+'@clerk/localizations': patch
+---
+
+Add an experimental `AgentActionApproval` component with an interactive mock approval flow.
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
@@ -35,6 +35,7 @@ const AVAILABLE_COMPONENTS = [
   'apiKeys',
   'configureSSO',
   'oauthConsent',
+  'agentActionApproval',
   'taskChooseOrganization',
   'taskResetPassword',
   'taskSetupMFA',
@@ -154,6 +155,7 @@ const componentControls: Record<AvailableComponent, ComponentPropsControl> = {
   apiKeys: buildComponentControls('apiKeys'),
   configureSSO: buildComponentControls('configureSSO'),
   oauthConsent: buildComponentControls('oauthConsent'),
+  agentActionApproval: buildComponentControls('agentActionApproval'),
   taskChooseOrganization: buildComponentControls('taskChooseOrganization'),
   taskResetPassword: buildComponentControls('taskResetPassword'),
   taskSetupMFA: buildComponentControls('taskSetupMFA'),
@@ -425,6 +427,10 @@ void (async () => {
     '/pricing-table': { mount: 'mountPricingTable', component: 'pricingTable' },
     '/api-keys': { mount: 'mountAPIKeys', component: 'apiKeys' },
     '/configure-sso': { mount: '__internal_mountConfigureSSO', component: 'configureSSO' },
+    '/agent-action-approval': {
+      mount: '__experimental_mountAgentActionApproval',
+      component: 'agentActionApproval',
+    },
     '/task-choose-organization': {
       mount: 'mountTaskChooseOrganization',
       component: 'taskChooseOrganization',

diff --git a/packages/clerk-js/sandbox/scenarios/agent-action-approval.ts b/packages/clerk-js/sandbox/scenarios/agent-action-approval.ts
@@ -0,0 +1,26 @@
+import {
+  clerkHandlers,
+  EnvironmentService,
+  type MockScenario,
+  SessionService,
+  setClerkState,
+  UserService,
+} from '@clerk/msw';
+
+export function AgentActionApproval(): MockScenario {
+  const user = UserService.create();
+  const session = SessionService.create(user);
+
+  setClerkState({
+    environment: EnvironmentService.MULTI_SESSION,
+    session,
+    user,
+  });
+
+  return {
+    description: 'Interactive agent-action approval prototype',
+    handlers: clerkHandlers,
+    initialState: { session, user },
+    name: 'agent-action-approval',
+  };
+}
diff --git a/packages/clerk-js/sandbox/scenarios/index.ts b/packages/clerk-js/sandbox/scenarios/index.ts
@@ -5,3 +5,4 @@ export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';
 export { XProviderEnabled } from './x-provider-enabled';
+export { AgentActionApproval } from './agent-action-approval';
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
@@ -259,6 +259,11 @@
             label="OAuth Consent"
             component="<OAuthConsent />"
           ></nav-link>
+          <nav-link
+            href="/agent-action-approval?scenario=AgentActionApproval"
+            label="Agent Action Approval"
+            component="<AgentActionApproval />"
+          ></nav-link>
           <nav-link
             href="/api-keys"
             label="API Keys"

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -63,6 +63,7 @@ import type {
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
+  AgentActionApprovalProps,
   APIKeysNamespace,
   APIKeysProps,
   AuthenticateWithBaseParams,
@@ -1531,6 +1532,25 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
+  public __experimental_mountAgentActionApproval = (node: HTMLDivElement, props?: AgentActionApprovalProps) => {
+    this.assertComponentsReady(this.#clerkUI);
+    const component = 'AgentActionApproval';
+    void this.#clerkUI
+      .then(ui => ui.ensureMounted({ preloadHint: component }))
+      .then(controls =>
+        controls.mountComponent({
+          name: component,
+          appearanceKey: '__experimental_agentActionApproval',
+          node,
+          props,
+        }),
+      );
+  };
+
+  public __experimental_unmountAgentActionApproval = (node: HTMLDivElement) => {
+    void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
+  };
+
   /**
    * @deprecated Use mountOAuthConsent instead.
    */

diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const arSA: LocalizationResource = {
   locale: 'ar-SA',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: undefined,
     action__search: undefined,

diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const beBY: LocalizationResource = {
   locale: 'be-BY',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: undefined,
     action__search: undefined,

diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const bgBG: LocalizationResource = {
   locale: 'bg-BG',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: undefined,
     action__search: undefined,

diff --git a/packages/localizations/src/bn-IN.ts b/packages/localizations/src/bn-IN.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const bnIN: LocalizationResource = {
   locale: 'bn-IN',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: 'নতুন কী যোগ করুন',
     action__search: 'কী অনুসন্ধান করুন',

diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const caES: LocalizationResource = {
   locale: 'ca-ES',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: undefined,
     action__search: undefined,

diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const csCZ: LocalizationResource = {
   locale: 'cs-CZ',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: 'Přidat nový klíč',
     action__search: 'Vyhledat klíče',

diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const daDK: LocalizationResource = {
   locale: 'da-DK',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: undefined,
     action__search: undefined,

diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const deDE: LocalizationResource = {
   locale: 'de-DE',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: 'Neuen API-Key hinzufügen',
     action__search: 'Suche',

diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const elGR: LocalizationResource = {
   locale: 'el-GR',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: 'Προσθήκη',
     action__search: 'Αναζήτηση',

diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
@@ -14,6 +14,24 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const enGB: LocalizationResource = {
   locale: 'en-GB',
+  agentActionApproval: {
+    action__approve: undefined,
+    action__reject: undefined,
+    commentLabel: undefined,
+    commentPlaceholder: undefined,
+    expiresIn: undefined,
+    requestedBy: undefined,
+    subtitle: undefined,
+    terminal: {
+      approvedSubtitle: undefined,
+      approvedTitle: undefined,
+      expiredSubtitle: undefined,
+      expiredTitle: undefined,
+      rejectedSubtitle: undefined,
+      rejectedTitle: undefined,
+    },
+    title: undefined,
+  },
   apiKeys: {
     action__add: undefined,
     action__search: undefined,

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -2,6 +2,25 @@ import type { LocalizationResource } from '@clerk/shared/types';
 
 export const enUS: LocalizationResource = {
   locale: 'en-US',
+  agentActionApproval: {
+    action__approve: 'Approve',
+    action__reject: 'Reject',
+    commentLabel: 'Comment (optional)',
+    commentPlaceholder: 'Add context for the requesting application',
+    expiresIn: 'Approval window closes in {{remaining}}',
+    requestedBy: 'Requested by {{agent}} · {{createdAt}}',
+    subtitle: 'Review the details before allowing this action to continue.',
+    terminal: {
+      approvedSubtitle: 'You can close this window, return to your agent, and retry the request.',
+      approvedTitle: 'Agent is now authorized to continue',
+      expiredSubtitle:
+        'The approval window closed. No action was taken. You can close this window and return to your agent.',
+      expiredTitle: 'Approval window closed',
+      rejectedSubtitle: 'No action was taken. You can close this window and return to your agent.',
+      rejectedTitle: 'Action rejected',
+    },
+    title: 'Approve agent action',
+  },
   apiKeys: {
     action__add: 'Add new key',
     action__search: 'Search keys',