DEV Community

Prashant Iyenga
Prashant Iyenga

Posted on • Originally published at Medium on

Claude AI MCP Integration and nGrok: Secure Tunnels to Your Local Development Environment

#aritificialintellige #aiagentdevelopment #claudemcp #ai

Introduction

This technical article explores the integration of Anthropic’s Claude Message Context Protocol (MCP) with nGrok secure tunneling technology to establish robust connections between cloud-based AI systems and local development environments. We will demonstrate the implementation process for configuring a development MCP server, exposing it securely through nGrok’s encrypted tunneling infrastructure, and validating the configuration using the Claude API platform.

The combination of these technologies enables developers to prototype and test AI-powered applications with enterprise-grade security protocols while maintaining the flexibility and rapid iteration capabilities of local development environments. This approach eliminates the need to deploy applications to staging environments during development, while still allowing for secure, real-time communication with cloud-based large language models.

What is Claude MCP

MCP is an open protocol that standardizes how applications provide context to LLMs. MCP provides a standardized way to connect AI models to various data sources and tools, helping you build agents and complex workflows on top of LLMs. It does so by allowing servers to expose tools that language models can invoke. Tools enable models to interact with external systems, such as querying databases, calling APIs, or performing computations. A name uniquely identifies each tool and includes metadata describing its schema.

What is ngrok?

ngrok is a powerful command-line tool and service that creates secure tunnels from public URLs to your local development server. It acts as a reverse proxy, allowing you to expose your locally running applications to the internet without the need for complex network configurations, port forwarding, or deploying to a staging server.

When you run ngrok, it establishes a secure connection to ngrok’s cloud service, which then provides you with a public URL that forwards traffic to your local application. This URL can be accessed from anywhere on the internet, making it invaluable for development, testing, and demonstration purposes.

How Claude MCP Works

When you ask a question:

  • The client sends your question to Claude
  • Claude analyzes the available tools and decides which one(s) to use
  • The client executes the chosen tool(s) through the MCP server
  • The results are sent back to Claude
  • Claude formulates a natural language response
  • The response is displayed to you!

How ngrok Works

ngrok operates through a simple yet elegant architecture. When you start ngrok, it creates an encrypted tunnel between your local machine and ngrok’s edge servers. These servers then route incoming requests from the public internet through this tunnel to your local application.

The process involves several components: the ngrok client running on your machine, the ngrok service in the cloud, and the secure tunnel connecting them. All traffic passes through this encrypted tunnel, ensuring that your local development environment remains secure while being accessible from the internet.

NGROK Installation Guide

Installing ngrok on Different Platforms

macOS Installation: The easiest way to install ngrok on macOS is through Homebrew:

brew install ngrok/ngrok/ngrok
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can download the binary directly from the ngrok website and add it to your PATH.

Windows Installation: For Windows users, you can download the executable from the ngrok website and either run it directly or add it to your system PATH. Windows users can also use package managers like Chocolatey:

choco install ngrok
Enter fullscreen mode Exit fullscreen mode

Linux Installation: Linux users can download the appropriate binary for their architecture from the https://ngrok.com/downloads/linux . After downloading, extract the binary and move it to a directory in your PATH:

curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
  | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \
  && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" \
  | sudo tee /etc/apt/sources.list.d/ngrok.list \
  && sudo apt update \
  && sudo apt install ngrok

# Or

sudo tar -xvzf ~/Downloads/ngrok-v3-stable-linux-amd64.tgz -C /usr/local/bin
Enter fullscreen mode Exit fullscreen mode

Account Setup and Authentication

While ngrok can be used without an account for basic functionality, creating a free account provides additional features and removes some limitations. After creating an account on the ngrok website, you’ll receive an authentication token.

To configure ngrok with your authentication token:

ngrok config add-authtoken YOUR_AUTH_TOKEN
Enter fullscreen mode Exit fullscreen mode

This command stores your authentication token in ngrok’s configuration file, allowing you to access premium features and remove the time restrictions on free tunnels.

Basic Usage Examples

Exposing a Local Web Server

The most common use case is exposing a local web server. If you have a web application running on port 3000:

ngrok http 8000
Enter fullscreen mode Exit fullscreen mode

This command creates a tunnel to your local server and provides you with a public URL that looks like https://abc123.ngrok.io.

Exposing Other Protocols

ngrok isn’t limited to HTTP traffic. You can expose TCP services as well:

ngrok tcp 22
Enter fullscreen mode Exit fullscreen mode

This would expose your local SSH server to the internet, though this should be done with caution for security reasons.

Custom Subdomains

With a paid ngrok account, you can specify custom subdomains:

ngrok http --subdomain=myapp 3000
Enter fullscreen mode Exit fullscreen mode

This creates a tunnel with a predictable URL like https://myapp.ngrok.io.

MCP Development server

ngrok excels at allowing developers to test their applications with real-world scenarios without deploying to a staging environment. You can quickly share your work-in-progress application with team members, clients, or stakeholders by simply sharing the ngrok URL.

We host an MCP Server that provides crypto current market information

  • The application is hosted using FastAPI Server
  • The data is obtained using CoinMarketCap platform API

The function definition is as follows

@app.get("/api/currency-info")
async def get_currency_info(
    exchange: CryptoExchange = Depends(get_exchange),
    symbols: str = Query(None, description="Comma-separated list of currency symbols (e.g., BTC,ETH,ADA)"),
    convert: str = Query("USD", description="Currency to convert values to (e.g., USD, EUR)")
):
    """Get detailed currency information from CoinMarketCap including market cap, supply, and price metrics"""
Enter fullscreen mode Exit fullscreen mode

The output of the function for input currency BTC is as follows

{
  "data": {
    "BTC": {
      "id": 1,
      "name": "Bitcoin",
      "symbol": "BTC",
      "slug": "bitcoin",
      "cmc_rank": 1,
      "circulating_supply": 19887956,
      "total_supply": 19887956,
      "max_supply": 21000000,
      "last_updated": "2025-07-05T14:18:00.000Z",
      "pricing": {
        "price": 108244.86616819742,
        "volume_24h": 38435406044.59744,
        "volume_change_24h": -6.6511,
        "percent_change_1h": 0.03610656,
        "percent_change_24h": 0.41189629,
        "percent_change_7d": 0.95202959,
        "percent_change_30d": 4.04716341,
        "percent_change_60d": 14.83875876,
        "percent_change_90d": 31.23696181,
        "market_cap": 2152769135578.9988,
        "market_cap_dominance": 64.7036,
        "fully_diluted_market_cap": 2273142189532.15,
        "last_updated": "2025-07-05T14:18:00.000Z"
      },
      "additional_metrics": {
        "volume_to_mc_ratio": 0.017853937707194057,
        "market_dominance_percent": 100.0,
        "circulating_to_max_ratio": 94.70455238095238,
        "fully_diluted_valuation": 2273142189532.15
      }
    }
  },
  "convert": "USD",
  "count": 1,
  "timestamp": "2025-07-05T19:49:58.756412"
}
Enter fullscreen mode Exit fullscreen mode

We use the fastapi_mcp Python package https://github.com/tadata-org/fastapi\_mcp/tree/main which provides a facility to expose your FastAPI endpoints as Model Context Protocol (MCP) tools, with Auth!

from fastapi import APIRouter
from fastapi_mcp import FastApiMCP

other_router = APIRouter(prefix="/other/route")    
app.include_router(other_router)
# Mount the MCP server to a separate FastAPI app
mcp = FastApiMCP(app)
mcp.mount(other_router)

def run():
    uvicorn.run("app:app", host="0.0.0.0", port=8000, reload=True)
Enter fullscreen mode Exit fullscreen mode

We expose the MCP server at the route /other/route/mcp

Claude MCP Server configuration

Adding the MCP Server on the ngrok Endpoint as a Custom Integration

We have our MCP server running locally at port 8000 and listening on all interfaces 0.0.0.0. And since ngrok is set up to create a secure tunnel, we need to connect our MCP server to Claude by registering it as a custom integration.

Once your MCP server is running, use ngrok to create a secure tunnel to your local server:

ngrok http 8000
Enter fullscreen mode Exit fullscreen mode

After running this command, ngrok will display a URL (typically in the format https://xxxx-xxxx-xxxx.ngrok.io). Make note of this URL as you'll need it for the next step.

Register your MCP Server as a Custom Integration in Claude

  1. Navigate to the Claude AI Integrations
  2. Click “Add Integration”
  3. Enter the following details:
  1. Click “Create” to register your integration

Verify the Integration

After registering your custom integration, Click on Connect to verify that your MCP server is properly configured by:

  1. Checking that the MCP server URL is accessible
  2. Validating that the server correctly implements the MCP protocol
  3. Retrieving the list of available tools from your server

If the verification is successful, your integration will be marked as “Active” in the Claude Console.

Test the Integration in Claude

Now you can test your custom integration:

  • Start a new conversation in Claude
  • Check that your custom integration is visible and enabled in the tools section

  • Ask Claude a question that would require information from your crypto market data tool, such as “show the currency information for BTC in tabular format”
  • Claude will recognize the need to use your tool, make the appropriate API call through the MCP server, and provide you with the results.

We can see that the MCP Server is called with the request and the output response.

get_currency_info_api_currency_info_get

Request

{ symbols: BTC }

Response

{ "data": { "BTC": { "id": 1, "name": "Bitcoin", "symbol": "BTC", "slug": "bitcoin", "cmc_rank": 1, "circulating_supply": 19887987, "total_supply": 19887987, "max_supply": 21000000, "last_updated": "2025-07-05T16:37:00.000Z", "pricing": { "price": 107963.95555873076, "volume_24h": 33053849608.85693, "volume_change_24h": -23.731, "percent_change_1h": -0.1760637, "percent_change_24h": 0.35855272, "percent_change_7d": 0.48666905, "percent_change_30d": 3.83166081, "percent_change_60d": 14.07595308, "percent_change_90d": 31.15425869, "market_cap": 2147185744620.615, "market_cap_dominance": 64.6759, "fully_diluted_market_cap": 2267243066733.35, "last_updated": "2025-07-05T16:37:00.000Z" }, "additional_metrics": { "volume_to_mc_ratio": 0.015394033651568042, "market_dominance_percent": 100.0, "circulating_to_max_ratio": 94.7047, "fully_diluted_valuation": 2267243066733.35 } } }, "convert": "USD", "count": 1, "timestamp": "2025-07-05T22:08:34.125383" }
Enter fullscreen mode Exit fullscreen mode

Remember that while ngrok is ideal for development and testing, for production deployments, it is recommended to host your MCP server on a stable, secure infrastructure with a fixed URL, rather than relying on temporary ngrok tunnels.

Security Considerations

While ngrok is incredibly useful for development, it’s essential to understand the security implications. When you create a tunnel, you’re exposing your local application to the internet, which means anyone with the URL can potentially access it.

For sensitive applications, consider using ngrok’s authentication features, such as basic authentication or custom headers. Always be mindful of what data you’re exposing and avoid using ngrok tunnels for production applications unless you have specific security measures in place.

The ngrok service itself uses strong encryption for all tunnel traffic, ensuring that data passing through the tunnel remains secure. However, the endpoints themselves become publicly accessible, so proper application-level security remains crucial.

Conclusion

ngrok has become an essential tool in the modern developer’s toolkit, dramatically simplifying the process of testing, demonstrating, and integrating applications that require interaction with external services. Its ease of use, combined with powerful features, makes it invaluable for everything from simple webhook testing to complex IoT device development.

Top comments (0)