Astrocal

SDKs for React, the widget, and AI agents

Official packages for every integration pattern: React hooks, an embeddable widget, and an MCP server so AI agents can book meetings directly.

Get started free
npm install @astrocal/react

@astrocal/react

React hooks and components for embedding scheduling directly in your app.

View on npm

useAstrocal hook

Read a fully typed API client from context in any component to check availability and create, cancel, or reschedule bookings.

Typed API client

AstrocalApiClient gives you typed methods for availability, bookings, cancellations, and reschedules. Use it in a hook or on the server.

AstrocalWidget component

Drop-in date and time picker that handles the full booking flow. Fully themeable, with onBookingCreated, onError, and onClose callbacks.

TypeScript-first

Every hook and component is fully typed. Autocomplete for all API responses and inputs.

Server Component ready

Works with React Server Components and the Next.js App Router. No client boundary needed for data fetching.

Lightweight

Zero external dependencies beyond React. Tree-shakeable so you only ship what you use.

React example
import { AstrocalProvider, AstrocalWidget } from "@astrocal/react";

export default function BookingPage() {
return (
  <AstrocalProvider apiKey="ac_live_...">
    <AstrocalWidget
      eventTypeId="evt_abc123"
      onBookingCreated={(booking) => console.log("Booked!", booking.id)}
    />
  </AstrocalProvider>
);
}

@astrocal/widget

Framework-agnostic embeddable widget for any website. One script tag, zero dependencies.

View on npm

Inline or popup

Embed the widget directly in your page or trigger it as a modal from any button or link.

Shadow DOM isolation

Widget styles are fully encapsulated. No CSS conflicts with your site, no matter your framework.

Custom branding

Match your brand colors, fonts, and logo. The widget inherits your organization's branding settings.

Works everywhere

Vanilla JS with no framework dependency. Use it with WordPress, Webflow, Squarespace, or any HTML page.

Responsive

Adapts to any container width. Mobile-optimized date picker and time slot selection.

Event callbacks

Pass onBookingCreated, onError, and onClose callbacks to trigger your own analytics or workflows.

Widget embed example
<script src="https://cdn.astrocal.dev/widget.js"></script>
<div id="booking"></div>

<script>
Astrocal.open({
  eventTypeId: "evt_abc123",
  target: "#booking",
  onBookingCreated: (booking) => {
    console.log("Booking confirmed:", booking.id);
  },
});
</script>

<!-- Or skip the script: a div with data-astrocal-event-type-id auto-initializes -->

@astrocal/mcp-server

Let AI agents check availability and book meetings through the Model Context Protocol.

View on npm

MCP-native

Built for the Model Context Protocol. Works with Claude, GPT-4, and any MCP-compatible AI agent.

Full booking lifecycle

Agents can list event types, check availability, create bookings, and cancel or reschedule.

Zero integration code

Point your AI agent at the MCP server and it discovers available tools automatically. No glue code needed.

Secure by default

Authenticate with your API key. The server enforces the same permissions as the REST API.

Run anywhere

Use npx for instant setup or install globally. Runs as a stdio server that any MCP client can connect to.

Published on npm

Versioned releases on npm with changelog. Pin to a specific version or use latest.

Learn more
MCP Server usage
# Run with npx (no install needed)
npx @astrocal/mcp-server --api-key ac_live_...

# Or install globally

npm install -g @astrocal/mcp-server
astrocal-mcp --api-key ac*live*...

# Agent discovers tools automatically:

# list_event_types

# check_availability

# create_booking

# cancel_booking

# reschedule_booking

# list_bookings

# join_waitlist

# check_waitlist

Pick your SDK and start building

Browse the docs