Beyond Prompts: Building Intelligent Applications with Genkit and the Model Context Protocol

LLMs have democratized AI, making it more accessible for everyone. But today’s chat bots still feel very disconnected. Wouldn’t it be great if you could use AI to tap into your personal knowledge and data, and use it to drive the tools you already know and love? Imagine using a chat bot to create your next pitch deck, or generating bespoke 3D scenes for your next home decoration project using inexpensive tools like Blender. In this talk, I'll show you how this is possible with the Model Context Protocol (MCP)

You will learn:
* How you can leverage MCP to allow LLMs to interact with existing apps and systems
* How to architect intelligent applications that orchestrate complex tasks by connecting to and reusing your existing APIs, data sources, and specialised tools.

I will even demo an agentic app built using MCP, Swift, and Keynote that you can use to craft presentation decks using just natural language - including doing the research!

Transcript

1. @peterfriese.dev Created by Mamank from Noun Project https: / / peterfriese.dev peterfriese peterfriese Peter Friese, Staff Developer Relations Engineer, Google Beyond Prompts Building Intelligent Applications with Genkit and the Model Context Protocol
2. Hey, I’m Peter
3. The problem
4. L L M Give me the top three sights in Amsterdam. Be concise. 1. Elbphilharmonie Speicherstadt 3. Miniatur Wunderland 􀉩
5. Will my flight be on time? I can't access real-time flight information or personal travel details. To check your flight status, please provide me with the airline and flight number, and I will search for the latest updates. L L M 􀉩
6. I’m travelling to a place in the UK next week. Who’s the author of the thriller that plays there that I read recently? That's an interesting question, but I need a little more information to help you! The UK is home to countless thrillers set in various locations. L L M 􀉩
7. L L M Enterprise data (e.g. product catalog) User data (e.g. personal kno w l edge) Created by iconfield from Noun Project APIs Apps
8. L L M Enterprise data (e.g. product catalog) User data (e.g. personal kno w l edge) Created by iconfield from Noun Project APIs Apps Retrieval Augmented Generation (RAG) Tool calling
9. L L M Enterprise data (product catalog) User data (personal kno w l edge) Retrieval Index Augmented Generation Prompt Query Response
10. L L M Query Will my flight be on time? Flight Data 􀷰 Calendar 􀉉 T i m e 􀐫 ?
11. L L M Query Will my flight be on time? Flight Data 􀷰 Calendar 􀉉 T i m e 􀐫 ?
12. L L M Query Will my flight be on time? Flight Data 􀷰 Calendar 􀉉 T i m e 􀐫 ? Tool calling
13. Tool calling with Genkit
15. Supports your favourite language(s)
16. Supports a broad spectrum of models
17. Easily switch models, no code changes needed
18. Build reusable workflows (both AI and non-AI)
19. Powerful developer tools & deploy anywhere
22. im port { genkit } from 'genkit'; im port { googleAI } from '@ genkit-ai/google-genai'; const ai = genkit({ plugins: [googleAI()], model: googleAI . m odel('ge m i ni-2.5-flash'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); A quick overview of Genkit Import Genkit
23. im port { genkit } from 'genkit'; im port { googleAI } from '@ genkit-ai/google-genai'; const ai = genkit({ plugins: [googleAI()], model: googleAI . m odel('ge m i ni-2.5-flash'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); A quick overview of Genkit Set up Genkit
24. im port { genkit } from 'genkit'; im port { googleAI } from '@ genkit-ai/google-genai'; const ai = genkit({ plugins: [googleAI()], model: googleAI . m odel('ge m i ni-2.5-flash'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); A quick overview of Genkit Configure model
25. im port { genkit } from 'genkit'; im port { googleAI } from '@ genkit-ai/google-genai'; const ai = genkit({ plugins: [googleAI()], model: googleAI . m odel('ge m i ni-2.5-flash'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); A quick overview of Genkit Call the model
26. im port { genkit } from 'genkit'; im port { googleAI } from '@ genkit-ai/google-genai'; const ai = genkit({ plugins: [googleAI()], model: googleAI . m odel('ge m i ni-2.5-flash'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); A quick overview of Genkit Our prompt
27. im port { genkit } from 'genkit'; im port { googleAI } from '@ genkit-ai/google-genai'; const ai = genkit({ plugins: [googleAI()], model: googleAI . m odel('ge m i ni-2.5-flash'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); A quick overview of Genkit Result
28. Unified Model API
29. im port { genkit } from 'genkit'; const ai = genkit({ plugins: [ ], model: , }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); Unified Model API im port { googleAI } from '@ genkit-ai/google-genai'; googleAI() googleAI .m odel('ge m i ni-2.5-flash')
30. im port { genkit } from 'genkit'; const ai = genkit({ plugins: [ ], model: , }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); Unified Model API im port { openAI } from '@ genkit-ai/compat-oai/openai'; openAI() openAI . m odel('gpt-4o')
31. im port { genkit } from 'genkit'; im port { openAI } from '@ genkit-ai/compat-oai/openai'; const ai = genkit({ plugins: [openAI()], model: openAI . m odel('gpt-4o'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); Unified Model API im port { openAI } from '@ genkit-ai/compat-oai/openai'; openAI() openAI . m odel('gpt-4o')
32. im port { genkit } from 'genkit'; im port { openAI } from '@ genkit-ai/compat-oai/openai'; const ai = genkit({ plugins: [openAI()], model: openAI . m odel('gpt-4o'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); Unified Model API im port { openAI } from '@ genkit-ai/compat-oai/openai'; openAI() openAI . m odel('gpt-4o')
33. im port { genkit } from 'genkit'; im port { openAI } from '@ genkit-ai/compat-oai/openai'; const ai = genkit({ plugins: [openAI()], model: openAI . m odel('gpt-4o'), }); const { text } = await ai.generate({ prompt: "Hello, Hamburg" }); console.log(text); Unified Model API im port { openAI } from '@ genkit-ai/compat-oai/openai'; openAI() openAI . m odel('gpt-4o')
34. Genkit Flows
35. /fl ə ʊ/
36. /fl ə ʊ/ A flow is a special Genkit function that wraps your AI logic to provide: • Type-safe inputs and outputs • Streaming support • Developer UI integration • Easy deployment
37. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow Define a flow
38. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow Schema for the data the flow expects
39. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow Input parameter
40. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow String
41. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow Minimum and maximum length
42. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow Schema of the output
43. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow Input parameter
44. export const greetingFlow = ai.defineFlo w ( { name: 'greetingFlo w ' , inputSchema: z.object({ name: z.string() . m i n(1) . m ax(100), }), outputSchema: z.string(), }, async ({ name }) = > { const { text } = await ai.generate({ prompt: `Generate a greeting message for ${ name}.`, }); return text; }); A simple Genkit Flow Using the input parameter
45. Name of the flow
46. Name of the flow Input parameters
47. Name of the flow Input parameters Flow output
48. Composing Flows
49. export const greetingBy Im ageFlow = ai.defineFlo w( { name: 'greetingBy I m ageFlo w ' , inputSchema: z.object({ im ageUrl: z.string().url(), }), outputSchema: z.string(), }, async ({ im ageUrl }) = > { const { result } = await analyze Im ageFlo w . run({ im ageUrl }); const greeting = await greetingFlo w. run({ name: result }); return `${ greeting.result}`; }); Composing Flows Call the first flow
50. export const greetingBy Im ageFlow = ai.defineFlo w( { name: 'greetingBy I m ageFlo w ' , inputSchema: z.object({ im ageUrl: z.string().url(), }), outputSchema: z.string(), }, async ({ im ageUrl }) = > { const { result } = await analyze Im ageFlo w . run({ im ageUrl }); const greeting = await greetingFlo w. run({ name: result }); return `${ greeting.result}`; }); Composing Flows Call the second flow
52. Demo Tool calling with Genkit
54. Personal travel assistant
55. Personal travel assistant Documents 􀈿 Personal Knowledge Assistant Will my flight be on time? 􀉪 Which documents did I work on last week?
57. Personal travel assistant Documents 􀈿 Personal Knowledge Assistant Will my flight be on time? 􀉪 Which documents did I work on last week?
59. The solution
62. 􁀘 MCP = USB-C po rt for AI applications
63. MCP Standardised Protocol Chat interface IDEs Other AI applications Data and file systems Development tools Productivity tools Other applications AI applications Data sources / services / tools bidirectional data flow bidirectional data flow
64. MCP Standardised Protocol Chat interface Data and file systems AI applications Data sources / services / tools bidirectional data flow bidirectional data flow MCP Host MCP Server MCP Client Transport (stdio / SSE)
65. Let’s build an MCP server!
66. Official SDKs
67. Official SDKs
68. Official SDKs … and there is also
69. Building an MCP Server with Genkit
70. Use our new MCP server Connect transpo r Install Genkit Create a tool Set up MCP server
71. npm i genkit @genkit-ai/mcp
72. Create a tool const message = `Hello, ${ name.toUpperCase()}!`;
73. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { return message; } ); Create a tool Define a tool const message = `Hello, $ { name.toUpperCase()}!`;
74. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { const message = `Hello, $ { name.toUpperCase()}!`; return message; } ); Create a tool This tells the model what our tool can do and which input / output it can handle
75. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { const message = `Hello, $ { name.toUpperCase()}!`; return message; } ); Create a tool
76. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { const message = `Hello, $ { name.toUpperCase()}!`; return message; } ); Create a tool Helps the model understand what the tool can do
77. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { const message = `Hello, $ { name.toUpperCase()}!`; return message; } ); Create a tool
78. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { const message = `Hello, $ { name.toUpperCase()}!`; return message; } ); Create a tool
79. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { const message = `Hello, $ { name.toUpperCase()}!`; return message; } ); Create a tool
80. ai.defineTool( { name: 'say-hello', description: 'say hello to the user', inputSchema: z.object({ name: z.string().describe("Name of the person"), }), outputSchema: z.string(), }, async ({ name }) = > { const message = `Hello, $ { name.toUpperCase()}!`; return message; } ); Create a tool Tool function
81. const server = createMcpServer(ai, { name: 'helloworld', version: ‘1.0.0', }); Set up the server This will automatically expose all registered tools and prompts
82. server.setup().then(async () => { await server.start(); const transport = new StdioServerTransport(); await server!.server ?. connect(transport); }); Connect the transport STDIO
83. Demo Using MCP servers
84. Using Genkit
86. Using Claude
88. Why use MCP?
89. Unified access to APIs / data sources 1/
90. Unified access to APIs / data sources 1/ Access to local apps and APIs 2/ Created by iconfield from Noun Project APIs Apps
91. One more thing…
94. Thanks!
95. Thanks! @peterfriese.dev Created by Mamank from Noun Project https: / / peterfriese.dev peterfriese peterfriese
96. Q&A @peterfriese.dev Created by Mamank from Noun Project https: / / peterfriese.dev peterfriese peterfriese