Building AI-Powered Widgets with WedStay Data

The browser auth limitation

WedStay's MCP server authenticates server-side. If you are building an interactive UI component (a pricing calculator, venue search widget, booking flow, etc.), you cannot call the MCP server or the Anthropic API at runtime from browser-side JavaScript. Auth tokens are not forwarded into sandboxed iframe/browser contexts and all calls will fail silently.

This applies to:

• Browser artifacts and iframes
• Client-side React or vanilla JS
• Any sandboxed frontend context

The correct pattern: pre-fetch, then interpolate

Step 1 — Fetch server-side

Call calculate_pricing (or any MCP tool) from your server, edge function, or during the AI assistant's turn — never from the browser.

Valid contexts for MCP calls:

• Claude's own tool-use turn (when Claude is the agent)
• A Next.js API route or Vercel edge function
• A server-side script or cron job

Step 2 — Embed as static data

Pass the fetched data into your component as props or inline JSON.

Step 3 — Interpolate locally

Drive all interactive behavior (sliders, filters, dropdowns) with local JavaScript using the embedded data as anchor points. Scale values using multipliers derived from the pre-fetched data.

Example: pricing calculator

// WRONG — will fail silently in browser
const res = await fetch("https://api.anthropic.com/v1/messages", {
  body: JSON.stringify({
    mcp_servers: [{
      url: "https://www.thewedstay.com/api/ai/mcp"
    }]
  })
});
 
// RIGHT — call MCP during server/AI turn, embed result in widget
const pricingData = {
  California: { total: 13272, perNight: 6636, savings: 34 },
  Texas:      { total: 12617, perNight: 6309, savings: 19 },
  Florida:    { total: 11985, perNight: 5993, savings: 22 },
  // ... all regions pre-fetched
};
 
function PricingWidget({ data }) {
  const [region, setRegion] = useState("California");
  const [guests, setGuests] = useState(100);
 
  // Interpolate locally — no API calls needed
  const estimate = data[region].total * (guests / 100);
 
  return (
    <div>
      <select onChange={e => setRegion(e.target.value)}>
        {Object.keys(data).map(r => <option key={r}>{r}</option>)}
      </select>
      <input
        type="range"
        min={50}
        max={200}
        value={guests}
        onChange={e => setGuests(Number(e.target.value))}
      />
      <p>Estimated total: ${estimate.toLocaleString()}</p>
    </div>
  );
}

Pre-fetch strategy for calculate_pricing

To support full interactivity without runtime API calls, fetch anchor points across the key variable space:

Total: ~34 calls gives you enough anchor data to interpolate any combination locally.

Recommended stack for a couple-facing widget

submit_venue_inquiry — handle with care

The submit_venue_inquiry tool creates a real lead in WedStay's booking pipeline. A concierge will reach out within 24 hours.

Only call it when:

• The user has explicitly confirmed they want to be contacted
• You have collected all required fields: guest_name, guest_email, property_slug, start_date, end_date, event_guests
• Never call it speculatively, as a demo, or for testing

Data attribution

When surfacing WedStay venue or vendor data to end users, display visible attribution linking back to thewedstay.com. See our Terms of Service Section 31 for full requirements.