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

# Overview

> Every third-party service Magic Patterns connects to

Magic Patterns connects to the tools you already use for design, development, analytics, and collaboration.

You can access integrations from the chatbar within your design.

<img src="https://cdn.magicpatterns.com/uploads/kuq2RQ7CRV6vc9GcNruhae/integrations-chat-bar.png" alt="Integrations in the chatbar" />

## Design Tools

<CardGroup cols={2}>
  <Card title="Import from Figma" icon="figma" href="/documentation/importing/import-from-figma">
    Bring your Figma designs into Magic Patterns as editable code.
  </Card>

  <Card title="Export to Figma" icon="figma" href="/documentation/get-started/figma-plugin">
    Export your designs to Figma for handoff or further design work.
  </Card>
</CardGroup>

## Developer Tools

<CardGroup cols={2}>
  <Card title="Sync with GitHub" icon="github" href="/documentation/get-started/sync-to-github">
    Two-way sync between Magic Patterns and your GitHub repository.
  </Card>

  <Card title="MCP Server" icon="server" href="/documentation/features/mcp-server/overview">
    Connect your IDE or AI assistant to Magic Patterns via the Model Context
    Protocol.
  </Card>
</CardGroup>

## Connectors

Connectors let the AI assistant pull real context from external services into your designs. Connect via OAuth and the assistant handles the rest.

<CardGroup cols={2}>
  <Card title="Granola" icon="note-sticky" href="/documentation/connectors/connectors">
    Pull meeting notes and context into your designs.
  </Card>

  <Card title="Notion" icon="book" href="/documentation/connectors/connectors">
    Pull pages, databases, and content from your Notion workspace.
  </Card>

  <Card title="Linear" icon="list-check" href="/documentation/connectors/connectors">
    Pull issues, projects, and roadmaps from Linear.
  </Card>

  <Card title="PostHog" icon="chart-mixed" href="/documentation/connectors/connectors">
    Pull analytics, feature flags, and experiment data from PostHog.
  </Card>
</CardGroup>

You can also [add your own custom MCP server](/documentation/connectors/connectors#adding-a-custom-mcp-server) as a connector.

## In-Design Services

These integrations work inside your published designs. Add API calls, analytics tracking, email forms, and more directly in your code.

<CardGroup cols={2}>
  <Card title="OpenAI" icon="microchip-ai" href="/documentation/integrations/openai">
    Build AI-powered features using the OpenAI API.
  </Card>

  <Card title="Anthropic" icon="microchip-ai" href="/documentation/integrations/anthropic">
    Build AI-powered features using the Anthropic Claude API.
  </Card>

  <Card title="Google Sheets" icon="table" href="/documentation/integrations/google-sheets">
    Read and write data from Google Sheets.
  </Card>

  <Card title="EmailJS" icon="envelope" href="/documentation/integrations/emailjs">
    Send emails directly from your design without a backend.
  </Card>

  <Card title="Collecting Feedback" icon="comment" href="/documentation/integrations/collecting-feedback">
    Gather structured feedback from external users on your prototypes.
  </Card>
</CardGroup>

## E-commerce

<CardGroup cols={2}>
  <Card title="Shopify" icon="shop" href="/documentation/integrations/shopify">
    Create a landing page that links directly to your Shopify store and cart.
  </Card>
</CardGroup>

## Connected Accounts

<CardGroup cols={2}>
  <Card title="Connect to LinkedIn" icon="linkedin" href="/documentation/integrations/linkedin">
    Highlight your experience with Magic Patterns on your LinkedIn profile.
  </Card>
</CardGroup>

## Analytics

<CardGroup cols={2}>
  <Card title="Google Analytics" icon="chart-line" href="/documentation/integrations/google-analytics">
    Track page views and user behavior with Google Analytics.
  </Card>

  <Card title="PostHog" icon="chart-mixed" href="/documentation/integrations/posthog">
    Track events and user behavior with PostHog.
  </Card>

  <Card title="Meta Pixel" icon="meta" href="/documentation/integrations/meta-pixel">
    Track conversions and optimize ad campaigns with Meta Pixel.
  </Card>
</CardGroup>