iToverDose/Software· 3 JUNE 2026 · 16:00

How to launch a booking site in hours with AI and a headless CRM

A small clinic needed an online booking system. Using an AI agent for the UI and a headless CRM for backend logic, a developer built and launched the entire site in a single afternoon—without writing a database or availability engine.

DEV Community6 min read0 Comments

A local clinic reached out with a straightforward request: "We need an online booking system." The initial estimate from a development agency? Two weeks of work involving a calendar, database, availability engine, payment integration, and customer management. But with the right tools, that timeline collapsed to a single afternoon.

By leveraging an AI agent to handle the frontend and a headless customer relationship management (CRM) platform for backend operations, the entire booking system was built, tested, and deployed in just a few hours. No complex database setup. No availability algorithm. Just a clean, functional booking interface and a fully operational backend—all without writing a line of business logic.

The setup: AI for the frontend, headless CRM for the backend

The project involved a small clinic with three services, one practitioner, and a requirement for online bookings with a deposit. The team used two key components:

  • An AI agent integrated into their development environment to generate the user interface.
  • A headless CRM to manage services, availability, bookings, and payments without a traditional dashboard.

The goal was to minimize manual coding while ensuring the system was secure, scalable, and functional from day one.

Step 1: Register the clinic’s CRM workspace (5 minutes)

The first step was setting up the CRM workspace. Instead of logging into a web dashboard, the team used a command-line interface (CLI) tool provided by the CRM provider. This approach eliminated the need for manual configuration through a graphical interface.

favcrm signup request --email clinic@example.com \
  --organisation-name "Bright Smile Clinic"
favcrm signup verify --request-id <id> --code <6-digit-code>

After verification, the CLI generated an API key prefixed with fav_mcp_. This key was critical for secure communication between the booking system and the CRM backend. To prevent accidental exposure, the key was stored in an environment variable rather than committed to the code repository:

export FAVCRM_API_KEY=fav_mcp_...

Step 2: Configure services and availability (30 minutes)

With the workspace registered, the next task was configuring the clinic’s services and practitioner availability. The AI agent took the lead here, interpreting the clinic’s requirements and executing the necessary backend configurations through API calls.

Before creating any services, the agent inspected the available schema to understand the expected input structure:

favcrm tool describe create_service

Once the schema was clear, the agent created each service using the CRM’s API:

  • New Patient Exam (45 minutes, $80)
  • Cleaning (30 minutes, $60)
favcrm tool call create_service '{ "name": "New Patient Exam", "durationMinutes": 45, "price": "80.00" }'
favcrm tool call create_service '{ "name": "Cleaning", "durationMinutes": 30, "price": "60.00" }'

The practitioner’s availability was then set per weekday to ensure accurate slot bookings:

favcrm tool call set_staff_availability '{ "weekday": "mon", "start": "09:00", "end": "17:00" }'

This process was repeated for each weekday, effectively building an availability engine without writing any custom code. The CRM’s built-in logic handled slot allocation, preventing double bookings and ensuring real-time updates.

Step 3: Build a lightweight backend proxy (30 minutes)

The booking system required a secure way for the frontend to communicate with the CRM without exposing the API key. The solution was a single server route acting as a proxy between the user interface and the CRM’s backend. This approach centralized authentication and abstracted the CRM’s API complexity.

In a Next.js application, the proxy route was implemented as follows:

// app/api/booking/route.js (Next.js route handler)
const MCP = '

async function callTool(name, args) {
  const res = await fetch(MCP, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      authorization: `Bearer ${process.env.FAVCRM_API_KEY}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      id: 1,
      method: 'tools/call',
      params: {
        name,
        arguments: args,
      },
    }),
  });
  if (!res.ok) throw new Error(`FavCRM ${res.status}`);
  return res.json();
}

export async function GET(req) {
  const { searchParams } = new URL(req.url);
  const slots = await callTool('get_available_slots', {
    serviceId: searchParams.get('serviceId'),
    date: searchParams.get('date'),
  });
  return Response.json(slots);
}

export async function POST(req) {
  const body = await req.json();
  const booking = await callTool('create_booking', {
    serviceId: body.serviceId,
    start: body.start,
    customer: {
      name: body.name,
      email: body.email,
    },
  });
  return Response.json(booking);
}

This route handled two critical operations:

  • Fetching available time slots for a selected service and date.
  • Creating a booking and associating it with a customer.

All business logic—such as availability checks, booking persistence, and customer record creation—was managed by the CRM. The route simply relayed requests and responses, reducing the development effort to a minimal, maintainable structure.

Step 4: Generate the booking UI with AI (1–2 hours)

With the backend in place, the final piece was the user interface. Instead of manually coding HTML, CSS, and JavaScript, the team used the AI agent to generate a complete React-based booking page. The prompt was simple:

"Build a booking page. Fetch services, let the visitor pick one and a date, GET /api/booking for open slots, POST /api/booking to confirm. Show a success state with the booking time."

The AI produced a functional React component that:

  • Displayed the clinic’s services.
  • Allowed users to select a service and preferred date.
  • Fetched available slots from the backend proxy.
  • Enabled booking confirmation with customer details.
  • Showed a success message with the booked time.

The resulting UI was clean, responsive, and ready for branding adjustments. The team could focus on styling and user experience rather than core functionality.

Step 5: Test and validate the booking flow

With the system assembled, the final step was testing. The team ran through the entire booking flow in a browser, from service selection to payment confirmation. Once a test booking was completed, they verified its creation in the CRM:

favcrm tool call list_bookings '{}'

The booking appeared in the list, along with a new customer record. The CRM automatically associated the booking with the customer’s profile, ensuring continuity for future visits. To add deposit collection, the team integrated an additional API call to generate invoices, completing the payment flow without extra development effort.

What was built—and what was avoided

The outcome was a fully functional booking system for the clinic, featuring:

  • A branded, responsive booking page.
  • Real-time availability and booking management.
  • Automatic customer record creation and history tracking.
  • Stripe integration for deposits.

What the team avoided included:

  • Building a custom database or schema.
  • Writing availability or conflict-resolution logic.
  • Implementing migration scripts.
  • Debugging double-booking scenarios.
  • Creating customer management tables.
  • Setting up Stripe webhook reconciliation.

Instead, the team wrote only three things:

  • A service configuration file.
  • A single server proxy route.
  • A React-based UI generated by AI.

The power of headless CRMs for rapid development

This project highlights how headless CRMs can transform the way businesses build and deploy applications. By offloading core business logic—such as availability management, booking persistence, and customer tracking—to a specialized platform, developers can focus on delivering value without reinventing the wheel.

For teams looking to adopt this approach, the CRM’s free tier supported the entire build, making it accessible even for small projects. The agentic workflow further accelerated development, reducing the time from concept to deployment from weeks to hours.

As AI continues to evolve, the potential for rapid, low-code development grows. For anyone considering a booking system—or any customer-facing application—the combination of AI-driven frontend generation and a headless CRM backend offers a compelling path forward.

AI summary

Müşterilerinizin randevu sitesi ihtiyacını hızlı ve kolay bir şekilde karşılayabilirsiniz. Bir öğleden sonra gibi kısa bir sürede müşterinizin randevu sitesini hazırlayabilirsiniz.

Comments

00
LEAVE A COMMENT
ID #AGSX7S

0 / 1200 CHARACTERS

Human check

2 + 8 = ?

Will appear after editor review

Moderation · Spam protection active

No approved comments yet. Be first.