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

# Claude.ai (Web) Setup

> Connect Claude.ai web interface to Civic

<Note>
  Claude.ai web interface supports direct MCP server connections. You'll need a Claude Pro or Team plan to access MCP connectors.
</Note>

## Prerequisites

<CardGroup cols={2}>
  <Card title="Claude Pro/Team Plan" icon="credit-card" href="https://claude.ai/upgrade">
    MCP connectors require a paid Claude subscription
  </Card>

  <Card title="Civic Account" icon="user" href="https://app.civic.com">
    Create a free account on app.civic.com
  </Card>
</CardGroup>

## Step 1: Set Up Your Civic Account

If you haven't already, create your account and select your tools at app.civic.com:

<Steps>
  <Step title="Create a free Civic account">
    Go to [app.civic.com](https://app.civic.com) and sign in with Google, GitHub, or email.
  </Step>

  <Step title="Select your MCP servers">
    During onboarding, choose which services you want your AI to access — GitHub, Slack, Google Workspace, Dropbox, and more. This creates your default toolkit.
  </Step>

  <Step title="Get your MCP URL">
    Your connection URL is the same for every Civic account:

    ```
    https://app.civic.com/hub/mcp
    ```

    The URL is not personalized — what makes it *yours* is authentication. When you connect your client and complete the OAuth flow, Civic links that session to your account and toolkit.
  </Step>
</Steps>

<Note>
  The MCP URL (`https://app.civic.com/hub/mcp`) is the same for every Civic user. What makes it yours is authentication — when you click **Connect** in Claude.ai, a browser window opens to app.civic.com and links that session to your account and toolkit.
</Note>

## Step 2: Add MCP Server in Claude.ai

<Steps>
  <Step title="Open Claude.ai Settings">
    1. Go to [claude.ai](https://claude.ai) in your web browser
    2. Click on **Settings** (usually in the bottom left or profile menu)
    3. Navigate to **Connectors**

    <Frame caption="Claude.ai Settings showing Connectors section">
      <img className="rounded-lg" src="https://mintcdn.com/civic/OEL28vRxta3iZcGh/images/steps/claude/02.png?fit=max&auto=format&n=OEL28vRxta3iZcGh&q=85&s=612fbf18974b4869b637a35b1475bc52" alt="Claude.ai settings page with Connectors section highlighted" width="3840" height="1916" data-path="images/steps/claude/02.png" />
    </Frame>
  </Step>

  <Step title="Add Custom Connector">
    1. Click **"Add Custom Connector"**
    2. Enter a name: **"Civic"**
    3. In "Remote MCP server URL" field, paste: `https://app.civic.com/hub/mcp`
    4. Click **"Add"** to confirm

    <Frame caption="Adding a custom MCP connector in Claude.ai">
      <img className="rounded-lg" src="https://mintcdn.com/civic/OEL28vRxta3iZcGh/images/steps/claude/03.png?fit=max&auto=format&n=OEL28vRxta3iZcGh&q=85&s=5444adba8eb9b941339f100552354503" alt="Claude.ai connector settings dialog" width="3840" height="1916" data-path="images/steps/claude/03.png" />
    </Frame>
  </Step>

  <Step title="Connect and Authenticate">
    1. The connector will appear in your list with a **"Connect"** button
    2. Click **"Connect"** to begin authentication
    3. Follow on-screen instructions to authorize access to your selected services
    4. Return to **Settings > Connectors** to verify it shows as "Connected"

    <Frame caption="Claude.ai connector successfully connected">
      <img className="rounded-lg" src="https://mintcdn.com/civic/OEL28vRxta3iZcGh/images/steps/claude/05.png?fit=max&auto=format&n=OEL28vRxta3iZcGh&q=85&s=16c5e4dc6b8a16dd8aa245c020c4a308" alt="Claude.ai showing connected Civic connector" width="3840" height="1916" data-path="images/steps/claude/05.png" />
    </Frame>
  </Step>
</Steps>

## Step 3: Test Your Connection

Try these commands to verify everything is working:

```
"What MCP servers are available?"
"Check my GitHub repositories"  
"What's in my Dropbox?"
"Show recent Slack messages"
```

<Frame caption="Claude.ai successfully using connected tools">
  <img className="rounded-lg" src="https://mintcdn.com/civic/OEL28vRxta3iZcGh/images/steps/claude/04.png?fit=max&auto=format&n=OEL28vRxta3iZcGh&q=85&s=597c1cf6999cf00d4356404ab6dc08eb" alt="Claude.ai chat showing successful tool usage" width="3840" height="1916" data-path="images/steps/claude/04.png" />
</Frame>

## Managing Your Tools

### Adding More Tools

You can add new tools directly in your Claude.ai chat:

```
"Connect me to GitHub"
"Add Slack to my available tools"  
"I need access to Dropbox"
"Show me what tools are available to connect"
```

Claude will handle the connection process and guide you through any required authentication steps.

### Removing Tools

To disconnect from specific tools, just ask in chat:

```
"Disconnect from Slack"
"Remove GitHub from my tools"
"What tools do I currently have connected?"
"Stop my access to Dropbox"
```

### Managing the Entire Connector

To remove the Civic connector completely:

<Steps>
  <Step title="Access connectors">
    Go to **Settings > Connectors** in Claude.ai
  </Step>

  <Step title="Remove connector">
    1. Find "Civic" in your connectors list
    2. Click **Remove** or **Delete** next to the connector
    3. Confirm the removal when prompted
  </Step>

  <Step title="Clean up (optional)">
    Visit [app.civic.com](https://app.civic.com) to revoke service authorizations if you no longer want Civic to have access
  </Step>
</Steps>

## Common Questions

<AccordionGroup>
  <Accordion title="Do I need a paid Claude plan?">
    Yes, MCP connectors are only available on Claude Pro and Team plans. The free plan doesn't support external integrations.
  </Accordion>

  <Accordion title="What if authentication fails?">
    * Make sure you're signed into the correct accounts for your connected services
    * Try removing and re-adding the connector with a fresh URL from app.civic.com
    * Check our [troubleshooting guide](/civic/troubleshooting) for more solutions
  </Accordion>

  <Accordion title="Can I use multiple connectors?">
    Yes! You can add multiple MCP connectors from different providers. Each will appear separately in your connectors list.
  </Accordion>

  <Accordion title="What happens to my data?">
    Data flows directly between Claude.ai and your connected services through Civic. See our [security details](/civic/reference/security) for more information.
  </Accordion>
</AccordionGroup>

## Need Help?

<CardGroup cols={2}>
  <Card title="Troubleshooting Guide" icon="wrench" href="/civic/troubleshooting">
    Solutions for common connection issues
  </Card>

  <Card title="Browse All Servers" icon="server" href="/civic/reference/servers">
    See all available MCP servers you can connect
  </Card>

  <Card title="Security Details" icon="shield-check" href="/civic/reference/security">
    Learn how Civic protects your data
  </Card>

  <Card title="Get Support" icon="slack" href="https://join.slack.com/t/civic-developers/shared_invite/zt-37tv9fyo7-aDT43mUjOFQwdQFmfZLTRw">
    Contact us for personalized help
  </Card>
</CardGroup>