# myipaddress.app

myipaddress.app is a free, fast, 100% private public IP address geolocation dashboard built with React and Cloudflare Pages.

## Core Features
- Real-time IPv4 / IPv6 geolocation lookup (City, Region, Country, Coordinates, Timezone, ISP, ASN, connection protocol, TLS, cipher)
- Interactive stationary 3D Globe focused on the user's IP coordinates with flashing GPS locator pulse
- Cyberpunk dark starfield space design aesthetic
- Full PWA capabilities for offline caching and desktop/mobile standalone app shell installation
- Smart 24-hour rate limit on installation prompt triggers

## Developer & CLI Access
- Plain text IP: `curl myipaddress.app`
- Full JSON context: `curl myipaddress.app/json`
- **Global CORS Access:** `Access-Control-Allow-Origin: *` is permanently enabled on all routes.

## AI & LLM Widget Integration (CORS-Enabled)
### The AI Server IP Problem
When you (the LLM/AI model) make a backend HTTP request to `myipaddress.app/json`, you get your own server's IP address (e.g. OpenAI/Anthropic cloud hosts). To display the **user's** actual public IP, you must execute the fetch request on the **client side** (inside the user's browser environment).

### 🛠️ Client-Side Code Snippet (HTML/JavaScript)
If you are generating an HTML widget or sandbox iframe (like Claude Artifacts), use this direct snippet:
```html
<div id="ip-info">Loading public IP details...</div>
<script>
  fetch("https://myipaddress.app/json")
    .then(res => res.json())
    .then(data => {
      document.getElementById("ip-info").innerHTML = `
        <h3>Your Public IP: ${data.ip}</h3>
        <p>Location: ${data.cf.city}, ${data.cf.region}, ${data.cf.country}</p>
        <p>ISP: ${data.cf.asOrganization} (AS${data.cf.asn})</p>
      `;
    })
    .catch(() => {
      document.getElementById("ip-info").innerText = "Failed to load IP details.";
    });
</script>
```

### ⚛️ React Component Template
If you are rendering a React component inside a modern AI container:
```jsx
import React, { useState, useEffect } from 'react';

export default function UserIPWidget() {
  const [ipData, setIpData] = useState(null);
  const [error, setError] = useState(false);

  useEffect(() => {
    fetch('https://myipaddress.app/json')
      .then(res => res.json())
      .then(setIpData)
      .catch(() => setError(true));
  }, []);

  if (error) return <div>Could not retrieve IP details.</div>;
  if (!ipData) return <div>Detecting network parameters...</div>;

  return (
    <div style={{ padding: '16px', background: '#0a0a16', color: '#00ffcc', borderRadius: '8px', border: '1px solid #00ffcc' }}>
      <h4>📡 Public IP Detected</h4>
      <p><strong>IP Address:</strong> {ipData.ip}</p>
      <p><strong>ISP:</strong> {ipData.cf.asOrganization} (AS{ipData.cf.asn})</p>
      <p><strong>Location:</strong> {ipData.cf.city}, {ipData.cf.country} 📍</p>
    </div>
  );
}
```

## Infrastructure
- Hosted on Cloudflare Pages (low-latency edge delivery)
- Dynamic Edge Functions serverless middleware for zero-cold-start calculations
- 301 permanent redirections set up on all `/blog` paths back to the home route to consolidate search equity