Build Your First MCP Server with Notion and OpenAI – A Developer’s Guide

mcp-demo/
├── server.js          # Express app + Host entrypoint
├── mcpHost.js         # OpenAI integration + orchestration
├── mcpClient.js       # JSON-RPC client communication
├── mcpRpcServer.js    # JSON-RPC server + Notion queries
├── notion.js          # Notion API wrapper
├── gpt.js             # OpenAI API wrapper
├── public/
│   └── index.html     # Web UI
└── package.json

mkdir mcp-demo && cd mcp-demo
npm init -y
npm install express axios dotenv

NOTION_TOKEN=your_notion_integration_token
NOTION_DATABASE_ID=your_notion_database_id
OPENAI_API_KEY=your_openai_api_key

const axios = require('axios');

class NotionClient {
  constructor() {
    this.token = process.env.NOTION_TOKEN;
    this.databaseId = process.env.NOTION_DATABASE_ID;
    this.baseURL = 'https://api.notion.com/v1';
  }

  async queryTasks(filter = {}) {
    try {
      const response = await axios.post(
        `${this.baseURL}/databases/${this.databaseId}/query`,
        { filter },
        {
          headers: {
            'Authorization': `Bearer ${this.token}`,
            'Notion-Version': '2022-06-28',
            'Content-Type': 'application/json'
          }
        }
      );

      return this.formatTasks(response.data.results);
    } catch (error) {
      throw new Error(`Notion API error: ${error.message}`);
    }
  }

  formatTasks(rawTasks) {
    return rawTasks.map(task => ({
      id: task.id,
      title: task.properties.Name?.title[0]?.text?.content || 'Untitled',
      status: task.properties.Status?.select?.name || 'No Status',
      due_date: task.properties.Due?.date?.start || null,
      priority: task.properties.Priority?.select?.name || 'Normal'
    }));
  }
}

module.exports = NotionClient;

const express = require('express');
const NotionClient = require('./notion');

const app = express();
app.use(express.json());

const notionClient = new NotionClient();

// JSON-RPC 2.0 handler
app.post('/rpc', async (req, res) => {
  const { jsonrpc, method, params, id } = req.body;

  try {
    let result;

    switch (method) {
      case 'getTasks':
        result = await notionClient.queryTasks(params?.filter);
        break;

      case 'getTasksByStatus':
        result = await notionClient.queryTasks({
          property: 'Status',
          select: { equals: params.status }
        });
        break;

      default:
        throw new Error(`Method not found: ${method}`);
    }

    res.json({ jsonrpc: '2.0', result, id });
  } catch (error) {
    res.json({
      jsonrpc: '2.0',
      error: { code: -32603, message: error.message },
      id
    });
  }
});

const PORT = process.env.RPC_PORT || 3001;
app.listen(PORT, () => {
  console.log(`🚀 MCP RPC Server running on port ${PORT}`);
});

const axios = require('axios');

class MCPClient {
  constructor(serverUrl = 'http://localhost:3001/rpc') {
    this.serverUrl = serverUrl;
    this.requestId = 0;
  }

  async call(method, params = {}) {
    const payload = {
      jsonrpc: '2.0',
      method,
      params,
      id: ++this.requestId
    };

    try {
      const response = await axios.post(this.serverUrl, payload, {
        headers: { 'Content-Type': 'application/json' }
      });

      if (response.data.error) {
        throw new Error(response.data.error.message);
      }

      return response.data.result;
    } catch (error) {
      throw new Error(`MCP Client error: ${error.message}`);
    }
  }

  // Convenience methods
  async getTasks() {
    return this.call('getTasks');
  }

  async getTasksByStatus(status) {
    return this.call('getTasksByStatus', { status });
  }
}

module.exports = MCPClient;

const axios = require('axios');

class GPTClient {
  constructor() {
    this.apiKey = process.env.OPENAI_API_KEY;
    this.baseURL = 'https://api.openai.com/v1';
  }

  async generateAnswer(userQuestion, contextData) {
    const messages = [
      {
        role: 'system',
        content: `You are a helpful assistant that answers questions about Notion tasks. 
                 Use the provided context data to give accurate, friendly answers.
                 Context: ${JSON.stringify(contextData, null, 2)}`
      },
      {
        role: 'user',
        content: userQuestion
      }
    ];

    try {
      const response = await axios.post(
        `${this.baseURL}/chat/completions`,
        {
          model: 'gpt-3.5-turbo',
          messages,
          temperature: 0.7,
          max_tokens: 500
        },
        {
          headers: {
            'Authorization': `Bearer ${this.apiKey}`,
            'Content-Type': 'application/json'
          }
        }
      );

      return response.data.choices[0].message.content;
    } catch (error) {
      throw new Error(`OpenAI error: ${error.message}`);
    }
  }
}

module.exports = GPTClient;

const MCPClient = require('./mcpClient');
const GPTClient = require('./gpt');

class MCPHost {
  constructor() {
    this.mcpClient = new MCPClient();
    this.gptClient = new GPTClient();
  }

  async processQuestion(userQuestion) {
    try {
      // Determine what data we need based on the question
      let contextData;

      if (userQuestion.toLowerCase().includes('incomplete') || 
          userQuestion.toLowerCase().includes('todo')) {
        contextData = await this.mcpClient.getTasksByStatus('To Do');
      } else if (userQuestion.toLowerCase().includes('done') || 
                 userQuestion.toLowerCase().includes('completed')) {
        contextData = await this.mcpClient.getTasksByStatus('Done');
      } else {
        // Default: get all tasks
        contextData = await this.mcpClient.getTasks();
      }

      // Generate natural language response
      const answer = await this.gptClient.generateAnswer(userQuestion, contextData);

      return {
        success: true,
        answer,
        tasksCount: contextData.length
      };
    } catch (error) {
      return {
        success: false,
        error: error.message
      };
    }
  }
}

module.exports = MCPHost;

require('dotenv').config();
const express = require('express');
const path = require('path');
const MCPHost = require('./mcpHost');

const app = express();
app.use(express.json());
app.use(express.static('public'));

const mcpHost = new MCPHost();

// API endpoint for questions
app.post('/ask', async (req, res) => {
  const { question } = req.body;

  if (!question) {
    return res.status(400).json({ error: 'Question is required' });
  }

  const result = await mcpHost.processQuestion(question);
  res.json(result);
});

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`🎉 MCP Demo running at http://localhost:${PORT}`);
});

<!DOCTYPE html>
<html>
<head>
    <title>MCP Demo - Ask About Your Notion Tasks</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .chat-container { border: 1px solid #ddd; height: 400px; overflow-y: scroll; padding: 10px; margin: 10px 0; }
        .message { margin: 10px 0; padding: 10px; border-radius: 5px; }
        .user { background: #e3f2fd; text-align: right; }
        .assistant { background: #f1f8e9; }
        input[type="text"] { width: 70%; padding: 10px; }
        button { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>🤖 MCP Demo: Ask About Your Notion Tasks</h1>
    <p>Try asking: "What tasks do I have?", "Show me incomplete tasks", "List done items"</p>

    <div id="chat" class="chat-container"></div>

    <input type="text" id="question" placeholder="Ask about your Notion tasks..." />
    <button onclick="askQuestion()">Ask</button>

    <script>
        async function askQuestion() {
            const question = document.getElementById('question').value;
            if (!question.trim()) return;

            addMessage(question, 'user');
            document.getElementById('question').value = '';

            try {
                const response = await fetch('/ask', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ question })
                });

                const result = await response.json();

                if (result.success) {
                    addMessage(result.answer, 'assistant');
                } else {
                    addMessage(`Error: ${result.error}`, 'assistant');
                }
            } catch (error) {
                addMessage(`Network error: ${error.message}`, 'assistant');
            }
        }

        function addMessage(text, sender) {
            const chat = document.getElementById('chat');
            const message = document.createElement('div');
            message.className = `message ${sender}`;
            message.textContent = text;
            chat.appendChild(message);
            chat.scrollTop = chat.scrollHeight;
        }

        document.getElementById('question').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') askQuestion();
        });
    </script>
</body>
</html>

   node mcpRpcServer.js

   node server.js