feat: add purchase order agent integration

Add @takeshape/purchase-order-chat integration with:
- Purchase order agent page at /purchase-order-agent
- BigCommerce GraphQL proxy route to avoid CORS issues
- Tailwind config for library styles
- Environment variable documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: asprouse

.mcp.json

@@ -0,0 +1,25 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp",
+      "headers": {
+        "CONTEXT7_API_KEY": "${CONTEXT7_API_KEY:-}"
+      }
+    },
+    "shortcut": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@shortcut/mcp@latest"],
+      "env": {
+        "SHORTCUT_API_TOKEN": "${SHORTCUT_API_TOKEN:-}"
+      }
+    }
+  }
+}

core/.env.example

@@ -40,3 +40,17 @@ TURBO_REMOTE_CACHE_SIGNATURE_KEY=
 # https://nextjs.org/docs/app/building-your-application/caching#data-cache
 # This sets a sensible revalidation target for cached requests
 DEFAULT_REVALIDATE_TARGET=3600
+
+# TakeShape Purchase Order Agent Configuration
+# Required: Get these from your TakeShape dashboard
+NEXT_PUBLIC_TAKESHAPE_PROJECT_ID=
+NEXT_PUBLIC_TAKESHAPE_API_KEY=
+NEXT_PUBLIC_BIGCOMMERCE_CHANNEL_ID=1
+
+# Optional: Defaults to https://api.takeshape.io
+# NEXT_PUBLIC_TAKESHAPE_ORIGIN=https://api.takeshape.io
+# NEXT_PUBLIC_TAKESHAPE_SSE_ORIGIN=https://sse.takeshape.io
+
+# Optional: Agent configuration (defaults shown)
+# NEXT_PUBLIC_TAKESHAPE_AGENT_NAME=purchase-order-agent
+# NEXT_PUBLIC_TAKESHAPE_INPUT_NAME=purchaseOrder

core/app/[locale]/(default)/purchase-order-agent/page.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useRouter } from '~/i18n/routing';
+import { PurchaseOrderChat } from '@takeshape/purchase-order-chat/shadow';
+
+const takeShape = {
+  projectId: process.env.NEXT_PUBLIC_TAKESHAPE_PROJECT_ID!,
+  apiKey: process.env.NEXT_PUBLIC_TAKESHAPE_API_KEY!,
+  origin: process.env.NEXT_PUBLIC_TAKESHAPE_ORIGIN ?? 'https://api.takeshape.io',
+  sseOrigin: process.env.NEXT_PUBLIC_TAKESHAPE_SSE_ORIGIN ?? process.env.NEXT_PUBLIC_TAKESHAPE_ORIGIN ?? 'https://api.takeshape.io',
+};
+
+const bigCommerce = {
+  endpoint: '/api/bigcommerce/graphql',
+  channelId: Number(process.env.NEXT_PUBLIC_BIGCOMMERCE_CHANNEL_ID),
+};
+
+const agentName = process.env.NEXT_PUBLIC_TAKESHAPE_AGENT_NAME ?? 'purchase-order-agent';
+const inputName = process.env.NEXT_PUBLIC_TAKESHAPE_INPUT_NAME ?? 'purchaseOrder';
+
+export default function PurchaseOrderAgentPage() {
+  const router = useRouter();
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <PurchaseOrderChat
+        takeShape={takeShape}
+        bigCommerce={bigCommerce}
+        agentName={agentName}
+        inputName={inputName}
+        onViewProduct={(product) => product.path && router.push(product.path)}
+        onCheckout={(checkoutUrl) => router.push(checkoutUrl)}
+      />
+    </div>
+  );
+}

core/app/api/bigcommerce/graphql/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const BIGCOMMERCE_STORE_HASH = process.env.BIGCOMMERCE_STORE_HASH;
+const BIGCOMMERCE_STOREFRONT_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_TOKEN;
+
+function getBigCommerceEndpoint(storeHash: string): string {
+  return `https://store-${storeHash}.mybigcommerce.com/graphql`;
+}
+
+export async function POST(request: NextRequest) {
+  if (!BIGCOMMERCE_STORE_HASH || !BIGCOMMERCE_STOREFRONT_TOKEN) {
+    return NextResponse.json(
+      { errors: [{ message: 'BigCommerce configuration missing' }] },
+      { status: 500 }
+    );
+  }
+
+  try {
+    const body = await request.json();
+
+    const response = await fetch(getBigCommerceEndpoint(BIGCOMMERCE_STORE_HASH), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${BIGCOMMERCE_STOREFRONT_TOKEN}`,
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+
+    return NextResponse.json(data, { status: response.status });
+  } catch (error) {
+    console.error('[BigCommerce Proxy] Error:', error);
+    return NextResponse.json(
+      { errors: [{ message: 'Failed to proxy request to BigCommerce' }] },
+      { status: 500 }
+    );
+  }
+}

core/package.json

@@ -35,6 +35,7 @@
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@t3-oss/env-core": "^0.13.6",
+    "@takeshape/purchase-order-chat": "file:../../bigcommerce-app/packages/purchase-order-chat",
     "@upstash/redis": "^1.35.0",
     "@vercel/analytics": "^1.5.0",
     "@vercel/functions": "^2.2.12",

core/tailwind.config.js

@@ -4,6 +4,7 @@ const config = {
     './app/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './vibes/**/*.{ts,tsx}',
+    // './node_modules/@takeshape/purchase-order-chat/src/**/*.{ts,tsx}',
     '!./node_modules/**', // Exclude everything in node_modules to speed up builds
   ],
   theme: {