Test Neon MCP Server in React Server Components

This repository uses waku and React Server Components to demonstrate how to use Neon's MCP Server with the Anthropic API and a custom chat interface.

You can read more about this experiment on my blog: How to use Neon's MCP Server with React Server Components

Getting Started

This repo requires a Neon API key and an Anthropic API key. Rename .env.example to .env and update with your API keys

Install Dependencies

npm install

Run Development Server

npm run dev

💬 Chat

There are two components required to test Neon's MCP server with the Anthropic API. They are detailed below.

Chat Component (server only)

The <Chat /> Component located in src/components/chat.tsx is responsible for handling the server-side requests.

ChatForm Component (client only)

The <ChatForm /> Component located in src/components/chat-form.txt is responsible for handling the textarea input, and sending the message to the server.

Helpful Links

- Neon MCP Server (Docs)
- Neon MCP Server (GitHub)
- Smithery - Neon Database (Quick Start)
- Smithery Typescript SDK (GitHub)