Building Apps

Extend Cal.com with custom integrations

Cal.com’s app framework allows you to build custom integrations that extend the platform’s functionality. Apps can add new features, integrate with third-party services, and customize the booking experience.

What Are Cal.com Apps?

Apps are modular extensions that integrate with Cal.com’s core functionality. They can:

• Add new calendar providers
• Integrate with CRM systems
• Add payment processing
• Provide video conferencing options
• Add analytics and tracking
• Customize booking pages
• Automate workflows

App Categories

Apps are organized into the following categories:

• Analytics - Track and analyze booking data
• AI & Automation - Automate workflows and add AI capabilities
• Calendar - Connect external calendar services
• Conferencing - Add video meeting providers
• CRM - Integrate customer relationship management systems
• Messaging - Connect messaging and notification services
• Payment - Process payments for bookings
• Other - General purpose apps

App Structure

Each app is a standalone package in the monorepo with the following structure:

packages/app-store/your-app/
├── config.json          # App metadata and configuration
├── package.json         # Package dependencies
├── index.ts            # Main export file
├── api/                # API endpoints
│   ├── index.ts
│   ├── add.ts         # Install handler
│   └── webhook.ts     # Webhook handler (optional)
├── lib/               # Core business logic
│   ├── CalendarService.ts
│   ├── CrmService.ts
│   ├── PaymentService.ts
│   └── VideoApiAdapter.ts
├── components/        # React components
│   ├── EventTypeAppCardInterface.tsx
│   └── AppSettingsInterface.tsx
├── static/           # Static assets
│   └── icon.svg
├── zod.ts           # Zod schemas for validation
├── DESCRIPTION.md   # App store description
└── README.md        # Installation instructions

Key Files

config.json

Defines app metadata, categories, and configuration:

{
  "name": "My App",
  "slug": "my-app",
  "type": "my-app_other",
  "logo": "icon.svg",
  "url": "https://example.com",
  "variant": "other",
  "categories": ["other"],
  "publisher": "Your Name",
  "email": "[e-mail]",
  "description": "Short description (max 10 words)"
}

index.ts

Exports the app’s API and library modules:

export * as api from "./api";
export * as lib from "./lib";

zod.ts

Defines validation schemas for app data and credentials:

import { z } from "zod";
import { eventTypeAppCardZod } from "@calcom/app-store/eventTypeAppCardZod";

export const appDataSchema = eventTypeAppCardZod.merge(
  z.object({
    // Your app-specific settings
    enabled: z.boolean().optional(),
    credentialId: z.number().optional(),
  })
);

export const appKeysSchema = z.object({
  api_key: z.string(),
  api_secret: z.string(),
});

api/add.ts

Handles app installation and credential storage:

import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // Handle app installation
  // Store credentials
  // Return success/failure
}

Generated Files

The app-store CLI automatically generates several files that register your app:

• apps.metadata.generated.ts - App metadata registry
• apps.schemas.generated.ts - Schema exports
• apps.server.generated.ts - Server-side API handlers
• apps.browser.generated.tsx - Client-side components
• calendar.services.generated.ts - Calendar service map
• crm.apps.generated.ts - CRM service map
• payment.services.generated.ts - Payment service map
• video.adapters.generated.ts - Video adapter map

Never modify *.generated.ts files directly. They are automatically generated by the app-store CLI.

Development Workflow

1. Create - Use the CLI to scaffold a new app
2. Develop - Implement business logic and UI components
3. Test - Test locally with yarn dev
4. Build - Generate app registry files with yarn app-store:build
5. Enable - Activate your app in /settings/admin/apps

Next Steps

Build Your First App

Step-by-step guide to creating a Cal.com app

App Store CLI

Command-line tools for app development

App Types

Learn about different app types and services

Contributing

Guidelines for contributing apps