Build an AI SDR chatbot without code

Use when the visitor shows sales intent — pricing, quotes, demos, trials, talking to a rep, buying, or "set up a call / next steps". Renders the SalesScheduler so they can book without leaving chat. Not for general product Q&A.

# Book a meeting with sales

When the visitor signals they want to talk to a human, render an in-chat scheduler so they can book in seconds.

## Trigger on
- Pricing — "how much", "pricing", "quote", "cost"
- Sales / demo — "talk to sales", "see a demo", "get a trial"
- Buying / next steps — "purchasing", "licensing", "set up a call"

Just exploring how things work? Don't trigger — keep answering from the docs.

## What to do
1. Acknowledge in one plain-text sentence, customized to what they asked (pricing -> "Happy to connect you with our team — they can walk through pricing.").
2. Render the SalesScheduler component. No input needed.
3. After they book, confirm the date and time they mention, note the calendar invite is sent automatically, and offer to keep answering questions.

## Rules
- The acknowledgement and the scheduler must appear in the SAME response.
- Acknowledgement text comes BEFORE the component, never inside it.
- Never list time slots as text — the calendar handles selection.
- Never invent meeting times or invite details.

{
  "type": "object",
  "properties": {
    "calLink": {
      "type": "string",
      "description": "Cal.com booking path, e.g. \"your-name/30min\". If omitted, the component falls back to the placeholder you hardcode in the renderer — replace it with your real Cal.com path."
    },
    "title": {
      "type": "string",
      "description": "Title shown above the calendar"
    }
  }
}

You help prospective customers understand [Your Product] and connect with the sales team.

# Sales intent
When the visitor shows sales intent, follow the SOP in the "book-meeting-with-sales" skill. On a sales-intent turn:
- Do NOT search the knowledge base, answer from docs, or save citations — even if the docs could answer. Surface the booking flow instead.

# Everything else
For genuine product or how-it-works questions:
1. Search the knowledge base before answering.
2. Save every fact you reference as a `citation` artifact before using it.
3. Cite via saved artifacts — never paste raw URLs.
4. If the docs don't cover it, say so plainly. Don't invent facts.

# Rules
- Render at most ONE data component per response.
- Put any intro text in plain text BEFORE the component, never wrapped inside it.

Tone: Direct, neutral, first person on behalf of the company.

import { useEffect, useRef } from 'react';
import { InkeepEmbeddedChat } from '@inkeep/agents-ui-cloud';
import type {
  AIChatFunctions,
  InkeepAIChatSettings,
} from '@inkeep/agents-ui-cloud/types';
import SalesScheduler from './SalesScheduler';

export default function SalesIntentChat() {
  const chatRef = useRef<AIChatFunctions | null>(null);

  // The scheduler dispatches `inkeep-send-message` after a booking.
  // Relay it into the chat so the agent can confirm the meeting.
  useEffect(() => {
    const handler = (e: Event) => {
      const message = (e as CustomEvent).detail?.message;
      if (message) chatRef.current?.submitMessage(message);
    };
    window.addEventListener('inkeep-send-message', handler);
    return () => window.removeEventListener('inkeep-send-message', handler);
  }, []);

  const aiChatSettings: InkeepAIChatSettings = {
    appId: 'YOUR_APP_ID',
    chatFunctionsRef: chatRef,
    components: {
      SalesScheduler,
    },
  };

  return <InkeepEmbeddedChat aiChatSettings={aiChatSettings} />;
}

import { getCalApi } from '@calcom/embed-react';
import { useEffect } from 'react';

interface SalesSchedulerProps {
  calLink?: string;
  title?: string;
}

export default function SalesScheduler({ calLink, title }: SalesSchedulerProps) {
  const resolvedLink = (calLink || 'your-name/30min').replace(
    /^https?:\/\/cal\.com\//,
    ''
  );

  useEffect(() => {
    let cancelled = false;

    const handler = (e: { detail: { data: { title?: string; startTime?: string } } }) => {
      const { title: bookingTitle, startTime } = e.detail.data;
      let message = "I've just booked a meeting";
      if (startTime) {
        const formatted = new Date(startTime).toLocaleString('en-US', {
          weekday: 'long',
          month: 'long',
          day: 'numeric',
          hour: 'numeric',
          minute: '2-digit',
          timeZoneName: 'short',
        });
        message = `I've just booked a meeting for ${formatted}`;
      }
      if (bookingTitle) message += ` — "${bookingTitle}"`;
      message += '.';

      window.dispatchEvent(
        new CustomEvent('inkeep-send-message', { detail: { message } })
      );
    };

    (async () => {
      const cal = await getCalApi();
      if (cancelled) return;
      cal('preload', { calLink: resolvedLink });
      cal('on', { action: 'bookingSuccessfulV2', callback: handler });
    })();

    // The Cal.com embed API is a global singleton — remove the listener on
    // unmount so React Strict Mode's remount doesn't double-register it
    // (which would fire the booking message twice).
    return () => {
      cancelled = true;
      getCalApi().then((cal) =>
        cal('off', { action: 'bookingSuccessfulV2', callback: handler })
      );
    };
  }, [resolvedLink]);

  const openCalendar = async () => {
    const cal = await getCalApi();
    cal('modal', { calLink: resolvedLink, config: { layout: 'month_view' } });
  };

  return (
    <div className="rounded-xl border border-gray-200 bg-white p-5 my-2 w-full">
      <p className="text-sm font-semibold text-gray-900 mb-1">
        {title || 'Schedule a meeting'}
      </p>
      <p className="text-xs text-gray-600 mb-4">
        Pick a time that works — calendar invite sent automatically
      </p>
      <button
        type="button"
        onClick={openCalendar}
        className="px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition"
      >
        Pick a time →
      </button>
    </div>
  );
}