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

# Connectors

> Connect your tools, databases, and apps to Magic Patterns for more relevant AI responses.

## What are Connectors?

Connectors let Magic Patterns work with your external tools, databases, and applications to give you more relevant responses. Powered by the [Model Context Protocol (MCP)](https://modelcontextprotocol.io), connectors allow the AI assistant to pull in real context from the services you already use -- like meeting notes, project issues, or analytics data -- and incorporate it directly into your designs.

When a connector is enabled, the AI assistant can discover and call tools exposed by the connected service. For example, if you connect Granola, the assistant can pull your recent meeting notes and use them to inform a design.

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/A-seva8EuqU?si=uNkGTbh3gjf05r0p" title="Introducing Connectors" alt="Introducing Connectors" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Available Connectors

Magic Patterns ships with built-in support for the following services:

| Connector   | Description                                                              |
| ----------- | ------------------------------------------------------------------------ |
| **Granola** | Pull meeting notes and context into your designs.                        |
| **Notion**  | Pull pages, databases, and content from your Notion workspace.           |
| **Linear**  | Pull issues, projects, and roadmaps from Linear.                         |
| **Jira**    | Pull issues, sprints, and project context from Atlassian Jira.           |
| **Miro**    | Pull boards, frames, and visual context from Miro.                       |
| **Mobbin**  | Pull real-world UI screens, user flows, and design patterns from Mobbin. |

More connectors are being added regularly. You can also [add your own custom MCP server](#adding-a-custom-mcp-server).

## Getting Started with Connectors

This walkthrough uses **Granola** as an example, but the steps are the same for any built-in connector.

<Steps>
  <Step title="Open the Connectors Menu">
    In the editor, open the prompt bar dropdown and select the **Connectors** section. You will see a list of available connectors you can connect.

    <Frame>
      <img src="https://cdn.magicpatterns.com/uploads/mD9fR7kytQYP8Ch6J6S5NB/pick-connector.png" alt="Connectors menu in the prompt bar" />
    </Frame>
  </Step>

  <Step title="Connect a Service">
    Click the connector you want to enable (e.g. Granola). An OAuth dialog will appear.
  </Step>

  <Step title="Authorize Access">
    Click **Connect with OAuth**. A popup window will open asking you to sign in and authorize Magic Patterns to access your account. Once you approve, the popup will close and the connector will show as **Connected**.

    <Frame>
      <img src="https://cdn.magicpatterns.com/uploads/g5y1JZmmGwMamJ5Bhwn7tH/granola-oauth.png" alt="OAuth authorization flow for Granola" />
    </Frame>
  </Step>

  <Step title="Use It in Your Prompts">
    Once connected, the AI assistant will automatically have access to the tools exposed by your connector. Just mention the data you need in your prompts and the assistant will pull it in:

    * "Pull my latest meeting notes from Granola and design a summary dashboard"
    * "What did we discuss in yesterday's standup? Use that to create a task board"

    The assistant handles the connector calls behind the scenes and incorporates the returned data into your design.
  </Step>
</Steps>

## Managing Connectors

<Frame>
  <img src="https://cdn.magicpatterns.com/uploads/scRUd2jRLCHtG3WccKQgG2/connectors.png" alt="Connectors settings page" />
</Frame>

From the **Connectors** section in Settings, you can:

* Enable / Disable a connector using the toggle switch. Disabled connectors are not used by the AI assistant but remain connected.
* Re-authenticate a connector by clicking the refresh icon. This is useful if your access token has expired.
* Disconnect a connector by clicking the trash icon. This removes the connector and its stored credentials entirely.

You can also manage connectors from the **Connectors** submenu in the editor prompt bar.

## Adding a Custom MCP Server

If your team runs a custom MCP server, you can connect it to Magic Patterns directly.

<Steps>
  <Step title="Open Connector Settings">
    In the editor, open the prompt bar dropdown and select the Connectors
    section. At the bottom, click Manage Connectors to open the Connectors
    settings page.
  </Step>

  <Step title="Click Add Custom Connector">
    On the Connectors settings page, click the Add Custom Connector button at
    the bottom of the list.
  </Step>

  <Step title="Enter Server Details">
    Provide a Name (how it will appear in the UI) and the MCP Server URL (for
    example, [https://mcp.yourcompany.com/mcp](https://mcp.yourcompany.com/mcp)).
  </Step>

  <Step title="Authenticate">
    After adding the connector, click Connect to begin the OAuth flow. Magic
    Patterns will automatically discover your server's OAuth endpoints via the
    standard well-known metadata endpoints.
  </Step>
</Steps>

<Warning>
  Only connect to MCP servers that you trust — Magic Patterns will be able to call any tools they expose. Your credentials are encrypted and never exposed to the frontend. Custom servers must support OAuth 2.0 and be publicly reachable.
</Warning>

## How It Works

Connectors use the **Model Context Protocol (MCP)**, an open standard for connecting AI assistants to external data sources and tools.

1. When you connect a service, Magic Patterns performs OAuth 2.1 dynamic client registration with the MCP server's authorization server.
2. OAuth endpoints are discovered automatically via well-known metadata -- no manual configuration needed.
3. When the AI assistant needs data from a connector, it calls the MCP server's tools using the stored access token.
4. Tool results are returned to the assistant and incorporated into its response. You can expand any connector tool call in the chat to see the raw result.