Add hosted server connector guide and improve OG cards
- New connectors page with setup steps for Claude.ai, ChatGPT, Claude Desktop, Claude Code, and generic MCP clients - OG cards: gradient bg, left-accent border, larger title/logo, visible description text - Splash page: hosted server section with quick-connect cards - Quickstart: aside linking to no-install hosted option
This commit is contained in:
parent
30b2ace966
commit
87398e05f4
144
docs/src/content/docs/getting-started/connectors.mdx
Normal file
144
docs/src/content/docs/getting-started/connectors.mdx
Normal file
@ -0,0 +1,144 @@
|
||||
---
|
||||
title: Connect to the Hosted Server
|
||||
description: Use mcnoaa-tides from Claude.ai, ChatGPT, Claude Desktop, or any MCP client — no install needed
|
||||
sidebar:
|
||||
order: 3
|
||||
---
|
||||
|
||||
import { Aside, Steps, TabItem, Tabs } from '@astrojs/starlight/components';
|
||||
|
||||
A public instance of mcnoaa-tides runs at:
|
||||
|
||||
```
|
||||
https://mcp.mcnoaa-tides.warehack.ing/
|
||||
```
|
||||
|
||||
No API keys, no authentication, no local install. Connect from your browser
|
||||
and start asking about tides.
|
||||
|
||||
<Aside type="tip">
|
||||
Want lower latency or offline access? Install locally with `uvx mcnoaa-tides`
|
||||
— see the [Quickstart](/getting-started/quickstart/) for setup.
|
||||
</Aside>
|
||||
|
||||
---
|
||||
|
||||
## Claude.ai
|
||||
|
||||
Available on **Pro**, **Max**, **Team**, and **Enterprise** plans.
|
||||
|
||||
<Steps>
|
||||
|
||||
1. Open [claude.ai](https://claude.ai) and go to **Settings**
|
||||
|
||||
2. Select **Connectors** in the sidebar
|
||||
|
||||
3. Click **Add custom connector**
|
||||
|
||||
4. Paste the server URL:
|
||||
|
||||
```
|
||||
https://mcp.mcnoaa-tides.warehack.ing/
|
||||
```
|
||||
|
||||
5. No authentication needed — leave auth fields empty and save
|
||||
|
||||
</Steps>
|
||||
|
||||
Once connected, ask Claude something like *"When's the next high tide in
|
||||
Seattle?"* and it will call the server directly.
|
||||
|
||||
Works on Claude iOS and Android too, once configured through the web interface.
|
||||
|
||||
---
|
||||
|
||||
## ChatGPT
|
||||
|
||||
Available on **Plus**, **Team**, **Enterprise**, and **Edu** plans.
|
||||
|
||||
<Steps>
|
||||
|
||||
1. Open [chatgpt.com](https://chatgpt.com) and go to **Settings**
|
||||
|
||||
2. Under **Advanced**, enable **Developer Mode**
|
||||
|
||||
3. Go to **Settings → Connectors**
|
||||
|
||||
4. Click **Create** and fill in:
|
||||
- **Name:** NOAA Tides
|
||||
- **URL:** `https://mcp.mcnoaa-tides.warehack.ing/`
|
||||
|
||||
5. No OAuth needed — save without configuring auth
|
||||
|
||||
</Steps>
|
||||
|
||||
Once added, ChatGPT can call the server's tools in any conversation. Works
|
||||
across web, desktop, and mobile.
|
||||
|
||||
---
|
||||
|
||||
## Claude Desktop
|
||||
|
||||
Add the server URL to your Claude Desktop config file:
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="macOS">
|
||||
Edit `~/Library/Application Support/Claude/claude_desktop_config.json`:
|
||||
</TabItem>
|
||||
<TabItem label="Windows">
|
||||
Edit `%APPDATA%\Claude\claude_desktop_config.json`:
|
||||
</TabItem>
|
||||
<TabItem label="Linux">
|
||||
Edit `~/.config/Claude/claude_desktop_config.json`:
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"mcnoaa-tides": {
|
||||
"url": "https://mcp.mcnoaa-tides.warehack.ing/"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Restart Claude Desktop. The server's 14 tools, 4 prompts, and 3 resources
|
||||
will be available immediately.
|
||||
|
||||
---
|
||||
|
||||
## Claude Code
|
||||
|
||||
Register the remote server with a single command:
|
||||
|
||||
```bash
|
||||
claude mcp add mcnoaa-tides --transport http https://mcp.mcnoaa-tides.warehack.ing/
|
||||
```
|
||||
|
||||
That's it. Claude Code connects on the next session.
|
||||
|
||||
---
|
||||
|
||||
## Any MCP Client
|
||||
|
||||
If your client supports MCP's Streamable HTTP transport, point it at:
|
||||
|
||||
| Field | Value |
|
||||
|-------|-------|
|
||||
| **Endpoint** | `https://mcp.mcnoaa-tides.warehack.ing/` |
|
||||
| **Transport** | Streamable HTTP |
|
||||
| **Auth** | None required |
|
||||
| **Capabilities** | 14 tools, 4 prompts, 3 resources |
|
||||
|
||||
Most clients accept a JSON config — the minimal block looks like:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"mcnoaa-tides": {
|
||||
"url": "https://mcp.mcnoaa-tides.warehack.ing/"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -5,12 +5,18 @@ sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
import { Steps } from '@astrojs/starlight/components';
|
||||
import { Aside, Steps } from '@astrojs/starlight/components';
|
||||
|
||||
This guide walks through adding **mcnoaa-tides** to Claude Code and making
|
||||
your first three requests: finding a station, pulling tide predictions, and
|
||||
checking marine conditions.
|
||||
|
||||
<Aside>
|
||||
**Don't want to install anything?** Connect to the hosted server directly from
|
||||
[Claude.ai, ChatGPT, or Claude Desktop](/getting-started/connectors/) — no
|
||||
local setup needed.
|
||||
</Aside>
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) installed
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: mcnoaa-tides
|
||||
description: Tides, weather, and conditions from 300 U.S. coastal stations
|
||||
template: splash
|
||||
hero:
|
||||
tagline: Tides, weather, and conditions from 300 U.S. coastal stations
|
||||
@ -227,3 +228,32 @@ Then register it with your MCP client. Most accept a JSON config:
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="splash-section">
|
||||
|
||||
## Try the hosted server
|
||||
|
||||
A public instance runs at `https://mcp.mcnoaa-tides.warehack.ing/` —
|
||||
no install needed. Connect from your browser.
|
||||
|
||||
<CardGrid>
|
||||
<Card title="Claude.ai" icon="laptop">
|
||||
**Settings → Connectors → Add custom connector** — paste the URL and save.
|
||||
No auth needed.
|
||||
|
||||
Available on Pro, Max, Team, and Enterprise plans.
|
||||
</Card>
|
||||
<Card title="ChatGPT" icon="setting">
|
||||
**Settings → Developer Mode → Connectors → Create** — name it "NOAA Tides",
|
||||
paste the URL, save.
|
||||
|
||||
Available on Plus, Team, Enterprise, and Edu plans.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<LinkCard
|
||||
title="Full setup guide for all clients"
|
||||
href="/getting-started/connectors/"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
@ -12,19 +12,19 @@ export const { getStaticPaths, GET } = await OGImageRoute({
|
||||
getImageOptions: (_id, page: (typeof pages)[number]) => ({
|
||||
title: page.data.title,
|
||||
description: page.data.description,
|
||||
bgGradient: [[10, 21, 23]],
|
||||
border: { color: [26, 138, 143], width: 20 },
|
||||
padding: 120,
|
||||
bgGradient: [[10, 21, 23], [13, 30, 35]],
|
||||
border: { color: [26, 138, 143], width: 16, side: "inline-start" },
|
||||
padding: 80,
|
||||
font: {
|
||||
title: {
|
||||
size: 64,
|
||||
size: 72,
|
||||
weight: "Bold",
|
||||
color: [232, 240, 240],
|
||||
families: ["Inter"],
|
||||
},
|
||||
description: {
|
||||
size: 28,
|
||||
color: [196, 212, 214],
|
||||
size: 30,
|
||||
color: [143, 168, 172],
|
||||
families: ["Inter"],
|
||||
},
|
||||
},
|
||||
@ -34,7 +34,7 @@ export const { getStaticPaths, GET } = await OGImageRoute({
|
||||
],
|
||||
logo: {
|
||||
path: "./public/favicon.svg",
|
||||
size: [60],
|
||||
size: [80],
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user