About Person Search

Person Search is a full-stack application with MCP integration, enabling AI-powered database operations through Claude Desktop alongside traditional CRUD functionality.

App Overview

Person Search is a production-grade full-stack web application developed as part of a university coursework project. It supports the complete CRUD lifecycle — Create, Read, Update, Delete — for Person records, backed by a PostgreSQL database. Later, it was enhanced with an MCP (Model Context Protocol) server allowing Claude Desktop to manage Person data using natural language.

Built by Pearlshaline Gumiran, 3rd Year BSIT Student at St. Paul University Philippines.

MCP Integration Architecture

The MCP server bridges Claude Desktop and the Person database. When you ask Claude to manage persons, it calls MCP tools which perform real database operations.

You (User)Type natural language promptClaude Desktop
Claude DesktopCalls the matching MCP toolMCP Server
MCP ServerExecutes Prisma queryNeon Database
Neon DatabaseReturns result dataClaude Desktop
Claude DesktopPresents the result in chatYou (User)

MCP Tools

6 tools

list, get, create, update, delete, search

Protocol

MCP v1

Model Context Protocol by Anthropic

AI Client

Claude Desktop

Connects via stdio transport

Data Access

Prisma ORM

Type-safe PostgreSQL queries

App Architecture

01

Client Layer

React components using Next.js App Router. All interactive UI built with client components ("use client"). Forms, modals, and CRUD operations handled in the browser.

02

API Layer

Next.js API Routes at /api/persons handle all HTTP methods: GET (list/read), POST (create), PUT (update), DELETE (remove). RESTful design with proper status codes.

03

ORM Layer

Prisma Client provides type-safe database access. A singleton instance is shared across API routes to prevent connection pool exhaustion in development.

04

Database Layer

PostgreSQL hosted on Neon (serverless) stores all Person records. Prisma Migrate handles schema changes and version control of the database structure.

05

MCP Server Layer

A standalone Node.js MCP server exposes Person CRUD operations as tools. Claude Desktop connects to this server via the Model Context Protocol, enabling AI-powered database management.

Technology Stack

Next.js 15

React framework with App Router for server-side rendering and API routes

PostgreSQL + Prisma

Relational database with Prisma ORM for type-safe database queries

Tailwind CSS

Utility-first CSS framework for rapid, responsive UI development

TypeScript

Typed JavaScript for improved developer experience and code reliability

Vercel

Cloud deployment platform with automatic CI/CD and global CDN

GitHub

Version control and source code management for the project

MCP Protocol

Model Context Protocol enabling Claude Desktop to perform CRUD operations via AI tools

Claude Desktop

Anthropic's AI assistant that connects to the MCP server to manage Person data

CRUD Features

CREATE

Add new person via modal form or MCP tool

POST /api/persons
READ

List all persons with search/filter functionality

GET /api/persons
UPDATE

Edit existing person via form or MCP tool

PUT /api/persons/:id
DELETE

Remove person with confirmation or via MCP

DELETE /api/persons/:id