> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/calcom/cal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```json theme={null}
{
  "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": "email@example.com",
  "description": "Short description (max 10 words)"
}
```

### index.ts

Exports the app's API and library modules:

```typescript theme={null}
export * as api from "./api";
export * as lib from "./lib";
```

### zod.ts

Defines validation schemas for app data and credentials:

```typescript theme={null}
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:

```typescript theme={null}
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

<Warning>
  Never modify `*.generated.ts` files directly. They are automatically generated by the app-store CLI.
</Warning>

## 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

<CardGroup cols={2}>
  <Card title="Build Your First App" icon="hammer" href="/developers/apps/build-an-app">
    Step-by-step guide to creating a Cal.com app
  </Card>

  <Card title="App Store CLI" icon="terminal" href="/developers/apps/app-store-cli">
    Command-line tools for app development
  </Card>

  <Card title="App Types" icon="layer-group" href="/developers/apps/app-types">
    Learn about different app types and services
  </Card>

  <Card title="Contributing" icon="code-pull-request" href="https://github.com/calcom/cal.com/blob/main/packages/app-store/CONTRIBUTING.md">
    Guidelines for contributing apps
  </Card>
</CardGroup>