Skip to content
EvolveEvolveEvolve

feature-mcp-connect

@evolve-storefront/feature-mcp-connect · v0.1.0 snapshot (4ad5277) · Storybook ↗

Connecting an AI assistant to a customer's account: the storefront's side of the MCP authorization flow. The customer signs in on the shop's own login page, or continues as a guest, approves the assistant and makes the choices the shop asks for. The assistant gets a session of its own, so the visitor's browser session stays as it is.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/feature-mcp-connect graphql next-intl react
    Requirements3
    graphql>=16
    next-intl>=4
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

    @import "@evolve-storefront/feature-mcp-connect/styles.css";

  3. Add its translations to your message files with evolve messages.

Then render it on a page:

// lib/mcp.ts
import { createConnectFlow } from "@evolve-storefront/feature-mcp-connect/server";


export const connectFlow = createConnectFlow({
  authorizationServer: process.env.MCP_URL,
  interactionSecret: process.env.MCP_INTERACTION_SECRET,
  endpoint: `${gatewayUrl}/graphql`,
  login: CustomerLogin, // from @evolve-storefront/feature-auth/documents
  guest: SessionGuestCreate, // from @evolve-storefront/session/documents
  guestScopes: ["shop"],
});

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

ConnectConsentThe consent screen: who is asking, where the customer returns to, what the client may do and the choices the shop asks for.
ConnectExpiredShown when the request is gone, and the customer has to start over.
ConnectGuestButtonLets a visitor connect a client without an account.

Hooks

1 hook to read and change the data yourself, for when you build your own UI. All hooks

More in this package