Adding the Sitecore Marketer MCP to Marketplace apps

"use client";

import { useCallback } from "react";
import { useChat } from "@ai-sdk/react";
import { useAuth } from "@/components/providers/auth";
import { useAppContext } from "@/components/providers/marketplace";
// ...other UI imports...

const Chatbot = () => {
  // ...existing state/UI logic...

  // Marketplace/Auth hooks
  const { getAccessTokenSilently } = useAuth();
  const appContext = useAppContext();

  // Access the live Context ID
  const contextId = appContext.resources?.[0]?.context?.live ?? "";

  // Or access the preview Context ID
  // const contextId = appContext.resources?.[0]?.context?.preview ?? "";

  const { sendMessage } = useChat();

  const handleSubmit = useCallback(async (message: { text?: string; files?: File[] }) => {
    // Access the bearer token
    const token = await getAccessTokenSilently();

    // Send the bearer token and the Context ID to the server
    await sendMessage(
      { text: message.text || "Sent with attachments", files: message.files },
      {
        body: {
          // ...other request fields...
          // If backend expects in body:
          authorization: `Bearer ${token}`,
          contextId,
        },

        // Required headers for the Marketer MCP to work in the Sitecore Marketplace 
        headers: {
          // If backend expects in headers:
          Authorization: `Bearer ${token}`,
          "x-sitecore-contextid": contextId,
        },
      }
    );
  }, [getAccessTokenSilently, contextId, sendMessage]);

  // ...existing rendering...
  return null;
};

export default Chatbot;

import { createMCPClient } from "@ai-sdk/mcp";
import { streamText, convertToModelMessages, stepCountIs, type UIMessage } from "ai";

export async function POST(req: Request) {
  // Read the bearer token and the Context ID from the header of the incoming request
  const authorization = req.headers.get("Authorization");
  const contextId = req.headers.get("x-sitecore-contextid");

  if (!authorization) return new Response("Missing Authorization header", { status: 401 });
  if (!contextId) return new Response("Missing x-sitecore-contextid header", { status: 400 });

  // Keep only fields needed for model execution
  const { messages, model }: { messages: UIMessage[]; model: string } = await req.json();

  // Create MCP client with Sitecore-required headers
  const mcpClient = await createMCPClient({
    transport: {
      type: "http",
      // The Sitecore Marketer MCP URL:
      url: "https://edge-platform.sitecorecloud.io/mcp/marketer-mcp-prod",
      headers: {
        Authorization: authorization,
        "sc-resource": "marketplace",
        "sc-marketplace-auth": "interactive/v1",
        "x-sitecore-contextid": contextId,
      },
    },
  });

  // Load MCP tools and pass to AI SDK
  const tools = await mcpClient.tools();

  const result = streamText({
    model,
    messages: await convertToModelMessages(messages),
    tools,
    stopWhen: stepCountIs(5),
    // ...system prompt / webSearch / provider routing...
    onFinish: async () => {
      await mcpClient.close(); // important cleanup
    },
    onError: async () => {
      await mcpClient.close(); // important cleanup
    },
  });

  return result.toUIMessageStreamResponse({
    // ...optional sendSources/sendReasoning...
  });
}