Building AI-Powered Widgets with WedStay Data

Where a widget can call WedStay

WedStay's MCP server needs no sign-in for its read tools. Whether a widget can call it depends on where the widget runs:

• Inside an MCP Apps host such as ChatGPT, a view the server provides (WedStay's own venue cards, comparison, estimate and inquiry form) calls tools through the host's bridge, never with fetch. See Venue views.
• In your own product, call the MCP server or the REST API from your server, then pass the data to your component.
• In a browser artifact, an iframe or other client-side code with no host bridge, do not call the endpoint directly. It sends no CORS headers, so a page on another origin cannot read its responses. Calling a model API from the browser would also expose its key.

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: exposes an API key, and the browser cannot read a cross-origin reply
const res = await fetch("https://api.anthropic.com/v1/messages", {
  body: JSON.stringify({
    mcp_servers: [{
      url: "https://mcp.wedstay.com/api/ai/mcp"
    }]
  })
});
 
// RIGHT — call MCP during server/AI turn, embed result in widget
const pricingData = {
  California: { total: 13272, perStay: 13272, savings: 34 },
  Texas:      { total: 12617, perStay: 12617, savings: 19 },
  Florida:    { total: 11985, perStay: 11985, 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>
  );
}

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.