<aside> ℹ️

Singapore TTT Game is a web app for playing a Singapore-themed game of tic tac toe. A human can play another human, a human can play AI, or AI can play AI.

</aside>

Overview

As part of a demo I gave for https://luma.com/ao97w2zn?tk=ZWwy9h and https://luma.com/maxk88cv?tk=0OlYEh to highlight the power of connecting Claude to Notion, I used Notion and Claude in multiple ways to create and execute a Singapore-themed Tic Tac Toe Game.

  1. PRD: Created a PRD in Claude that I saved to Notion using Notion MCP and continued to iterate on from Claude
  2. Implementation Plan & Tracker: Used the “Notion Spec to Implementation” Claude Skill to build an implementation plan and project implementation tracker in Notion using Notion MCP. I subsequently used Claude Code to connect to Notion using Notion MCP to execute the plan and update as it was building the game
  3. Database: Claude Code used Notion MCP to build a Notion database table to use as the backend for saving game history, and I connected the game to the Notion API to read from and update game history using that Notion database table

Notion MCP, Claude Skills, and Notion API is a lot to cover all in one demo! I’ve created an instruction guide to help break this process down into steps and posted a demo using Loom.

Presentation

<aside> ℹ️

A little bit about MCPs, Notion MCP, Claude Skills, and Notion API before diving in. Scroll up and down or “More > Open in browser” (NOT left/right pagination). If it fails to load, go to More (…) and select Download or View original.

</aside>

MWN Singapore 2025.pdf

Instruction Guide

<aside> ℹ️

Step by step guide for creating your own themed Tic Tac Toe game using Claude and Notion.

</aside>

Connect Claude to Notion MCP

You can use Claude Web, Claude Desktop, or Claude Code. I prefer using Claude Desktop for creating the PRD, either Claude Web or Claude Code for creating the implementation plan and implementation tracker using the Claude Skill, and Claude Code for building the game as defined by the PRD and implementation plan in Notion, but it’s up to you.

Claude Web or Desktop

To Connect Claude Web or Desktop to Notion MCP, it’s pretty easy, just go to Settings > Connectors > Notion (may have to Browse Connectors) and it should use your browser session to authenticate you to your Notion workspace.

Screenshot 2025-10-27 at 11.36.40 PM.png

Claude Code

Claude Code is a bit trickier to configure, but authentication should work the same and redirect you to your browser to authenticate you to your Notion workspace. To initiate configuration, you can ask Claude Code to “connect to Notion MCP”, “connect to Notion MCP at Smithery”, or “connect to Notion MCP at https://server.smithery.ai/notion/mcp”. You may have to run the command “/mcp” to view and choose Notion MCP to initiate authentication, and you may also have to exit Claude Code (Control-C-C) and re-enter for it to be enabled. While this method does work, it is a bit inconsistent.

Alternatively, as documented at https://smithery.ai/server/notion, you can run the following command from the terminal window before entering Claude Code, which is a more consistent approach.