Introduction.tsx•2.72 kB
import Image from 'next/image';
import { cn } from '@/lib/utils';
import { ExternalLink } from '@/components/ExternalLink';
import { CopyableUrl } from '@/components/CopyableUrl';
export const Introduction = ({ className }: { className?: string }) => (
<div className={cn('flex flex-col gap-2', className)}>
<desc className="text-xl mb-2">
Manage your Neon Postgres databases with natural language.
</desc>
<CopyableUrl url="https://mcp.neon.tech/mcp" />
<div>
The <strong className="font-semibold">Neon MCP Server</strong> lets AI
agents and dev tools like Cursor interact with Neon by translating plain
English into{' '}
<ExternalLink href="https://api-docs.neon.tech/reference/getting-started-with-neon-api">
Neon API
</ExternalLink>{' '}
calls—no code required. You can create databases, run queries, and make
schema changes just by typing commands like "Create a database named
'my-new-database'" or "List all my Neon projects".
</div>
<div>
Built on the{' '}
<ExternalLink href="https://modelcontextprotocol.org/">
Model Context Protocol (MCP)
</ExternalLink>
, the server bridges natural language and the Neon API to support actions
like creating projects, managing branches, running queries, and handling
migrations.
<br />
<ExternalLink href="https://neon.tech/docs/ai/neon-mcp-server">
Learn more in the docs
</ExternalLink>
</div>
<div className="mt-4">
<h3 className="text-lg font-semibold mb-2">Read-Only Version</h3>
<div className="flex flex-col gap-3">
<div>
<p className="text-sm mb-2">
Safe for cloud environments. All transactions are read-only -
perfect for querying and analyzing data without modification risks.
</p>
<p className="text-xs text-gray-600">
Enable read-only mode by adding the{' '}
<code className="bg-gray-100 px-1 py-0.5 rounded text-xs">
x-read-only: true
</code>{' '}
header in your MCP configuration.
</p>
</div>
<a
href="https://cursor.com/en-US/install-mcp?name=Neon%20MCP%20Server&config=eyJ1cmwiOiJodHRwOi8vbWNwLm5lb24udGVjaC9tY3AiLCJoZWFkZXJzIjp7IngtcmVhZC1vbmx5IjoidHJ1ZSJ9fQ%3D%3D"
target="_blank"
rel="noopener noreferrer"
>
<Image
alt="Add to Cursor"
src="https://cursor.com/deeplink/mcp-install-light.svg"
className="invert dark:invert-0"
width={126}
height={32}
/>
</a>
</div>
</div>
</div>
);