Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul

2025 I/O Extended Seoul
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기
박제창 jaichangpark

https://event-us.kr/gdgseoul/event/108328

Transcript

1. Flutter로 Gemini와 MCP를 활용한 Agentic App만들기 @JAICHANGPARK 1
2. 박제창 GDE Flutter&Dart GDG Golang Korea Flutter Seoul @jaichangpark 2
3. Google I/O Extended 25 Proprietary & Confidential 3 Flutter Seoul
4. Google I/O Extended 25 Proprietary & Confidential Gemini CLI 4
5. Google I/O Extended 25 Proprietary & Confidential 🔥 5 1. Gemini CLI 🫶 2. Claude Code CLI 3. Codex CLI 4. Cursor CLI 5. And so on..
6. Agents (LLMs + Tools) + MCP server 6
7. Let’s Build This! Goal 7
10. Hands-on preparation 10
11. Google I/O Extended 25 Proprietary & Confidential Preparation 11 1. Network (Wi-Fi) 2. Credit & Google Gemini API Key 3. Flutter SDK & IDE 4. MCP(Model Context Protocol) Tools
12. Google I/O Extended 25 Proprietary & Confidential 12
13. Hands-on Repository Project 13
14. Google I/O Extended 25 Proprietary & Confidential 14 https://github.com/JAICHANGPARK/2025_io_extended_seoul
15. Hands-on How to 15
16. Google I/O Extended 25 Proprietary & Confidential How to 16 1. 직접 코딩해보기 2. 이해하기 3. 질문하기
17. Google I/O Extended 25 Proprietary & Confidential Step 17 1. Gemini & Agents 2. Tools 3. MCP (Model Context Protocol) Tools
18. > git clone https://github.com/JAICHANGPARK/2025_io_exte nded_seoul.git > git checkout step01-start 18
19. > git clone https://github.com/JAICHANGPARK/2025_io_extended_seoul.git > git checkout step01-start 19
20. Gemini & Agents Step 1 20
21. Google I/O Extended 25 Proprietary & Confidential Gemini 21 Source: https://artificialanalysis.ai/?intelligence-tab=intelligence
22. Google I/O Extended 25 Proprietary & Confidential Gemini API 22
23. curl "https://generativelanguage.googleapis.com/v1beta/models/ gemini-2.5-flash:generateContent" \ -H "x-goog-api-key: $GEMINI_API_KEY" \ -H 'Content-Type: application/json' \ -X POST \ -d '{ "contents": [ { "parts": [ { "text": "How does AI work?" } ] } 23
24. Google I/O Extended 25 Proprietary & Confidential 24
25. Google I/O Extended 25 Proprietary & Confidential Agents 25
26. Google I/O Extended 25 Proprietary & Confidential 26 @source: https://www.kaggle.com/whitepaper-agents Agents
27. Google I/O Extended 25 Proprietary & Confidential dartantic_ai 27 https://pub.dev/packages/dartantic_ai @csells
28. 28 from langchain.chat_models import init_chat_model o3_mini = init_chat_model("openai:o3-mini", temperature=0) claude_sonnet = init_chat_model("anthropic:claude-3-5-sonnet-latest", temperature=0) gemini_2_flash = init_chat_model("google_vertexai:gemini-2.5-flash", temperature=0) o3_mini.invoke("what's your name") claude_sonnet.invoke("what's your name") gemini_2_flash.invoke("what's your name")
29. Google I/O Extended 25 Proprietary & Confidential 29
30. Google I/O Extended 25 Proprietary & Confidential 30
31. Google I/O Extended 25 Proprietary & Confidential 31
32. Google I/O Extended 25 Proprietary & Confidential 32 1. Agents 설정, 초기화 하기 2. 간단한 채팅 실행해보기
33. 33 dependencies: flutter: sdk: flutter dartantic_ai: ^1.0.6 dartantic_interface: ^1.0.2 flutter_markdown: ^0.7.7+1 url_launcher: ^6.3.2 dependency_overrides: mcp_dart: ^0.6.0
34. 34 dependencies: flutter: sdk: flutter dartantic_ai: ^1.0.6 dartantic_interface: ^1.0.2 flutter_markdown: ^0.7.7+1 url_launcher: ^6.3.2 dependency_overrides: mcp_dart: ^0.6.0
35. 35 Future initSetup() async { // Enable default logging /// TODO: [STEP01] Agents Agent.loggingOptions = const LoggingOptions(); Agent.environment['GEMINI_API_KEY'] = geminiApiKey; }
36. 36 Future initAgent(List<Tool> tools) async { /// TODO: [STEP01] Agents 초기화 final provider = Providers.google; final agent = Agent.forProvider( provider, chatModelName: modelName, tools: tools, ); return agent; }
37. /// TODO: [STEP01] SEND MESSAGE var result = await agent?.send( query, history: history.sublist(0, history.length - 1), ); 37
38. @override void initState() { super.initState(); // Initialize tab controller for right panel _tabController = TabController(length: 2, vsync: this); // Initialize agent and tools initSetup().then((_) async { // final tools = await initTools(); agent = await initAgent([]); setState(() {}); // Refresh UI after tools are loaded }); } 38
39. 39 Expanded( child: ListView.builder( itemBuilder: (context, index) { // Show regular message from the filtered list if (index < displayHistory.length) { // displayHistory를 사용하도록 수정 return ChatBubble(message: displayHistory[index]); } // Show loading indicator else { return const ChatLoadingIndicator(); } }, ), ),
40. MCP Tools Step 2 40
41. Function Calling vs Model Context Protocol 41
42. Google I/O Extended 25 Proprietary & Confidential Function calling lets you connect models to external tools and APIs. Instead of generating text responses, the model determines when to call specific functions and provides the necessary parameters to execute real-world actions. • Augment Knowledge: Access information from external sources like databases, APIs, and knowledge bases. • Extend Capabilities: Use external tools to perform computations and extend the limitations of the model, such as using a calculator or creating charts. • Take Actions: Interact with external systems using APIs, such as scheduling appointments, creating invoices, sending emails, or controlling smart home devices. Function Calling 42 @source: https://ai.google.dev/gemini-api/docs/function-calling
43. 43 "tools": [ { "functionDeclarations": [ { "name": "get_current_temperature", "description": "Gets the current temperature for a given location.", "parameters": { "type": "object", "properties": { "location": { "type": "string", "description": "The city name, e.g. San Francisco" } }, "required": ["location"] } } ] } ]
44. Google I/O Extended 25 Proprietary & Confidential Function Calling 44 사용자 LLM Function Call Tools&APIs 질문 Invoke tool Tool output Generate Response
45. Google I/O Extended 25 Proprietary & Confidential 45 사용자 LLM Function Call Tools&APIs 질문 Invoke tool Tool output Generate Response 규격이 제각각 다름
46. Google I/O Extended 25 Proprietary & Confidential 46
47. Google I/O Extended 25 Proprietary & Confidential 47 Model Context Protocol
50. Google I/O Extended 25 Proprietary & Confidential MCP Host The AI application that coordinates and manages one or multiple MCP clients. Client A component that maintains a connection to an MCP server and obtains context from an MCP server for the MCP host to use Server A program that provides context to MCP clients 50 @source: https://modelcontextprotocol.io/docs/learn/architecture
51. Google I/O Extended 25 Proprietary & Confidential 51 @source: https://modelcontextprotocol.io/docs/learn/architecture https://modelcontextprotocol.io/specification/2025-06-18/architecture
52. Google I/O Extended 25 Proprietary & Confidential 52 @source: https://modelcontextprotocol.io/docs/learn/architecture https://modelcontextprotocol.io/specification/2025-06-18/architecture
53. Google I/O Extended 25 Proprietary & Confidential 53 사용자 MCP Host MCP Client LLM MCP Tools MCP Server 질문 툴 실행 승인 처리 툴 호출 요청 툴 실행 툴 실행 결과 MCP
54. Google I/O Extended 25 Proprietary & Confidential 54 사용자 MCP Host MCP Client LLM MCP Tools MCP Server 질문 툴 실행 승인 처리 툴 호출 요청 툴 실행 툴 실행 결과 MCP Flow에 대한 Protocol (규약)
55. Google I/O Extended 25 Proprietary & Confidential 55 Tools The Model Context Protocol (MCP) allows servers to expose tools that can be invoked by language models. Tools enable models to interact with external systems, such as querying databases, calling APIs, or performing computations. Each tool is uniquely identified by a name and includes metadata describing its schema. @Source: https://modelcontextprotocol.io/specification/2025-06-18/server/tools
56. 56 { "jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": { "cursor": "optional-cursor-value" } }
57. 57 { "jsonrpc": "2.0", "id": 1, "result": { "tools": [ { "name": "get_weather", "title": "Weather Information Provider", "description": "Get current weather information for a location", "inputSchema": { "type": "object", "properties": { "location": { "type": "string", "description": "City name or zip code" } }, "required": ["location"] } } ], "nextCursor": "next-page-cursor" } }
58. Google I/O Extended 25 Proprietary & Confidential 58
59. Google I/O Extended 25 Proprietary & Confidential 59
60. Google I/O Extended 25 Proprietary & Confidential 60 1. MCP 설정하기 2. Agents 업데이트 처리하기 3. Widget 추가하기
61. 61 final huggingFace = McpClient.remote( 'huggingface', url: Uri.parse('https://huggingface.co/mcp'), headers: {"Authorization": "Bearer ${huggingfaceKey}"}, ); mcpClients['huggingface'] = huggingFace;
62. 62 // Get HuggingFace tools final hgTools = await huggingFace.listTools(); // Add HuggingFace tools to available tools for (final tool in hgTools) { availableTools.add(McpToolItem(tool: tool, source: 'huggingface')); }
63. 63 // Initialize Obsidian client final obsidian = McpClient.local( 'mcp-obsidian', command: "uvx", args: ["mcp-obsidian"], environment: { "OBSIDIAN_API_KEY": obsidianKey, "OBSIDIAN_HOST": "https://127.0.0.1", "OBSIDIAN_PORT": "27124", }, );
64. 64 Future<void> updateAgent() async { final activeTools = getActiveTools(); agent = await initAgent(activeTools); setState(() {}); // Refresh UI after agent is updated }
65. 65 ToolManagementWidget( tools: availableTools, clients: mcpClients, onToolToggle: toggleTool, onAddToolSource: () => addToolSource(context), onRemoveToolSource: removeToolSource, ),
66. <INSTRUCTIONS> Step 1: Analyze the user's question. - Understand the user's core intent. Step 2: Decide whether to use a tool. - First, check if any of your available tools are directly relevant to answering the question. For example, use a local file search tool for questions about personal notes. - **If no tool is suitable for the question, answer it directly using your general knowledge.** Do not try to force the use of an irrelevant tool. - If a tool is relevant, pick the best one to use. 66
67. <INSTRUCTIONS> Step 1: Analyze the user's question. - Understand the user's core intent. Step 2: Decide whether to use a tool. - First, check if any of your available tools are directly relevant to answering the question. For example, use a local file search tool for questions about personal notes. - **If no tool is suitable for the question, answer it directly using your general knowledge.** Do not try to force the use of an irrelevant tool. - If a tool is relevant, pick the best one to use. 67
68. <INSTRUCTIONS> Step 1: Analyze the user's question. - Understand the user's core intent. Step 2: Decide whether to use a tool. - First, check if any of your available tools are directly relevant to answering the question. For example, use a local file search tool for questions about personal notes. - **If no tool is suitable for the question, answer it directly using your general knowledge.** Do not try to force the use of an irrelevant tool. - If a tool is relevant, pick the best one to use. 68
73. Thanks 73
74. Google I/O Extended 25 Proprietary & Confidential 74 appendix dartantic_ai 수정 Fix 되었을 수 있습니다. 혹시 case 'object': 에러가 발생한다면 https://gist.github.com/JAICHANGPARK/c6bff1fcfd88b587743fde668b95c8c0