Expanding the Potential of AI: An Introduction to MCP
>100 Views
June 17, 26
スライド概要
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.
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.2M
各ページのテキスト
Expanding the Potential of AI: An Introduction to MCP 2026/6/17 @DXDojo #22 Shinnosuke Oka / 33
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
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
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
Introduction: What is MCP? 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 5 / 33
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
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
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
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
Hands-on pt.1: Let's try using MCP 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 10 / 33
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
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
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
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
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
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
Success Case 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 17 / 33
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
- https://developers.google.com/workspace/drive/api/guides/branding?hl=ja
- https://developers.google.com/workspace/gmail/api/guides/configure-mcp-server?hl=ja
- https://github.com/GLips/Figma-Context-MCP
- https://dev.classmethod.jp/articles/slack-mcp-what-can-do/
- https://help.salesforce.com/s/articleView?id=platform.hosted_mcp_servers.htm&type=5
Hands-on pt.2: Learn How MCP Works 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 19 / 33
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
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
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
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
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
Success Case (Registration) I want to register today's sales. 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 25 / 33
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
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
Wrap-up: Precautions for using MCP 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 28 / 33
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
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
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
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
Thank You! 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 33 / 33