Apify Integration (#1034)

Author: csansoon

apps/web/src/lib/integrationTypeOptions.ts

@@ -160,6 +160,10 @@ export const HOSTED_INTEGRATION_TYPE_OPTIONS: Record<
     label: 'Audiense',
     icon: 'audiense',
   },
+  [HostedIntegrationType.Apify]: {
+    label: 'Apify',
+    icon: 'apify',
+  },
 }
 
 export function integrationOptions(

packages/constants/src/integrations.ts

@@ -38,6 +38,7 @@ export enum HostedIntegrationType {
   Figma = 'figma',
   Hyperbrowser = 'hyperbrowser',
   Audiense = 'audiense',
+  Apify = 'apify',
 
   // Require all auth file :point_down:
   // Gmail = 'google_drive',

packages/core/src/services/integrations/hostedTypes/configs/apify.ts

@@ -0,0 +1,26 @@
+import { HostedIntegrationConfig } from '../types'
+import { npxCommand } from '../utils'
+
+export default {
+  description: 'Gives access to any actor available from your APIFY account.',
+  command: npxCommand({
+    package: '@apify/actors-mcp-server',
+    args: '${ACTORS:+--actors "$ACTORS"}',
+  }),
+  env: {
+    APIFY_TOKEN: {
+      label: 'Personal API token',
+      description: 'The token for your APIFY account',
+      placeholder: 'your-apify-token',
+      required: true,
+    },
+    ACTORS: {
+      label: 'Actors',
+      description:
+        'The list of actors to be used in the integration, separated by commas',
+      placeholder: 'actor1,actor2,actor3',
+      required: false,
+    },
+  },
+  envSource: 'https://console.apify.com/settings/integrations',
+} as HostedIntegrationConfig

packages/core/src/services/integrations/hostedTypes/index.ts

@@ -31,6 +31,7 @@ import GHOST_MCP_CONFIG from './configs/ghost'
 import FIGMA_MCP_CONFIG from './configs/figma'
 import HYPERBROWSER_MCP_CONFIG from './configs/hyperbrowser'
 import AUDIENSE_MCP_CONFIG from './configs/audiense'
+import APIFY_MCP_CONFIG from './configs/apify'
 
 export const HOSTED_MCP_CONFIGS: Record<
   HostedIntegrationType,
@@ -68,4 +69,5 @@ export const HOSTED_MCP_CONFIGS: Record<
   [HostedIntegrationType.Figma]: FIGMA_MCP_CONFIG,
   [HostedIntegrationType.Hyperbrowser]: HYPERBROWSER_MCP_CONFIG,
   [HostedIntegrationType.Audiense]: AUDIENSE_MCP_CONFIG,
+  [HostedIntegrationType.Apify]: APIFY_MCP_CONFIG,
 }

packages/web-ui/src/ds/atoms/Icons/custom-icons/logos/Apify.tsx

@@ -0,0 +1,22 @@
+import { type LucideProps } from 'lucide-react'
+
+export default function Apify(props: LucideProps) {
+  return (
+    <svg viewBox='0 0 131.8 135.3' fill='none' {...props}>
+      <g>
+        <path
+          d='M16.6,12.6C6,14.1-1.3,23.8,0.2,34.3l11.4,81.2L59.3,6.6L16.6,12.6z'
+          fill='currentColor'
+        ></path>
+        <path
+          d='M131.8,80.2l-4.5-62.4c-0.8-10.6-10-18.5-20.5-17.8c-0.4,0-0.9,0.1-1.3,0.1L87.1,2.7l40.5,90.9C130.6,89.9,132.1,85.1,131.8,80.2z'
+          fill='currentColor'
+        ></path>
+        <path
+          d='M28.9,135.2c3.3,0.4,6.6-0.1,9.6-1.4l69.5-29.4L75,30.2L28.9,135.2z'
+          fill='currentColor'
+        ></path>
+      </g>
+    </svg>
+  )
+}

packages/web-ui/src/ds/atoms/Icons/index.tsx

@@ -142,6 +142,7 @@ import Telegram from './custom-icons/logos/Telegram'
 import Tinybird from './custom-icons/logos/Tinybird'
 import TwitterX from './custom-icons/logos/TwitterX'
 import Wordpress from './custom-icons/logos/Wordpress'
+import Apify from './custom-icons/logos/Apify'
 
 const Icons = {
   // hubspot: Hubspot,
@@ -150,6 +151,7 @@ const Icons = {
   airtable: Airtable,
   alert: CircleAlert,
   alertCircle: AlertCircle,
+  apify: Apify,
   appWindow: AppWindow,
   arrowDown: ArrowDownIcon,
   arrowLeft: ArrowLeft,