---
title: Expanding the Potential of AI: An Introduction to MCP
tags:  #mcp #ai #toolcalling #handson #security  
author: [eXpresser](https://www.docswell.com/user/eXpresser-UXM)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/8EDKRPDK7G.jpg?width=480
description: https://dxdojo.connpass.com/event/396167  In this presentation, we will first explain what MCP is and demonstrate how it works with AI to invoke tools. Next, we will set up an MCP server using Claude Desktop and provide a hands-on session where you can create an organizational chart in draw.io, as well as experience how MCP works through a sample app that integrates and analyzes sales data. Finally, we will present specific security measures to prevent malicious prompts and information leaks from the server.
published: June 17, 26
canonical: https://www.docswell.com/s/eXpresser-UXM/K8NWD7-20260617-MCP
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/8EDKRPDK7G.jpg)

Expanding the Potential of
AI: An Introduction to MCP
2026/6/17 @DXDojo #22
Shinnosuke Oka
/ 33


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V7PKWNX3J8.jpg)

The GOAL of this session
Learn what MCP is
• What are the benefits of using MCP?
• How do you use MCP?
Learn how MCP works
• How do AI and MCPs work together?
You can
ANSWER
these
questions
Learn about the precautions for MCP
• MCP is convenient but isn't it dangerous?
• Is there anything to be careful about?
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
2 / 33


# Page. 3

![Page Image](https://bcdn.docswell.com/page/2JVV8KLNJQ.jpg)

Timetable
5 min
Networking & Ice-break
10 min
Introduction
What is MCP?
20 min
Hands-on pt.1
Let's try using MCP
20 min
Hands-on pt.2
Learn how MCP works
5 min
Wrap-up:
Precautions for using MCP
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
3 / 33


# Page. 4

![Page Image](https://bcdn.docswell.com/page/5EGL5QX5JL.jpg)

Self-introduction
Shinnosuke Oka (eXpresser)
Belonging to an independent contract
development company
Azure Cloud Engineer
Web-tech Programmer
Hobbies: Railways
I develop and publish a railway route
map editor web app as a hobby and for
self-improvement.
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
4 / 33


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4JQYZK8L7P.jpg)

Introduction: What is MCP?
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
5 / 33


# Page. 6

![Page Image](https://bcdn.docswell.com/page/K74W3P25E1.jpg)

What if you don't have an MCP...?
Teach me how to make curry rice.
Ingredients…, How to make…、...
What are the rules for taking paid
leave?
I cannot answer for your
company’s rules for taking paid
leave. Generally, …
What's the weather like in Osaka
today?
I cannot answer real-time
information.
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
Able to answer common
questions
Cannot provide answers using
internal data
(information unique to you)
Unable to provide answers
with the latest real-time
information
6 / 33


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LJ1Y19M2EG.jpg)

What if you have an MCP...?
Teach me how to make curry rice.
Ingredients…, How to make…、...
AI masters tools on its own,
acquiring and registering additional
information.
What are the rules for taking paid
leave?
Based on your years of service,
you can earn …days. Please apply
for paid leave through the
internal portal site.
Employee Directory Database
Internal Rules Document
What's the weather like in Osaka
today?
Clock
June 17: Tonight's weather in
Osaka is...
Weather Site
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
7 / 33


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GJWG8Q3272.jpg)

MCP (Model Context Protocol)
= Standardization of Tool Calling
Teach me how to make curry rice.
Ingredients…, How to make…、...
A list of each tool, its uses, and
how to call it standardization
according to a certain 'manner'
What are the rules for taking paid
leave?
Based on your years of service,
you can earn …days. Please apply
for paid leave through the
internal portal site.
Employee Directory Database
Internal Rules Document
What's the weather like in Osaka
today?
Clock
June 17: Tonight's weather in
Osaka is...
Weather Site
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
8 / 33


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EZL8WV473.jpg)

Recap: What is MCP? By using MCP as a “common language”,
you can develop and release tools
compatible with any AI!
ChatGPT
Claude
GitHub Copilot
MCP Server
Google Services
MCP Server
Mail Service
MCP Server
Discord
MCP Server
Slack
…
…
This side is said “MCP Client”
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
9 / 33


# Page. 10

![Page Image](https://bcdn.docswell.com/page/Y76WPG5G7V.jpg)

Hands-on pt.1: Let's try using MCP
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
10 / 33


# Page. 11

![Page Image](https://bcdn.docswell.com/page/G75MKVYX74.jpg)

Hands-on 1: Try using MCP
Let's try running the MCP server that is actually available
on Claude Desktop!
Draw.io
A high-performance drawing tool for
creating flowcharts and more.
1.
2.
3.
4.
Check if Node.js (npx) is installed
Edit Claude Desktop configuration files
Completely restart Claude Desktop
Try drawing a simple organizational chart in Draw.io
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
11 / 33


# Page. 12

![Page Image](https://bcdn.docswell.com/page/9J29W3GQER.jpg)

Hands-on 1: Let's Try Using MCP (1)
There are several installation methods.
We'll use the simplest method from the official website.
• Installing Node.js
• Access https://nodejs.org/en/download
• Select your OS, download the installer, and run it.
• Open the terminal and check if the npx command can be
executed.
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
12 / 33


# Page. 13

![Page Image](https://bcdn.docswell.com/page/DEY4L1VYJM.jpg)

Hands-on 1: Let's Try Using MCP(2)
• Launching Claude Desktop
• Windows: The “ " icon at the top left→ "Files" → "Settings"
Mac OS: Click "Claude" → "Settings"
• On the left side of the settings window, select "Desktop
Apps" → "Developer"
• The "Local MCP Server"
Click 'Edit Settings'
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
13 / 33


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VJNY42MR78.jpg)

Hands-on 1: Let's
Try Using MCP (3)
• Open claude_desktop_config.json
with a text editor
• As shown on the right, add the
mcpServers configuration
If "mcpServers" already exists,
Add the "drawio" entry.
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
14 / 33


# Page. 15

![Page Image](https://bcdn.docswell.com/page/YE9PQ1NZJ3.jpg)

Hands-on 1: Let's Try Using MCP (4)
• Return to Claude Desktop,
on the hamburger menu→ press "File" → “Quit"
If you simply click “×,” the program will remain running in
the background and will not be completely terminated.
To ensure a proper restart, use the “Quit” option.
• Restart Claude Desktop and set it up →Developer,
and that "drawio" has been added to the local MCP server.
to confirm
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
15 / 33


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GE8DG4NYED.jpg)

Hands-on 1: Let's Try Using MCP (5)
• Request the AI using the following prompt
Create a simple organization chart sample in draw.io.
• You may be asked for permission along the way, so grant
permission
• If successful, the browser launches and the organizational
chart appears
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
16 / 33


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LELMG6P97R.jpg)

Success Case
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
17 / 33


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4JMYQ54VJW.jpg)

Other Published MCP Servers
Google Drive
Gmail
Figma
Slack
Salesforce
There are quite a few services that offer MCP servers.
If you search for “service name MCP“,
you'll find surprisingly many results!
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
18 / 33


# Page. 19

![Page Image](https://bcdn.docswell.com/page/PJR983WW79.jpg)

Hands-on pt.2: Learn How MCP Works
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
19 / 33


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PEXQ84PVJX.jpg)

Hands-on 2: Learn How MCP Works
Let’s understand how MCP works using the sample app:
a tool for consolidating and analyzing sales data
20260601_梅田店.csv
Name
Unit Price Unit sales Amount
Aランチ
1,000
40
40,000
Bランチ
1,200
20
24,000
Cランチ
1,500
30
45,000
…
20260601_なんば店.csv
Name
Unit Price Unit sales Amount
Aランチ
1,000
30
40,000
Bランチ
1,200
25
30,000
Cランチ
1,500
40
60,000
2026/06/17
…
DX Dojo #22 (C) Shinnosuke Oka
20 / 33


# Page. 21

![Page Image](https://bcdn.docswell.com/page/3EK9KZD5ED.jpg)

Hands-on 2: Learn How MCP Works (1)
Pattern B
Pattern A
• For intermediate users
• For beginners
• Download the codes
and run MCP on your PC.
• Instructions are
provided README.md
• Use the public MCP
server provided by the
presenter
(those who can enter commands)
2026/06/17
(or those who don't want to
pollute your environment)
(available during this session)
DX Dojo #22 (C) Shinnosuke Oka
21 / 33


# Page. 22

![Page Image](https://bcdn.docswell.com/page/L73WZDR175.jpg)

Pattern A:
Run MCP by sample code locally
• Sample codes:
https://github.com/eXpresser-UXM/20260617-dx-dojomcp-server-sample
• Instructions are provided README.md
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
22 / 33


# Page. 23

![Page Image](https://bcdn.docswell.com/page/87DKRPYKJG.jpg)

Pattern B: Use public MCP Server
• Open claude_desktop_config.json
with a text editor
• As shown on the right, add the
mcpServers configuration
Add the “dx-dojo-sample-mcp” entry.
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
23 / 33


# Page. 24

![Page Image](https://bcdn.docswell.com/page/VJPKWN63E8.jpg)

Success Case (Analysis)
Analyze the sales of all stores last month.
I especially want to know the sales trends by day of the week.
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
24 / 33


# Page. 25

![Page Image](https://bcdn.docswell.com/page/2EVV8K3NEQ.jpg)

Success Case (Registration)
I want to register today's sales.
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
25 / 33


# Page. 26

![Page Image](https://bcdn.docswell.com/page/57GL5Q35EL.jpg)

How the MCP Server Works (1)
The MCP server informs AI of its available features in advance.
MCP Server
I have those features (tools) !
Get Stores
: Obtain all the store names you operate
Get Items
: Get all available menu items
Get Sales
: Acquire sales by store and period
Got it!
MCP Client
Register Sales : Register the daily sales for the store
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
26 / 33


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4EQYZK5LJP.jpg)

How the MCP Server Works(2)
To fulfill user requests, the AI determines which MCP server tools to
call and then executes them automatically.
Analyze last month's
sales!
Check existing stores by
Get Stores Tool
Check existing items by
Get Items Tool
MCP Client
Acquire sales from May 1 to May 31
of all stores by
Get Sales Tool
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
27 / 33


# Page. 28

![Page Image](https://bcdn.docswell.com/page/KJ4W3P9571.jpg)

Wrap-up: Precautions for using MCP
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
28 / 33


# Page. 29

![Page Image](https://bcdn.docswell.com/page/LE1Y19K27G.jpg)

Security Considerations for Using MCP
Ex1) Risk of Malicious MCP Execution
Ex2) Risk of Executing Malicious Prompts
(= Indirect prompt injection)
Obtaining Malicious
External Data
Call MCP
BAD MCP Server
GOOD MCP Server
Malware
Contamination
GOOD MCP Server
Leak of
Confidential Info
✓ Implement only official MCPs from
trusted companies
✓ When handling confidential data,
restrict the use of MCPs that
involve external transmission.
Never fail to judge ”Is it truly safe to use this MCP server right now?"
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
29 / 33


# Page. 30

![Page Image](https://bcdn.docswell.com/page/GEWG8QD2J2.jpg)

Performance Considerations for
Using MCP
If you use more MCP servers…
Too many tools degrade AI reasoning and spike token costs.
Limit active MCP servers per task via editor settings (e.g., VS Code).
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
30 / 33


# Page. 31

![Page Image](https://bcdn.docswell.com/page/47ZL8WG4J3.jpg)

Conclusion
The essence of MCP = Giving AI 'hands and feet'
By providing MCP, AI can use internal data and real-time info.
Understand how to run a draw.io MCP server using Claude Desktop.
•
•
How MCP Works = Autonomous Tool Execution by AI
MCP servers provide AI with capabilities ("what it can do").
AI reasons and executes tools automatically to fulfill user requests.
•
•
MCP Operations: The Ultimate Risk Hedge is “YOU"
•
•
2026/06/17
Behind its convenience lies the risk of unintended autonomous actions.
Never neglect the human judgment: "Is it truly safe to use this MCP
server right now?"
DX Dojo #22 (C) Shinnosuke Oka
31 / 33


# Page. 32

![Page Image](https://bcdn.docswell.com/page/YJ6WPGYGJV.jpg)

Finally
• Clean up the results of this session as needed:
✓Revert the `mcpServers` setting in
`claude_desktop_config.json`
✓Delete the sample code
✓Uninstall Node.js
✓Uninstall Claude Desktop
If you need help creating SVG diagrams for the web,
please don’t hesitate to contact Studio UXM !
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
32 / 33


# Page. 33

![Page Image](https://bcdn.docswell.com/page/GJ5MKVGXJ4.jpg)

Thank You!
2026/06/17
DX Dojo #22 (C) Shinnosuke Oka
33 / 33