# AI and Automation Integrations

OmniSocials connects to AI assistants and coding tools through two protocols: MCP (Model Context Protocol) and Agent Skills. Both use your OmniSocials API key and expose the same capabilities: create posts, upload media, list accounts, read analytics, and manage webhooks. Automation platforms (Zapier, Make, n8n, Slack) will land here too as they ship.

Pick the integration that matches the tool you use:

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px', marginTop: '24px', marginBottom: '32px' }}>
  <a href="/integrations/claude" style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px', border: '1px solid hsl(var(--border))', borderRadius: '12px', textDecoration: 'none', color: 'inherit' }}>
    <img src="https://app.omnisocials.com/icons/integrations/claude.svg" alt="Claude" width="40" height="40" style={{ width: '40px', height: '40px', maxWidth: '40px', maxHeight: '40px', flexShrink: 0, borderRadius: '8px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Claude</div>
      <div style={{ fontSize: '13px', color: 'hsl(var(--muted-foreground))' }}>claude.ai, Claude Desktop, Claude Code</div>
    </div>
  </a>
  <a href="/integrations/chatgpt" style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px', border: '1px solid hsl(var(--border))', borderRadius: '12px', textDecoration: 'none', color: 'inherit' }}>
    <img src="https://app.omnisocials.com/icons/integrations/chatgpt.svg" alt="ChatGPT" width="40" height="40" style={{ width: '40px', height: '40px', maxWidth: '40px', maxHeight: '40px', flexShrink: 0, borderRadius: '8px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>ChatGPT</div>
      <div style={{ fontSize: '13px', color: 'hsl(var(--muted-foreground))' }}>Connect via OAuth, any ChatGPT plan</div>
    </div>
  </a>
  <a href="/integrations/grok" style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px', border: '1px solid hsl(var(--border))', borderRadius: '12px', textDecoration: 'none', color: 'inherit' }}>
    <img src="https://app.omnisocials.com/icons/integrations/grok.png" alt="Grok" width="40" height="40" style={{ width: '40px', height: '40px', maxWidth: '40px', maxHeight: '40px', flexShrink: 0, borderRadius: '8px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Grok</div>
      <div style={{ fontSize: '13px', color: 'hsl(var(--muted-foreground))' }}>Custom MCP connector on grok.com</div>
    </div>
  </a>
  <a href="/integrations/notion" style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px', border: '1px solid hsl(var(--border))', borderRadius: '12px', textDecoration: 'none', color: 'inherit' }}>
    <img src="https://app.omnisocials.com/icons/integrations/notion.svg" alt="Notion" width="40" height="40" style={{ width: '40px', height: '40px', maxWidth: '40px', maxHeight: '40px', flexShrink: 0, borderRadius: '8px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Notion</div>
      <div style={{ fontSize: '13px', color: 'hsl(var(--muted-foreground))' }}>Notion Agents via MCP Tools</div>
    </div>
  </a>
  <a href="/integrations/openclaw" style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px', border: '1px solid hsl(var(--border))', borderRadius: '12px', textDecoration: 'none', color: 'inherit' }}>
    <img src="https://app.omnisocials.com/icons/integrations/openclaw.svg" alt="OpenClaw" width="40" height="40" style={{ width: '40px', height: '40px', maxWidth: '40px', maxHeight: '40px', flexShrink: 0, borderRadius: '8px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>OpenClaw</div>
      <div style={{ fontSize: '13px', color: 'hsl(var(--muted-foreground))' }}>Personal AI assistant with MCP support</div>
    </div>
  </a>
  <a href="/mcp-server" style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px', border: '1px solid hsl(var(--border))', borderRadius: '12px', textDecoration: 'none', color: 'inherit' }}>
    <img src="https://app.omnisocials.com/icons/integrations/mcp.svg" alt="MCP" width="40" height="40" style={{ width: '40px', height: '40px', maxWidth: '40px', maxHeight: '40px', flexShrink: 0, borderRadius: '8px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>MCP Server</div>
      <div style={{ fontSize: '13px', color: 'hsl(var(--muted-foreground))' }}>Cursor, Windsurf, and any MCP client</div>
    </div>
  </a>
  <a href="/integrations/agent-skills" style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px', border: '1px solid hsl(var(--border))', borderRadius: '12px', textDecoration: 'none', color: 'inherit' }}>
    <img src="https://app.omnisocials.com/icons/integrations/ai-agent-skills.svg" alt="Agent Skills" width="40" height="40" style={{ width: '40px', height: '40px', maxWidth: '40px', maxHeight: '40px', flexShrink: 0, borderRadius: '8px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Agent Skills</div>
      <div style={{ fontSize: '13px', color: 'hsl(var(--muted-foreground))' }}>For non-MCP tools: Codex, Copilot, Gemini</div>
    </div>
  </a>
</div>

## MCP vs Agent Skills

Both approaches give an AI agent the same capabilities. They differ in how they connect.

| | MCP Server | Agent Skills |
|---|---|---|
| **Works with** | MCP-compatible clients (Claude, ChatGPT, Cursor, Notion, etc.) | Any AI tool that can run shell commands |
| **Transport** | Structured protocol (stdio or HTTP) | CLI + SKILL.md instruction file |
| **Install** | `npx -y @omnisocials/mcp-server` or remote URL | `npx skills add OmniSocials/omnisocials-agent-skills` |
| **Best for** | Tools with native MCP support | Codex, Copilot, Gemini CLI, and other non-MCP tools |

Both use the same API key and expose the same set of tools. You can run both in parallel with no conflict.

## Coming soon

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '12px', marginTop: '16px' }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '14px', border: '1px solid hsl(var(--border))', borderRadius: '12px', opacity: 0.6 }}>
    <img src="https://app.omnisocials.com/icons/integrations/raycast.svg" alt="Raycast" width="28" height="28" style={{ width: '28px', height: '28px', maxWidth: '28px', maxHeight: '28px', flexShrink: 0, borderRadius: '6px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Raycast</div>
      <div style={{ fontSize: '12px', color: 'hsl(var(--muted-foreground))' }}>Draft and schedule posts from Raycast</div>
    </div>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '14px', border: '1px solid hsl(var(--border))', borderRadius: '12px', opacity: 0.6 }}>
    <img src="https://app.omnisocials.com/icons/integrations/zapier.svg" alt="Zapier" width="28" height="28" style={{ width: '28px', height: '28px', maxWidth: '28px', maxHeight: '28px', flexShrink: 0, borderRadius: '6px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Zapier</div>
      <div style={{ fontSize: '12px', color: 'hsl(var(--muted-foreground))' }}>Connect with thousands of apps</div>
    </div>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '14px', border: '1px solid hsl(var(--border))', borderRadius: '12px', opacity: 0.6 }}>
    <img src="https://app.omnisocials.com/icons/integrations/make.svg" alt="Make" width="28" height="28" style={{ width: '28px', height: '28px', maxWidth: '28px', maxHeight: '28px', flexShrink: 0, borderRadius: '6px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Make.com</div>
      <div style={{ fontSize: '12px', color: 'hsl(var(--muted-foreground))' }}>Visual automation scenarios</div>
    </div>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '14px', border: '1px solid hsl(var(--border))', borderRadius: '12px', opacity: 0.6 }}>
    <img src="https://app.omnisocials.com/icons/integrations/n8n.svg" alt="n8n" width="28" height="28" style={{ width: '28px', height: '28px', maxWidth: '28px', maxHeight: '28px', flexShrink: 0, borderRadius: '6px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>n8n</div>
      <div style={{ fontSize: '12px', color: 'hsl(var(--muted-foreground))' }}>Self-hosted automation workflows</div>
    </div>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '14px', border: '1px solid hsl(var(--border))', borderRadius: '12px', opacity: 0.6 }}>
    <img src="https://app.omnisocials.com/icons/integrations/slack.svg" alt="Slack" width="28" height="28" style={{ width: '28px', height: '28px', maxWidth: '28px', maxHeight: '28px', flexShrink: 0, borderRadius: '6px' }} />
    <div>
      <div style={{ fontWeight: 600, fontSize: '14px' }}>Slack</div>
      <div style={{ fontSize: '12px', color: 'hsl(var(--muted-foreground))' }}>Real-time notifications and updates</div>
    </div>
  </div>
</div>