Test Neon MCP Server in React Server Components
RSC Demo using Neon's MCP Server and Waku ⛩️
PaulieScanlon
README
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
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
MCP Package Docs Server
Facilitates LLMs to efficiently access and fetch structured documentation for packages in Go, Python, and NPM, enhancing software development with multi-language support and performance optimization.
Claude Code MCP
An implementation of Claude Code as a Model Context Protocol server that enables using Claude's software engineering capabilities (code generation, editing, reviewing, and file operations) through the standardized MCP interface.
@kazuph/mcp-taskmanager
Model Context Protocol server for Task Management. This allows Claude Desktop (or any MCP client) to manage and execute tasks in a queue-based system.
Linear MCP Server
Enables interaction with Linear's API for managing issues, teams, and projects programmatically through the Model Context Protocol.
mermaid-mcp-server
A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.
Jira-Context-MCP
MCP server to provide Jira Tickets information to AI coding agents like Cursor
Linear MCP Server
A Model Context Protocol server that integrates with Linear's issue tracking system, allowing LLMs to create, update, search, and comment on Linear issues through natural language interactions.
Sequential Thinking MCP Server
This server facilitates structured problem-solving by breaking down complex issues into sequential steps, supporting revisions, and enabling multiple solution paths through full MCP integration.