MCP Note App

MCP Note App

A full-stack note-taking application with a React UI, Express/SQLite backend, real-time Server-Sent Events, JWT auth, and AI agent integration through the Model Context Protocol (MCP).

What You Get

• Create, edit, delete, tag, and search notes in a modern React interface.
• Live UI refreshes through SSE when notes change through REST or MCP tools.
• JWT-protected REST note routes with local API-key login.
• MCP SSE transport for AI clients and a Python Gemini-powered CLI agent.
• SQLite persistence via a repository layer.

Architecture

┌─────────────────┐     MCP/SSE      ┌──────────────────┐
│  Python Agent   │ ◄──────────────► │                  │
│  (Gemini AI)    │                  │  Node.js Server  │
│                 │     Tools        │  (MCP + REST)    │
└─────────────────┘                  │                  │
                                     │    SQLite DB     │
┌─────────────────┐     REST/SSE     │                  │
│  React Frontend │ ◄──────────────► │                  │
│ (Vite+Tailwind) │                  └──────────────────┘
└─────────────────┘

• Backend: TypeScript, Express, MCP server, SQLite (better-sqlite3), Zod, JWT.
• Frontend: React 18, Vite, Tailwind CSS, TanStack React Query, Zustand, SSE.
• Agent: Python MCP client connected to Google Gemini (gemini-2.5-flash by default).

Prerequisites

• Node.js 20+ recommended.
• npm.
• Python 3.10+ recommended.
• A Gemini API key for the optional Python agent.

Quick Start

1. Install dependencies

Install everything from the repository root:

npm run install:all

Or install each layer manually:

npm install --prefix server
npm install --prefix client-ui
python3 -m venv agent/.venv
agent/.venv/bin/python -m pip install -r agent/requirements.txt

Install the root orchestration dependency only if needed:

npm install

2. Configure environment

Create server/.env:

PORT=3000
NODE_ENV=development
JWT_SECRET=change-this-to-a-long-random-secret-at-least-32-chars
JWT_EXPIRY=15m
JWT_REFRESH_EXPIRY=7d
DATABASE_PATH=./data/notes.db
CORS_ORIGIN=http://localhost:5173
AUTH_TOKEN=dev-auth-token-change-in-production

Create agent/.env if you plan to use the Gemini agent:

GEMINI_API_KEY=your-gemini-api-key

Optional stdio transport variables for the agent:

MCP_STDIO_CMD=npx
MCP_STDIO_ARGS=tsx,server/src/index.ts

Do not commit .env files, API keys, JWT secrets, or local SQLite database files.

3. Start the app

Start backend and frontend together:

npm run dev

Or run them separately:

npm run dev:server
npm run dev:client

Then open the frontend at http://localhost:5173.

4. Start the AI agent

Make sure the backend is running first, then run:

npm run dev:agent

One-shot example:

agent/.venv/bin/python agent/agent.py --one-shot "Create a note titled Demo with content Hello from Gemini"

Scripts

Run these from the repository root unless noted otherwise.

Project Structure

mcp-note-app/
├── server/                          # Express REST API, MCP server, SQLite persistence
│   ├── src/
│   │   ├── auth/                    # JWT signing and verification
│   │   ├── config/                  # Environment validation
│   │   ├── db/                      # SQLite connection and schema
│   │   ├── events/                  # Event bus and SSE handlers
│   │   ├── mcp/                     # MCP tool server and transports
│   │   ├── middleware/              # Auth, CORS, error handling
│   │   ├── repositories/            # NoteRepository + SQLite implementation
│   │   ├── routes/                  # Notes REST routes and live updates
│   │   ├── types.ts                 # Zod schemas and shared backend types
│   │   └── index.ts                 # Express entry point
│   └── package.json
├── client-ui/                       # React frontend
│   ├── e2e/                         # Playwright tests
│   ├── src/
│   │   ├── components/              # Presentational and UI components
│   │   ├── hooks/                   # React Query and SSE hooks
│   │   ├── services/                # API client and query client
│   │   ├── stores/                  # Zustand auth/UI state
│   │   ├── test/                    # Vitest setup and component tests
│   │   ├── types/                   # Frontend note types
│   │   ├── App.tsx
│   │   └── main.tsx
│   └── package.json
├── agent/                           # Python MCP + Gemini CLI agent
│   ├── agent.py
│   ├── mcp_gemini_adapter.py
│   └── requirements.txt
├── AGENTS.md                        # Coding-agent project guidance
├── README.md
└── package.json                     # Root orchestration scripts

Environment Variables

Server

Agent

API Endpoints

Note payloads

Create note:

{
  "title": "Meeting notes",
  "content": "Discuss launch plan",
  "tags": ["work", "planning"]
}

Update note:

{
  "title": "Updated title",
  "content": "Updated content",
  "tags": ["updated"]
}

MCP Tools

The MCP server exposes these tools to AI clients:

REST and MCP mutations both emit note update events so connected frontends can refresh through SSE.

Agent Usage

Interactive mode:

npm run dev:agent

Direct Python invocation:

agent/.venv/bin/python agent/agent.py --transport sse --url http://localhost:3000/sse

One-shot mode:

agent/.venv/bin/python agent/agent.py --one-shot "List my notes about planning"

Options:

--transport sse|stdio   Transport protocol (default: sse)
--url URL               MCP server URL (default: http://localhost:3000/sse)
--model MODEL           Gemini model (default: gemini-2.0-flash)
--api-key KEY           Gemini API key; prefer GEMINI_API_KEY in agent/.env
--one-shot QUERY        Single query mode

Frontend Notes

• The Vite dev server runs on http://localhost:5173 and proxies API calls to the backend.
• The app logs in with the development API key by default for local use.
• Note operations use React Query and invalidate ['notes'] after mutations.
• useSSE listens for backend update events and refreshes note queries live.

Validation

Recommended checks before committing application changes:

npm run build
npm run test --prefix client-ui
npm run test:e2e --prefix client-ui

For targeted changes:

npm run build --prefix server
npm run build --prefix client-ui

Troubleshooting

Server fails on startup with environment errors

Check server/.env. JWT_SECRET must be at least 32 characters and AUTH_TOKEN must be set.

Frontend cannot load notes

Make sure the backend is running on http://localhost:3000, the frontend is running through Vite, and CORS_ORIGIN matches http://localhost:5173.

Agent asks for a Gemini key

Create agent/.env with GEMINI_API_KEY=..., or pass --api-key for a one-off run.

Agent cannot connect to MCP

Start the backend first and verify http://localhost:3000/api/health returns {"status":"ok",...}. The default MCP endpoint is http://localhost:3000/sse.

Development Login

Default local API key:

dev-auth-token-change-in-production

Change this in server/.env for any non-local environment.