Skip to content

Commit 08380ce

Browse files
dbxryanvogelryan vogel
andauthored
Add mcp.neon.tech to the homepage for easy copying. (#117)
- Introduced the CopyableUrl component to allow users to easily copy the URL for the Neon MCP Server. - Enhanced the user experience by providing a direct link to the service within the Introduction component. Co-authored-by: ryan vogel <ryan@neon.tech>
1 parent 9280635 commit 08380ce

File tree

2 files changed

+35
-0
lines changed

2 files changed

+35
-0
lines changed

landing/components/CopyableUrl.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
5+
export const CopyableUrl = ({ url }: { url: string }) => {
6+
const [copied, setCopied] = useState(false);
7+
8+
const handleCopy = async () => {
9+
try {
10+
await navigator.clipboard.writeText(url);
11+
setCopied(true);
12+
setTimeout(() => setCopied(false), 2000);
13+
} catch (err) {
14+
console.error('Failed to copy:', err);
15+
}
16+
};
17+
18+
return (
19+
<div className="my-2 relative">
20+
<div className="monospaced whitespace-pre-wrap bg-secondary px-3 py-2 border-l-4 border-primary/20 rounded-r-md flex items-center justify-between group">
21+
<span className="text-sm">{url}</span>
22+
<button
23+
onClick={handleCopy}
24+
className="ml-3 px-2 py-1 text-xs bg-primary/10 hover:bg-primary/20 rounded transition-colors opacity-0 group-hover:opacity-100"
25+
title="Copy to clipboard"
26+
>
27+
{copied ? 'Copied!' : 'Copy'}
28+
</button>
29+
</div>
30+
</div>
31+
);
32+
};

landing/components/Introduction.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { cn } from '@/lib/utils';
22
import { ExternalLink } from '@/components/ExternalLink';
3+
import { CopyableUrl } from '@/components/CopyableUrl';
34

45
export const Introduction = ({ className }: { className?: string }) => (
56
<div className={cn('flex flex-col gap-2', className)}>
67
<desc className="text-xl mb-2">
78
Manage your Neon Postgres databases with natural language.
89
</desc>
910

11+
<CopyableUrl url="https://mcp.neon.tech/mcp" />
12+
1013
<div>
1114
The <strong className="font-semibold">Neon MCP Server</strong> lets AI
1215
agents and dev tools like Cursor interact with Neon by translating plain

0 commit comments

Comments
 (0)