{"id":50762399,"url":"https://github.com/devlinduldulao/mcp-example","last_synced_at":"2026-06-11T11:02:06.934Z","repository":{"id":304153268,"uuid":"1017879748","full_name":"devlinduldulao/mcp-example","owner":"devlinduldulao","description":"MCP blog and demo app","archived":false,"fork":false,"pushed_at":"2025-07-11T15:18:22.000Z","size":200,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-01T19:07:28.544Z","etag":null,"topics":["mcp","model-context-protocol"],"latest_commit_sha":null,"homepage":"https://devlinduldulao.vercel.app/posts/the-protocol-for-ai-agents-building-scalable-secure-full-stack-applications-with-mcp","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devlinduldulao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-11T08:41:24.000Z","updated_at":"2025-07-17T19:59:39.000Z","dependencies_parsed_at":"2025-07-11T13:24:46.215Z","dependency_job_id":"8620964e-a4fe-4c2a-97f9-9eac72f868c6","html_url":"https://github.com/devlinduldulao/mcp-example","commit_stats":null,"previous_names":["webmasterdevlin/mcp-example","devlinduldulao/mcp-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devlinduldulao/mcp-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlinduldulao%2Fmcp-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlinduldulao%2Fmcp-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlinduldulao%2Fmcp-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlinduldulao%2Fmcp-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devlinduldulao","download_url":"https://codeload.github.com/devlinduldulao/mcp-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlinduldulao%2Fmcp-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34195117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mcp","model-context-protocol"],"created_at":"2026-06-11T11:02:06.815Z","updated_at":"2026-06-11T11:02:06.926Z","avatar_url":"https://github.com/devlinduldulao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project Pal: An AI-Powered Project Management Assistant\n\nProject Pal is a full-stack Next.js application that demonstrates how to build a powerful, AI-driven chatbot capable of performing real-world actions. It uses the **Model Context Protocol (MCP)** to securely connect a large language model (LLM) to a set of tools, allowing users to manage project tasks using natural language.\n\n![Project Pal Screenshot](public/demo_app.png)\n\n---\n\n## Features\n\n-   **Conversational Interface:** Manage your project tasks by talking to an AI in plain English.\n-   **AI-Powered Actions:** The AI can create and retrieve tasks from a database.\n-   **Secure Tool Use with MCP:** Built on the Model Context Protocol, ensuring a secure and decoupled architecture between the AI and the application's business logic.\n-   **Dual API for Decoupled Architecture:** The backend provides two specialized endpoints to serve both the built-in Next.js frontend and any external Single Page Application (SPA).\n-   **Modern Tech Stack:** Built with Next.js (App Router), the Vercel AI SDK, and shadcn/ui.\n\n## Architecture Overview\n\nThis application is designed with a decoupled architecture, making it highly flexible.\n\n1.  **The MCP Server (`/api/mcp`):** A secure, headless API that exposes \"tools\" (like `create_task` and `get_tasks`). It contains all the business logic and is the only part of the app that communicates with the database.\n2.  **The Chat Endpoints:**\n    -   **`/api/chat` (Streaming):** This endpoint provides a streaming response, designed for the built-in Next.js frontend using the Vercel AI SDK's `useChat` hook for a real-time \"typing\" effect.\n    -   **`/api/chat-spa` (JSON):** This endpoint provides a standard JSON response, designed for external clients like a React, Vue, or Angular SPA.\n3.  **The UI (`/app/page.tsx`):** A client-side chat interface built with React, shadcn/ui, and the Vercel AI SDK's `useChat` hook.\n\nThis separation ensures that the AI model never has direct access to your database and that you can support multiple frontend clients with a single backend.\n\n## Getting Started\n\nFollow these steps to get the application running locally.\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/webmasterdevlin/mcp-example.git\ncd mcp-example\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Set Up Environment Variables\n\nCreate a file named `.env.local` in the root of your project and add your OpenAI API key:\n\n```bash\n# .env.local\nOPENAI_API_KEY=\"sk-...\"\n```\n\nYou can get an API key from the [OpenAI Platform](https://platform.openai.com/api-keys).\n\n### 4. Run the Development Server\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to see the application.\n\n---\n\n## Connecting to an External SPA\n\nThis project is built to serve not only its own frontend but also any external Single Page Application (SPA).\n\nTo connect your external SPA, make `POST` requests to the dedicated **`/api/chat-spa`** endpoint. This endpoint accepts a JSON body with a `messages` array and returns a single JSON object with the AI's response.\n\n**Example `fetch` call from a React/Vue/Svelte app:**\n```javascript\nconst response = await fetch('http://localhost:3000/api/chat-spa', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify({ messages: yourChatHistoryArray })\n});\nconst data = await response.json();\n// data.message will contain the AI's response\n```\n\n## Connecting a Database\n\nBy default, the application uses a temporary, in-memory mock database that **resets with every server restart**. To save your tasks permanently, you must connect a real database.\n\n### Option 1: Using Supabase (Recommended)\n\n1.  **Create a Supabase Project:** Go to [supabase.com](https://supabase.com), create a new project, and wait for it to be provisioned.\n\n2.  **Create the `tasks` Table:** In your Supabase project, go to the **SQL Editor**, create a new query, and run the following script:\n    ```sql\n    CREATE TABLE tasks (\n      id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n      title TEXT NOT NULL,\n      status TEXT NOT NULL DEFAULT 'todo',\n      priority TEXT NOT NULL DEFAULT 'medium',\n      created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()\n    );\n    ```\n\n3.  **Get API Credentials:** Go to **Project Settings \u003e API**. Find and copy your **Project URL** and your **`anon` public API Key**.\n\n4.  **Update Environment Variables:** Add your Supabase credentials to your `.env.local` file:\n    ```bash\n    # .env.local\n    OPENAI_API_KEY=\"sk-...\"\n    NEXT_PUBLIC_SUPABASE_URL=\"YOUR_PROJECT_URL_HERE\"\n    NEXT_PUBLIC_SUPABASE_ANON_KEY=\"YOUR_ANON_KEY_HERE\"\n    ```\n\n5.  **Restart your server.** The application is already configured to use these variables and will automatically connect to your Supabase database.\n\n### Option 2: Using Neon or Any Other Database\n\nThe principle is the same for any database:\n\n1.  Add your database connection details to `.env.local`.\n2.  Install the necessary database client library (e.g., `pg` for PostgreSQL, `mysql2` for MySQL).\n3.  Create a client instance in a new file (e.g., `lib/db.ts`).\n4.  Go to `/app/api/mcp/route.ts` and replace the Supabase logic inside the `get_tasks` and `create_task` tools with the equivalent queries for your database.\n\n---\n\n## What's Missing in This Demo\n\nThis application is a proof-of-concept and is missing several features you'd want in a production application:\n\n-   **User Authentication:** Currently, all tasks are global. There is no concept of individual users. You would need to add an authentication system (like NextAuth.js or Supabase Auth) to manage user-specific tasks.\n-   **More Sophisticated Tools:** The AI can only create and get tasks. A real application would need tools for updating, deleting, and assigning tasks.\n-   **UI Feedback for Tool Calls:** While the AI is thinking, the UI could provide more specific feedback, like \"Creating your task...\" instead of just a generic thinking indicator.\n-   **Robust Error Handling:** While the server logs errors, the UI doesn't display them to the user in a friendly way.\n-   **Persistent Chat History:** The conversation history is lost on every page refresh. You would need to store the AI and UI state in a database to make conversations persistent.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlinduldulao%2Fmcp-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevlinduldulao%2Fmcp-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlinduldulao%2Fmcp-example/lists"}