OAuthRequestCard

Guidelines#

It hands the user off to the provider to authorize, then brings them back.

Use it for rendering a data-oauth-request part in the onboarding or meetings chat. The click only navigates. The token is written server-side by the OAuth callback, and a later tool_status: success part confirms the connection.

What you provide

• data: OAuthRequestData, which is { provider: "notion" | "hubspot", connectUrl, title? }. The title defaults to "Connect {Provider}".
• disabled, used while a confirmation is pending.

Anatomy (.ob-oauth*)

• A flex row with a 14px gap, 12px 14px padding and an 8px vertical margin, a 1px --mx-line border and a 12px radius.
• Title: 13.5px/600 in --mx-ink.
• A fixed 12px explanation: "Your Max agent stores the credential — the website never keeps it."
• The button is an ink-filled link: 8px 14px padding, 9px radius, 13px/600, --mx-bg on --mx-ink. When disabled it drops to 50% opacity and ignores the pointer.

Setup

• Place it inside .maxchat so the mx-* palette applies.
• The card background reads --mx-bg-soft and its secondary text --mx-ink-soft. max-chat.css defines neither, so they fall back to #f9fafb and #6b7280, which are light-only.
• On dark themes, map them yourself. This preview uses --mx-surface-2 and --mx-ink-3.

Don't treat the click as success, and don't collect credentials in the chat.

Facts#

Group	Agents
Product	Max
Global	window.DigitalCrew.OAuthRequestCard
Source	max-agent: src/features/onboarding-hermes/ui/parts/oauth-request-card.tsx
Import in the app	import { OAuthRequestCard } from "@/features/onboarding-hermes/ui/parts/oauth-request-card";

API#

TypeScript declarations emitted from src/features/onboarding-hermes/ui/parts/oauth-request-card.tsx.

export interface OAuthRequestData {
    provider: "notion" | "hubspot";
    connectUrl: string;
    title?: string;
}
export declare function OAuthRequestCard({ data, disabled, }: {
    data: OAuthRequestData;
    disabled?: boolean;
}): any;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  // onboarding-chat.css reads --mx-bg-soft / --mx-ink-soft, which max-chat.css never defines;
  // mapping them to the .maxchat palette keeps the card readable in dark themes too.
  var SOFT = { height: "auto", "--mx-bg-soft": "var(--mx-surface-2)", "--mx-ink-soft": "var(--mx-ink-3)" };
  function App() {
    return h("div", { className: "maxchat mx-auto max-w-[600px] rounded-2xl border border-border/60 px-5 py-3", style: SOFT },
      h(DC.OAuthRequestCard, { data: { provider: "hubspot", connectUrl: "#connect-hubspot" } }),
      h(DC.OAuthRequestCard, { data: { provider: "notion", connectUrl: "#connect-notion", title: "Connect Notion to import your playbooks" }, disabled: true }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Agents#