/start-12-3.en

description: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module12-notion"
duration: "~30 min"
prerequisites: ["start-0-1"]
level: "intermediate"
tags: ["notion", "mcp", "api"]
nonInteractiveMode: incompatible

🎓 Lesson 12-3: Notion Page Creation

📍 What You'll Do

**Lesson 12-3** !

| Item | Details | |------|------| | Goal | Operate Notion pages and databases from Claude Code using MCP/Notion API | | Duration | ~30 min | | Skills used | Notion API, MCP (Model Context Protocol) | | Prerequisites | Notion account, integration creation permissions | | Course page | [Module 12: Notion](https://ai-agent.camp/en/course/module-12) alongside this lesson |

**Session flow:** 1. Create a Notion integration 2. Obtain the API key and database ID 3. Read and write pages and databases

By the end of this session, you will be able to operate Notion from Claude Code.

> **💡 Hint**: If the AI response stops midway, type "please continue" or "keep going" to resume. This is a Cursor behavior, not a malfunction.

---

Browser Authentication at Lesson Start (Notion MCP)

When proceeding with `/start-12-3`, a **"Connect with Notion MCP"** screen may open in the browser on the Notion side. This is displayed when the locally running MCP receives tokens via a `127.0.0.1` callback URL.

**Key screen operation points:**

1. **Title**: It will say something like "Connect with Notion MCP" or "Grant 127.0.0.1 access to Notion", indicating it is a connection to a local app. 2. **Select workspace**: Choose the workspace to connect from the dropdown. 3. **Permission description**: Items such as respecting page/database access, operations based on your permissions, search (depending on plan), and display of user information are listed. 4. **Yellow warning box**: A URL like **`http://127.0.0.1:<port>/callback`** is displayed as the redirect destination. **The port number may change each time it starts**. 5. **"I recognize and trust this URL."**: **Continue** may not become active/proceed unless you **check this box**. Verify that the content is a local callback before checking. 6. Complete authentication with **Continue** and return to the editor or MCP client side.

Reference screen:


> **Note**: UI text and items may change with Notion updates. If the display differs significantly, check the official help or latest class instructions.

---

🎯 Readiness Check

Let's first check that everything is ready.

**AskQuestion configuration:**

{
  "title": "🎯 Pre-session check",
  "questions": [{
    "id": "readiness",
    "prompt": "Are you ready?",
    "options": [
      {"id": "ready", "label": "Ready! Let's start"},
      {"id": "check_prereq", "label": "Check prerequisites"},
      {"id": "view_html", "label": "View the course page first"},
      {"id": "different_lesson", "label": "Go to a different lesson"}
    ]
  }]
}

(ready → Go to Step 1) (check_prereq → Run prerequisite verification) (view_html → Show course page path) (different_lesson → Display module list)

---

🚀 Step 1: Create Notion Integration

**Prerequisite:** The Notion MCP server must be configured. If not configured, run `/setup-notion` first.

**What the AI automatically verifies:** 1. Verify that the `notion` server is defined in the MCP config file:

• Claude Code: Read `~/.claude/mcp_settings.json` and verify `mcpServers.notion` exists
• Cursor: Read `.cursor/mcp.json` and verify `mcpServers.notion` exists

2. If already configured -> proceed to Step 2 (MCP config file creation) 3. If not configured -> guide to run `/setup-notion`

**AskQuestion configuration:**

{
  "title": "🚀 Step 1: Verify Notion Integration",
  "questions": [{
    "id": "step_action",
    "prompt": "Check NOTION_API_KEY configuration status.",
    "options": [
      {"id": "check", "label": "Check configuration status"},
      {"id": "setup_notion", "label": "Set up with /setup-notion"},
      {"id": "skip", "label": "Skip (if already configured)"}
    ]
  }]
}

(check → Verify the notion entry in the MCP config file. If configured, proceed to Step 2) (setup_notion → Guide to run /setup-notion) (skip → Proceed to Step 2)

---

🚀 Step 2: Create MCP Configuration File

Use AskQuestion to choose "Proceed / Just review the example / Skip".

**AskQuestion configuration:**

{
  "title": "🚀 Step 2: Create MCP Configuration File",
  "questions": [{
    "id": "step_action",
    "prompt": "What would you like to do with this step?",
    "options": [
      {"id": "practice", "label": "Proceed"},
      {"id": "review", "label": "Just review the example"},
      {"id": "skip", "label": "Skip"}
    ]
  }]
}

**Guidance after selection:** Input:

Please create the MCP configuration file for Claude Code.

File: ~/.claude/mcp_settings.json

Content (replace NOTION_API_KEY with your actual token):
{
  "mcpServers": {
    "notion": {
      "command": "npx",
      "args": [
        "-y",
        "@notionhq/notion-mcp-server"
      ],
      "env": {
        "NOTION_API_KEY": "secret_your_token_here"
      }
    }
  }
}

Please create the file.

**Expected result:** The MCP config file is created. Replace the actual token manually.

---

🚀 Step 3: Grant Workspace Access Permission

If **Connect with Notion MCP** appears in the browser, follow the **"Browser Authentication at Lesson Start (Notion MCP)"** instructions at the beginning of this document, review the redirect URL explanation, check **"I recognize and trust this URL."**, and then click **Continue**.

Use AskQuestion to choose "Proceed / Just review the example / Skip".

**AskQuestion configuration:**

{
  "title": "🚀 Step 3: Grant Workspace Access Permission",
  "questions": [{
    "id": "step_action",
    "prompt": "What would you like to do with this step?",
    "options": [
      {"id": "practice", "label": "Proceed"}