[
  {
    "startMs": 1309,
    "text": "[music]"
  },
  {
    "startMs": 12639,
    "text": "Good. Um, thank you all for for coming"
  },
  {
    "startMs": 15120,
    "text": "out. Um, I'm going to talk today about"
  },
  {
    "startMs": 16880,
    "text": "one of the weirdest pieces of software"
  },
  {
    "startMs": 18640,
    "text": "I've ever written. It's sort of on the"
  },
  {
    "startMs": 20080,
    "text": "edge of a whole lot of stuff I've been"
  },
  {
    "startMs": 21520,
    "text": "putting putting forward into the world."
  },
  {
    "startMs": 23680,
    "text": "Um, so join me if you will. We're going"
  },
  {
    "startMs": 25680,
    "text": "to try and have the most reasoned"
  },
  {
    "startMs": 27359,
    "text": "approach to to a very strange thing that"
  },
  {
    "startMs": 29920,
    "text": "agents and MCP and other things have"
  },
  {
    "startMs": 31920,
    "text": "enabled. And so to begin, I want to talk"
  },
  {
    "startMs": 35040,
    "text": "about MCP apps. I don't know if any of"
  },
  {
    "startMs": 36480,
    "text": "you were able to join any of the other"
  },
  {
    "startMs": 38800,
    "text": "talks earlier today. Maybe the one that"
  },
  {
    "startMs": 40800,
    "text": "um Edo and Lead just gave maybe an hour"
  },
  {
    "startMs": 43360,
    "text": "ago. Just a show of hands. MCP apps"
  },
  {
    "startMs": 46719,
    "text": "familiarity."
  },
  {
    "startMs": 49039,
    "text": "Okay, this is probably the best crowd"
  },
  {
    "startMs": 51120,
    "text": "I've ever given this talk to actually."
  },
  {
    "startMs": 52559,
    "text": "So that's that's fantastic. Um, for"
  },
  {
    "startMs": 54879,
    "text": "those that didn't put their hands up,"
  },
  {
    "startMs": 56160,
    "text": "MCP apps is an extension of the MCP"
  },
  {
    "startMs": 58480,
    "text": "protocol that was introduced I think in"
  },
  {
    "startMs": 59920,
    "text": "January of this year. And the idea is"
  },
  {
    "startMs": 62559,
    "text": "this is a typical request response cycle"
  },
  {
    "startMs": 65439,
    "text": "for an MCP um tool. The user makes a"
  },
  {
    "startMs": 68799,
    "text": "request to the agent. The agent in turn"
  },
  {
    "startMs": 71360,
    "text": "decides to use an MCP tool that's hosted"
  },
  {
    "startMs": 74159,
    "text": "on an MCP server. A tool result comes"
  },
  {
    "startMs": 76560,
    "text": "back into the agent's context and the"
  },
  {
    "startMs": 78880,
    "text": "agent chooses to form some response and"
  },
  {
    "startMs": 81759,
    "text": "send it out to the user. And so"
  },
  {
    "startMs": 83439,
    "text": "fundamentally MCP servers are these"
  },
  {
    "startMs": 85040,
    "text": "fantastic ways of adding uh functions"
  },
  {
    "startMs": 87040,
    "text": "and business logic to your agents but"
  },
  {
    "startMs": 89840,
    "text": "never a direct connection between a user"
  },
  {
    "startMs": 92240,
    "text": "and the MCP server. It always goes"
  },
  {
    "startMs": 93840,
    "text": "through the brain of the agent and more"
  },
  {
    "startMs": 95360,
    "text": "importantly through the context window"
  },
  {
    "startMs": 96560,
    "text": "of the agent. So MCP apps are an"
  },
  {
    "startMs": 99360,
    "text": "extension of this which allow us"
  },
  {
    "startMs": 101040,
    "text": "actually to bypass the agent and instead"
  },
  {
    "startMs": 103920,
    "text": "what happens is the following. The user"
  },
  {
    "startMs": 105439,
    "text": "requests something from the agent. The"
  },
  {
    "startMs": 107040,
    "text": "agent uses a tool, but instead of that"
  },
  {
    "startMs": 109040,
    "text": "tool request going back to the agent, it"
  },
  {
    "startMs": 110880,
    "text": "is sent out to the user and it's sent"
  },
  {
    "startMs": 112479,
    "text": "out as HTML, CSS, JavaScript. It's a"
  },
  {
    "startMs": 115600,
    "text": "full UI and it can be whatever you want"
  },
  {
    "startMs": 117600,
    "text": "it to be. And so the idea is you have"
  },
  {
    "startMs": 119840,
    "text": "this way to make to basically put the"
  },
  {
    "startMs": 122159,
    "text": "internet into your agent, so to speak."
  },
  {
    "startMs": 123840,
    "text": "You can ship any custom branded useful"
  },
  {
    "startMs": 126799,
    "text": "UI that you want. You can let the user"
  },
  {
    "startMs": 128800,
    "text": "have any interactive experience that"
  },
  {
    "startMs": 130720,
    "text": "they want. And then the user, as you can"
  },
  {
    "startMs": 132720,
    "text": "see in the diagram, the user now can"
  },
  {
    "startMs": 134239,
    "text": "interact with the application. they can"
  },
  {
    "startMs": 136319,
    "text": "use the tools, they can send information"
  },
  {
    "startMs": 138239,
    "text": "back into a backend host on that app and"
  },
  {
    "startMs": 140480,
    "text": "really get a full experience. You can"
  },
  {
    "startMs": 141680,
    "text": "imagine booking a table at a restaurant"
  },
  {
    "startMs": 143760,
    "text": "or um changing your seat on a plane or"
  },
  {
    "startMs": 147840,
    "text": "interacting with a schedule for AI"
  },
  {
    "startMs": 149200,
    "text": "engineer. There's a lot of things that"
  },
  {
    "startMs": 150160,
    "text": "you can do as a user now where the agent"
  },
  {
    "startMs": 152080,
    "text": "facilitated it, but you are going to"
  },
  {
    "startMs": 154160,
    "text": "interact as a human. And there's an"
  },
  {
    "startMs": 155760,
    "text": "extension coming now. This is going to"
  },
  {
    "startMs": 157200,
    "text": "come out in um in the July MCP release"
  },
  {
    "startMs": 160879,
    "text": "where the agent can actually interact"
  },
  {
    "startMs": 162319,
    "text": "with the app as well. And this will tee"
  },
  {
    "startMs": 164239,
    "text": "up some really interesting use cases"
  },
  {
    "startMs": 165680,
    "text": "we're not going to talk about today, but"
  },
  {
    "startMs": 167120,
    "text": "you could hypothetically play a game of"
  },
  {
    "startMs": 168720,
    "text": "chess against the agent now in a visual"
  },
  {
    "startMs": 171280,
    "text": "app where you make a move and then the"
  },
  {
    "startMs": 172720,
    "text": "agent interacts with the app as well."
  },
  {
    "startMs": 174319,
    "text": "And so I think that's going to open up a"
  },
  {
    "startMs": 175760,
    "text": "whole new world of possibilities."
  },
  {
    "startMs": 179200,
    "text": "Now um some of you may know a framework"
  },
  {
    "startMs": 182080,
    "text": "that that I'm the author of and my"
  },
  {
    "startMs": 183599,
    "text": "company maintains called FastMPP. Um"
  },
  {
    "startMs": 185599,
    "text": "fast MCP is one of the most popular ways"
  },
  {
    "startMs": 187280,
    "text": "of building MCP servers. And so whenever"
  },
  {
    "startMs": 189599,
    "text": "new cool things come to the world of"
  },
  {
    "startMs": 191599,
    "text": "MCP, the first thing I wonder is how can"
  },
  {
    "startMs": 194879,
    "text": "I deliver this to our users? And one of"
  },
  {
    "startMs": 197440,
    "text": "the most important things I have to"
  },
  {
    "startMs": 198560,
    "text": "share with you about our user base is"
  },
  {
    "startMs": 200640,
    "text": "that they're mostly Python engineers."
  },
  {
    "startMs": 203280,
    "text": "And so and so this is a little bit of a"
  },
  {
    "startMs": 206159,
    "text": "problem when we want to deliver"
  },
  {
    "startMs": 207680,
    "text": "frontends and UIs because how are we"
  },
  {
    "startMs": 210159,
    "text": "actually going to do that? And this is"
  },
  {
    "startMs": 211440,
    "text": "the point in the talk where I reveal"
  },
  {
    "startMs": 212560,
    "text": "that I don't remember what the next"
  },
  {
    "startMs": 213680,
    "text": "slide exactly is. So we're going to take"
  },
  {
    "startMs": 214879,
    "text": "a peek at it. Nope, we're going to come"
  },
  {
    "startMs": 216080,
    "text": "back. Um, we we have we have a challenge"
  },
  {
    "startMs": 219519,
    "text": "now. Uh, how are we going to have have"
  },
  {
    "startMs": 221840,
    "text": "Python engineers build UIs that are best"
  },
  {
    "startMs": 225920,
    "text": "practice, that are interactive, that are"
  },
  {
    "startMs": 228239,
    "text": "beautiful, that are useful without"
  },
  {
    "startMs": 230480,
    "text": "pretending that we're going to do"
  },
  {
    "startMs": 231599,
    "text": "something silly, something that's been"
  },
  {
    "startMs": 233200,
    "text": "tried, and jam all of the front end, all"
  },
  {
    "startMs": 235599,
    "text": "of the ecosystem, everything into Python"
  },
  {
    "startMs": 237840,
    "text": "in some sort of like weird compromised"
  },
  {
    "startMs": 240159,
    "text": "haphazard Frankenstein of a system. And"
  },
  {
    "startMs": 242879,
    "text": "so I really struggled with this. I need"
  },
  {
    "startMs": 244720,
    "text": "I really need I feel an obligation to"
  },
  {
    "startMs": 246560,
    "text": "find a way to deliver this, but I I"
  },
  {
    "startMs": 249040,
    "text": "can't I can't pretend we're going to"
  },
  {
    "startMs": 250640,
    "text": "ship React and Python. It's not going to"
  },
  {
    "startMs": 252720,
    "text": "work. And so we thought pretty hard"
  },
  {
    "startMs": 254400,
    "text": "about who are our users in the fastmcp"
  },
  {
    "startMs": 256880,
    "text": "ecosystem. Who are these Python"
  },
  {
    "startMs": 258479,
    "text": "developers who tend to be in"
  },
  {
    "startMs": 259759,
    "text": "enterprises? What are they doing and"
  },
  {
    "startMs": 261519,
    "text": "what do they need these UIs for? What do"
  },
  {
    "startMs": 263040,
    "text": "they need these MCP apps for? Um what"
  },
  {
    "startMs": 265600,
    "text": "they don't need is consumer-grade custom"
  },
  {
    "startMs": 268880,
    "text": "UIs that are fully branded. That that's"
  },
  {
    "startMs": 271360,
    "text": "not what these folks are doing. what"
  },
  {
    "startMs": 273120,
    "text": "they are uh primarily charged with is"
  },
  {
    "startMs": 274880,
    "text": "sharing information throughout their"
  },
  {
    "startMs": 276400,
    "text": "throughout their organization for"
  },
  {
    "startMs": 278000,
    "text": "collecting information throughout their"
  },
  {
    "startMs": 279520,
    "text": "organization and so it changed the"
  },
  {
    "startMs": 281680,
    "text": "nature of what we expect them to do"
  },
  {
    "startMs": 283680,
    "text": "within MCP apps framework and that"
  },
  {
    "startMs": 285440,
    "text": "constraint became really useful so"
  },
  {
    "startMs": 287199,
    "text": "fundamentally we expect that they're"
  },
  {
    "startMs": 288960,
    "text": "going to do things like build tables"
  },
  {
    "startMs": 291840,
    "text": "they're going to collect information"
  },
  {
    "startMs": 293040,
    "text": "through forms and they're going to want"
  },
  {
    "startMs": 294880,
    "text": "to share charts and so fundamentally"
  },
  {
    "startMs": 297360,
    "text": "with this constraint we can introduce a"
  },
  {
    "startMs": 300800,
    "text": "piece of software that we open sourced a"
  },
  {
    "startMs": 302560,
    "text": "few months ago and has been surprisingly"
  },
  {
    "startMs": 304080,
    "text": "popular among this crowd called prefab"
  },
  {
    "startMs": 306639,
    "text": "and it's a scoped UI building framework"
  },
  {
    "startMs": 310240,
    "text": "for the purpose of delivering UIs"
  },
  {
    "startMs": 312160,
    "text": "through an agent for the set of purposes"
  },
  {
    "startMs": 314560,
    "text": "that I mentioned a moment ago. So this"
  },
  {
    "startMs": 316960,
    "text": "is a hello world card. You might see"
  },
  {
    "startMs": 319120,
    "text": "this in any front-end framework,"
  },
  {
    "startMs": 321199,
    "text": "literally anyone. It'll have something"
  },
  {
    "startMs": 322479,
    "text": "that looks like this and it's on their"
  },
  {
    "startMs": 323759,
    "text": "website and you you type your name in"
  },
  {
    "startMs": 325440,
    "text": "and it it updates live. But of course,"
  },
  {
    "startMs": 328000,
    "text": "the weird thing about this one is that"
  },
  {
    "startMs": 329840,
    "text": "the code that generated it is entirely"
  },
  {
    "startMs": 331360,
    "text": "written in Python. And so I hope that"
  },
  {
    "startMs": 335039,
    "text": "you're feeling what I feel when I look"
  },
  {
    "startMs": 337120,
    "text": "at this, which is a really weird"
  },
  {
    "startMs": 339039,
    "text": "combination of like, yes, that's cool,"
  },
  {
    "startMs": 340720,
    "text": "and this really freaks me out. The yes,"
  },
  {
    "startMs": 343759,
    "text": "that's cool, comes from the fact that I"
  },
  {
    "startMs": 345520,
    "text": "think there's something about this code,"
  },
  {
    "startMs": 346880,
    "text": "even if you can't see it up close, I can"
  },
  {
    "startMs": 348400,
    "text": "make it a little bigger. There's"
  },
  {
    "startMs": 349919,
    "text": "something about this that like kind of"
  },
  {
    "startMs": 351280,
    "text": "makes sense. You can see the structure"
  },
  {
    "startMs": 353039,
    "text": "of the of the of the UI in the code, but"
  },
  {
    "startMs": 355919,
    "text": "there's also something about it that's"
  },
  {
    "startMs": 357360,
    "text": "obviously alien and a little bit a"
  },
  {
    "startMs": 359440,
    "text": "little bit odd. And we come to this"
  },
  {
    "startMs": 361520,
    "text": "conclusion when you when you feel that"
  },
  {
    "startMs": 363039,
    "text": "when you look at it, which is that when"
  },
  {
    "startMs": 364560,
    "text": "you compose a front end in Python, it's"
  },
  {
    "startMs": 366880,
    "text": "actually starts to feel good as long as"
  },
  {
    "startMs": 369360,
    "text": "we scope the challenge right. We are not"
  },
  {
    "startMs": 371039,
    "text": "trying to build a front end from"
  },
  {
    "startMs": 372319,
    "text": "scratch. We are trying to compose a"
  },
  {
    "startMs": 374479,
    "text": "front end from a bunch of worldclass"
  },
  {
    "startMs": 377280,
    "text": "well-designed components. And that's how"
  },
  {
    "startMs": 379520,
    "text": "we keep the guardrails and that's how we"
  },
  {
    "startMs": 381039,
    "text": "keep the user in mind. The user here is"
  },
  {
    "startMs": 383039,
    "text": "not trying to do something arbitrary."
  },
  {
    "startMs": 384800,
    "text": "They're trying to take a well structured"
  },
  {
    "startMs": 387280,
    "text": "front end and put it in front of um"
  },
  {
    "startMs": 388639,
    "text": "whomever they're delivering it to. And"
  },
  {
    "startMs": 390080,
    "text": "so here's a little quick tour of that"
  },
  {
    "startMs": 391440,
    "text": "DSL. Um primarily we're using context"
  },
  {
    "startMs": 393919,
    "text": "managers. For those of you who do know"
  },
  {
    "startMs": 395360,
    "text": "fastmcp, you know that arguably you"
  },
  {
    "startMs": 397120,
    "text": "could reduce fastmc down and say the"
  },
  {
    "startMs": 399840,
    "text": "core innovation of fastmcp is that we"
  },
  {
    "startMs": 401440,
    "text": "used a python decorator to build an"
  },
  {
    "startMs": 403199,
    "text": "entire MCP server. So if you want to"
  },
  {
    "startMs": 405199,
    "text": "take the same reductive approach to"
  },
  {
    "startMs": 406400,
    "text": "prefab, you could say we use a context"
  },
  {
    "startMs": 407919,
    "text": "manager to build an entire UI. And by"
  },
  {
    "startMs": 410319,
    "text": "nesting components with as context"
  },
  {
    "startMs": 412960,
    "text": "managers as you see here, we are"
  },
  {
    "startMs": 414800,
    "text": "building up the exact same structure in"
  },
  {
    "startMs": 417520,
    "text": "the UI. It feels very natural when you"
  },
  {
    "startMs": 420000,
    "text": "read it. You can see how things are"
  },
  {
    "startMs": 421360,
    "text": "structured. Um each element of the UI,"
  },
  {
    "startMs": 424000,
    "text": "each component, which is a beautiful"
  },
  {
    "startMs": 425520,
    "text": "shaden component when it's rendered, as"
  },
  {
    "startMs": 427599,
    "text": "you can see here, is a class that you"
  },
  {
    "startMs": 429919,
    "text": "instantiate. You can parameterize it."
  },
  {
    "startMs": 431599,
    "text": "you can pass it stuff like CSS classes"
  },
  {
    "startMs": 433599,
    "text": "and and make it look however you want."
  },
  {
    "startMs": 436080,
    "text": "And then the last thing which we're not"
  },
  {
    "startMs": 437280,
    "text": "going to have enough time to really"
  },
  {
    "startMs": 438240,
    "text": "explore today is these reactive"
  },
  {
    "startMs": 440479,
    "text": "variables. Um I'll show you a demo of"
  },
  {
    "startMs": 441919,
    "text": "those in a moment, but essentially we"
  },
  {
    "startMs": 443360,
    "text": "have a full way to um create client side"
  },
  {
    "startMs": 446000,
    "text": "interactivity and bind data between"
  },
  {
    "startMs": 448080,
    "text": "components that allows you to build"
  },
  {
    "startMs": 449199,
    "text": "these really rich experiences again"
  },
  {
    "startMs": 451280,
    "text": "without having to go fully into the"
  },
  {
    "startMs": 453440,
    "text": "JavaScript world and leave an ecosystem"
  },
  {
    "startMs": 455120,
    "text": "that my user base at least is extremely"
  },
  {
    "startMs": 457680,
    "text": "comfortable with. Um, and this is the"
  },
  {
    "startMs": 460000,
    "text": "pipeline that prefab is essentially"
  },
  {
    "startMs": 461520,
    "text": "exposing. We use a Python DSL that I"
  },
  {
    "startMs": 463759,
    "text": "just shared with you. We use that to"
  },
  {
    "startMs": 465520,
    "text": "build a declarative representation of a"
  },
  {
    "startMs": 467759,
    "text": "UI that then gets serialized into a JSON"
  },
  {
    "startMs": 471199,
    "text": "protocol. And that JSON protocol is"
  },
  {
    "startMs": 473759,
    "text": "ultimately rendered by a React app which"
  },
  {
    "startMs": 476000,
    "text": "is hosted as the actual MCP app. And so"
  },
  {
    "startMs": 478479,
    "text": "this is going to open up a whole lot of"
  },
  {
    "startMs": 479919,
    "text": "possibilities for us that again I'm"
  },
  {
    "startMs": 481199,
    "text": "going to show you in just a second. But"
  },
  {
    "startMs": 482479,
    "text": "the key to this whole thing is the JSON"
  },
  {
    "startMs": 484160,
    "text": "in the middle. The Python is actually an"
  },
  {
    "startMs": 486240,
    "text": "accident that I discovered after the"
  },
  {
    "startMs": 487520,
    "text": "fact because it was a weird"
  },
  {
    "startMs": 488400,
    "text": "idiosyncratic thing that I wanted. The"
  },
  {
    "startMs": 490000,
    "text": "point of this was can we create a"
  },
  {
    "startMs": 492319,
    "text": "serializable representation of a UI and"
  },
  {
    "startMs": 495680,
    "text": "that's the JSON protocol again. And"
  },
  {
    "startMs": 497840,
    "text": "because it's serializable, I can"
  },
  {
    "startMs": 499360,
    "text": "generate it from an agent. I can send it"
  },
  {
    "startMs": 501120,
    "text": "to an agent. I can generate it as a"
  },
  {
    "startMs": 502879,
    "text": "human and ask an agent to modify."
  },
  {
    "startMs": 504479,
    "text": "There's all this cool stuff that happens"
  },
  {
    "startMs": 505919,
    "text": "because of that intermediate"
  },
  {
    "startMs": 507039,
    "text": "representation in JSON. And then when"
  },
  {
    "startMs": 509120,
    "text": "the when the Python DSL just fell out of"
  },
  {
    "startMs": 511120,
    "text": "this and was really beautiful and easy"
  },
  {
    "startMs": 512320,
    "text": "to use, I kind of felt like we had"
  },
  {
    "startMs": 513919,
    "text": "something"
  },
  {
    "startMs": 514959,
    "text": "So uh we have these docs and sort of to"
  },
  {
    "startMs": 518159,
    "text": "prove the point this was another"
  },
  {
    "startMs": 519360,
    "text": "constraint we took on this is I don't"
  },
  {
    "startMs": 521039,
    "text": "even know what this is this is a doc"
  },
  {
    "startMs": 522320,
    "text": "these are the docs for the data table"
  },
  {
    "startMs": 523839,
    "text": "component in prefab I think there's 130"
  },
  {
    "startMs": 526000,
    "text": "or 140 components that we ship that you"
  },
  {
    "startMs": 528240,
    "text": "can compose into an arbitrary form the"
  },
  {
    "startMs": 530959,
    "text": "docs for prefab are 100% rendered in"
  },
  {
    "startMs": 534480,
    "text": "prefab so the data table that's here in"
  },
  {
    "startMs": 536399,
    "text": "the basic usage it is live rendered in"
  },
  {
    "startMs": 538880,
    "text": "prefab the Python code you can see it"
  },
  {
    "startMs": 540800,
    "text": "sneaking in at the bottom of the screen"
  },
  {
    "startMs": 542160,
    "text": "that Python code is being rendered live"
  },
  {
    "startMs": 543920,
    "text": "by the renderer to generate that. If you"
  },
  {
    "startMs": 546160,
    "text": "want, you can take any example in the"
  },
  {
    "startMs": 547600,
    "text": "prefab docs, you can click a link, pop"
  },
  {
    "startMs": 549440,
    "text": "them into the playground, and you can"
  },
  {
    "startMs": 550720,
    "text": "edit the code live, the Python code"
  },
  {
    "startMs": 552560,
    "text": "live, and you will see the UI update."
  },
  {
    "startMs": 555519,
    "text": "And again, this is super weird. If"
  },
  {
    "startMs": 557200,
    "text": "you're feeling a little uncomfortable"
  },
  {
    "startMs": 558399,
    "text": "about this, that is that is okay. It"
  },
  {
    "startMs": 560240,
    "text": "makes a lot more sense when we constrain"
  },
  {
    "startMs": 561600,
    "text": "the problem. And remember that we're"
  },
  {
    "startMs": 562880,
    "text": "composing a UI rather than building it."
  },
  {
    "startMs": 565760,
    "text": "So, I want to bring this back to the"
  },
  {
    "startMs": 567040,
    "text": "thing I opened with now, which is MCP"
  },
  {
    "startMs": 568959,
    "text": "servers and more specifically MCP apps."
  },
  {
    "startMs": 571440,
    "text": "You are welcome to use prefab for any"
  },
  {
    "startMs": 573440,
    "text": "kind of front-end problem you have. My"
  },
  {
    "startMs": 575360,
    "text": "team has started using it for small"
  },
  {
    "startMs": 576880,
    "text": "interactive data apps and things to"
  },
  {
    "startMs": 578560,
    "text": "explore. They've been building"
  },
  {
    "startMs": 579839,
    "text": "presentations with it. We ship a a dark"
  },
  {
    "startMs": 581920,
    "text": "mode theme that honestly looks kind of"
  },
  {
    "startMs": 583600,
    "text": "like the one I'm showing you right now"
  },
  {
    "startMs": 584800,
    "text": "to make slides and presentations. You"
  },
  {
    "startMs": 587279,
    "text": "can do a lot of stuff with it. But the"
  },
  {
    "startMs": 588640,
    "text": "reason we built it, the use case that it"
  },
  {
    "startMs": 590800,
    "text": "is satisfying is for MCP servers. And so"
  },
  {
    "startMs": 593519,
    "text": "um I want to give you a quick tour of"
  },
  {
    "startMs": 595360,
    "text": "three ways that you can use it, three"
  },
  {
    "startMs": 596959,
    "text": "increasingly sophisticated ways that you"
  },
  {
    "startMs": 598399,
    "text": "can use it in your MCP server. The first"
  },
  {
    "startMs": 600480,
    "text": "is to build an interactive tool. As I"
  },
  {
    "startMs": 603120,
    "text": "showed you at the beginning of the talk,"
  },
  {
    "startMs": 604320,
    "text": "typically an MCP tool is something your"
  },
  {
    "startMs": 606160,
    "text": "agent calls and the agent gets the"
  },
  {
    "startMs": 608000,
    "text": "result and you don't get to interact"
  },
  {
    "startMs": 609600,
    "text": "with it at all. So what's the easiest"
  },
  {
    "startMs": 611760,
    "text": "way that we can advance that that"
  },
  {
    "startMs": 613440,
    "text": "interactive functionality?"
  },
  {
    "startMs": 615920,
    "text": "I'm going to show you here. This is a"
  },
  {
    "startMs": 617519,
    "text": "fastm tool. It's been decorated with a"
  },
  {
    "startMs": 619600,
    "text": "tool decorator as you can see and it's"
  },
  {
    "startMs": 621279,
    "text": "just a Python function that returns some"
  },
  {
    "startMs": 622800,
    "text": "information. Bearing in mind this"
  },
  {
    "startMs": 624240,
    "text": "information will go to the agent, not"
  },
  {
    "startMs": 625519,
    "text": "the user. If we want to turn this into a"
  },
  {
    "startMs": 627680,
    "text": "fully interactive tool with prefab,"
  },
  {
    "startMs": 631040,
    "text": "we're going to make one change. Instead"
  },
  {
    "startMs": 633120,
    "text": "of returning a Python dictionary at the"
  },
  {
    "startMs": 634880,
    "text": "end, which will go to the agent, we're"
  },
  {
    "startMs": 636480,
    "text": "going to return a prefab component. In"
  },
  {
    "startMs": 638160,
    "text": "this case, it's the data table. These"
  },
  {
    "startMs": 639519,
    "text": "are the this is what I just showed you"
  },
  {
    "startMs": 640640,
    "text": "the docs for a moment ago. And when we"
  },
  {
    "startMs": 642800,
    "text": "return this prefab component, FastMPP"
  },
  {
    "startMs": 646000,
    "text": "will automatically detect that. It will"
  },
  {
    "startMs": 647600,
    "text": "automatically infer that you in fact"
  },
  {
    "startMs": 649040,
    "text": "want to return an MCP app. and it will"
  },
  {
    "startMs": 651040,
    "text": "spin up all the machinery to get the"
  },
  {
    "startMs": 652480,
    "text": "HTML, the JavaScript, the CSS, the"
  },
  {
    "startMs": 654320,
    "text": "render, everything in place so that your"
  },
  {
    "startMs": 655839,
    "text": "user will see a data table. Here's what"
  },
  {
    "startMs": 658560,
    "text": "this looks like in practice. This is"
  },
  {
    "startMs": 659839,
    "text": "using the goose client, which is an"
  },
  {
    "startMs": 661200,
    "text": "excellent one. Um, I asked a server that"
  },
  {
    "startMs": 664160,
    "text": "had the function I just uh showed you,"
  },
  {
    "startMs": 665760,
    "text": "show me the team directory. And what"
  },
  {
    "startMs": 667519,
    "text": "pops up uh this would be better as a"
  },
  {
    "startMs": 669040,
    "text": "GIF. I apologize, but what pops up is a"
  },
  {
    "startMs": 670800,
    "text": "fully interactive data table component."
  },
  {
    "startMs": 672640,
    "text": "It supports um searching and filtering"
  },
  {
    "startMs": 675440,
    "text": "and sorting and pagionation and all this"
  },
  {
    "startMs": 677600,
    "text": "stuff. And all it is is what I showed"
  },
  {
    "startMs": 679279,
    "text": "you a moment ago. Just return the data"
  },
  {
    "startMs": 681279,
    "text": "table class and all this will be taken"
  },
  {
    "startMs": 682959,
    "text": "care of. We can go a step further. What"
  },
  {
    "startMs": 685120,
    "text": "if in addition to the data table, we"
  },
  {
    "startMs": 686640,
    "text": "want to show a pie chart right next to"
  },
  {
    "startMs": 688560,
    "text": "the data table that breaks down this"
  },
  {
    "startMs": 690000,
    "text": "team directory. As you might imagine,"
  },
  {
    "startMs": 692000,
    "text": "very, very, very similar code. Instead"
  },
  {
    "startMs": 694000,
    "text": "of the data table alone, we're now going"
  },
  {
    "startMs": 695600,
    "text": "to import a grid and a pie chart. And if"
  },
  {
    "startMs": 698160,
    "text": "you look at the bottom, you'll see that"
  },
  {
    "startMs": 699279,
    "text": "we compose both the pie chart and the"
  },
  {
    "startMs": 701279,
    "text": "data table into a grid very naturally"
  },
  {
    "startMs": 703120,
    "text": "with a context manager. And this is the"
  },
  {
    "startMs": 705920,
    "text": "result. we now get a pie chart next to"
  },
  {
    "startMs": 708399,
    "text": "our data table. So this follows a"
  },
  {
    "startMs": 710160,
    "text": "principle that we really try to hold in"
  },
  {
    "startMs": 711920,
    "text": "a lot of our software at Prefect, which"
  },
  {
    "startMs": 713360,
    "text": "is one line of code, one big noticeable"
  },
  {
    "startMs": 715279,
    "text": "change. We try to keep that complexity"
  },
  {
    "startMs": 717120,
    "text": "incremental. And so this satisfies a lot"
  },
  {
    "startMs": 718800,
    "text": "of things that I think are really"
  },
  {
    "startMs": 719760,
    "text": "important about frameworks and DSLs. Um,"
  },
  {
    "startMs": 723040,
    "text": "this is very quickly because we won't"
  },
  {
    "startMs": 724399,
    "text": "have time to go into it. This is just an"
  },
  {
    "startMs": 725920,
    "text": "example I threw together and recorded of"
  },
  {
    "startMs": 728000,
    "text": "fully client side interactivity where"
  },
  {
    "startMs": 730079,
    "text": "all of these controls are linked. Uh,"
  },
  {
    "startMs": 732320,
    "text": "stuff's updating, text is updating,"
  },
  {
    "startMs": 734480,
    "text": "values are updating. No JavaScript was"
  },
  {
    "startMs": 736480,
    "text": "written. This is just a couple of"
  },
  {
    "startMs": 738000,
    "text": "classes composed that all have the same"
  },
  {
    "startMs": 739920,
    "text": "attribute assigned. So they all work"
  },
  {
    "startMs": 741680,
    "text": "together automatically."
  },
  {
    "startMs": 743680,
    "text": "Um, oh, and I did throw in a quick code"
  },
  {
    "startMs": 746160,
    "text": "example of what that looks like. We have"
  },
  {
    "startMs": 747279,
    "text": "a class called RX, which as you may"
  },
  {
    "startMs": 749200,
    "text": "guess stands for reactive. If you use"
  },
  {
    "startMs": 751040,
    "text": "these reactive variables, you can just"
  },
  {
    "startMs": 753120,
    "text": "reference them anywhere in your code."
  },
  {
    "startMs": 754720,
    "text": "You can format them. You can you can"
  },
  {
    "startMs": 756639,
    "text": "make them the name of something and it"
  },
  {
    "startMs": 758079,
    "text": "will automatically compile into the"
  },
  {
    "startMs": 759680,
    "text": "correct uh JavaScript implementation."
  },
  {
    "startMs": 762160,
    "text": "The second thing that we can do is a"
  },
  {
    "startMs": 763440,
    "text": "fastmcp app. So if an interactive tool"
  },
  {
    "startMs": 766079,
    "text": "is sort of a oneshot here's a user"
  },
  {
    "startMs": 768160,
    "text": "interface and you can interact with it"
  },
  {
    "startMs": 769760,
    "text": "in the client a fastmcp app is a full"
  },
  {
    "startMs": 772639,
    "text": "application with a backend and in this"
  },
  {
    "startMs": 774480,
    "text": "case the MCP server is going to be the"
  },
  {
    "startMs": 776240,
    "text": "back end. We don't have time to go"
  },
  {
    "startMs": 778639,
    "text": "through a full worked example in this"
  },
  {
    "startMs": 780160,
    "text": "session but here's what the code looks"
  },
  {
    "startMs": 781680,
    "text": "like just to give you a sense of the"
  },
  {
    "startMs": 782880,
    "text": "ergonomics. We're going to write a class"
  },
  {
    "startMs": 784480,
    "text": "which is our fastmcp app and then we're"
  },
  {
    "startMs": 786399,
    "text": "going to decorate at least two uh"
  },
  {
    "startMs": 789760,
    "text": "functions with app.ui UI. That's the"
  },
  {
    "startMs": 792320,
    "text": "entry point that's going to return the"
  },
  {
    "startMs": 793680,
    "text": "prefab components that form the base UI"
  },
  {
    "startMs": 796000,
    "text": "of that application. And then at least"
  },
  {
    "startMs": 798079,
    "text": "one, I guess this is optional, so zero"
  },
  {
    "startMs": 799920,
    "text": "or more um app.tools. And these are"
  },
  {
    "startMs": 803360,
    "text": "essentially backend methods that you can"
  },
  {
    "startMs": 805680,
    "text": "now reference in the UI. So you could"
  },
  {
    "startMs": 807760,
    "text": "have a button that takes data that the"
  },
  {
    "startMs": 809839,
    "text": "user has entered into a form and sends"
  },
  {
    "startMs": 811600,
    "text": "it to a database using a decorated tool"
  },
  {
    "startMs": 814720,
    "text": "like this. One thing that we use and we"
  },
  {
    "startMs": 817519,
    "text": "ship as a built-in component now in"
  },
  {
    "startMs": 819360,
    "text": "fastmcp"
  },
  {
    "startMs": 821200,
    "text": "is an upload component. So as you can"
  },
  {
    "startMs": 823839,
    "text": "see because only the agent has access to"
  },
  {
    "startMs": 826560,
    "text": "an MCP server you can't simply upload a"
  },
  {
    "startMs": 829760,
    "text": "file to an MCP server. It has to go"
  },
  {
    "startMs": 831360,
    "text": "through the brain of the agent. And so"
  },
  {
    "startMs": 832560,
    "text": "what ends up happening is a lot of"
  },
  {
    "startMs": 833920,
    "text": "people create basically an upload tool"
  },
  {
    "startMs": 835839,
    "text": "on their MCP server forget that the"
  },
  {
    "startMs": 837920,
    "text": "agent has to actually call it. And what"
  },
  {
    "startMs": 839360,
    "text": "you end up doing is the world's most"
  },
  {
    "startMs": 840480,
    "text": "expensive copy paste operation. You give"
  },
  {
    "startMs": 842639,
    "text": "the agent a megabyte of text. the agent"
  },
  {
    "startMs": 845600,
    "text": "retypes it character by character into"
  },
  {
    "startMs": 847680,
    "text": "the MCP and now yes in fact you have"
  },
  {
    "startMs": 850399,
    "text": "uploaded it but it's extremely extremely"
  },
  {
    "startMs": 852480,
    "text": "inefficient. So this is a really good"
  },
  {
    "startMs": 854240,
    "text": "use case for an MCP app where you ask"
  },
  {
    "startMs": 857440,
    "text": "the agent to bring up the app interface"
  },
  {
    "startMs": 859600,
    "text": "you drag a file into it and now the file"
  },
  {
    "startMs": 861680,
    "text": "bypasses the agent and goes right into"
  },
  {
    "startMs": 863600,
    "text": "the server. And we've made that a"
  },
  {
    "startMs": 864959,
    "text": "oneliner like this along with a handful"
  },
  {
    "startMs": 866720,
    "text": "of other um useful tools. And is this a"
  },
  {
    "startMs": 870560,
    "text": "gift? this is not a GIF or if it is it's"
  },
  {
    "startMs": 872160,
    "text": "not rendering but it would look like"
  },
  {
    "startMs": 873440,
    "text": "this in your client in any client that"
  },
  {
    "startMs": 875600,
    "text": "supports MCP apps if you ask the agent I"
  },
  {
    "startMs": 877600,
    "text": "need to upload something it can now show"
  },
  {
    "startMs": 878959,
    "text": "you this and you can upload safely and"
  },
  {
    "startMs": 881600,
    "text": "most importantly cheaply um oh I do have"
  },
  {
    "startMs": 884800,
    "text": "a gift mind know your own slides is a"
  },
  {
    "startMs": 887440,
    "text": "good lesson from this talk so here's the"
  },
  {
    "startMs": 889760,
    "text": "agent is now interacting with a file"
  },
  {
    "startMs": 891279,
    "text": "that I just uploaded that I dragged and"
  },
  {
    "startMs": 893120,
    "text": "dropped um I'll make these slides"
  },
  {
    "startMs": 894639,
    "text": "available later if you'd like to see"
  },
  {
    "startMs": 895680,
    "text": "this or of course it's a oneliner you"
  },
  {
    "startMs": 897600,
    "text": "could try it in your servers uh this"
  },
  {
    "startMs": 899360,
    "text": "afternoon. The last thing that I want to"
  },
  {
    "startMs": 902000,
    "text": "talk about which is sort of enabled by"
  },
  {
    "startMs": 903839,
    "text": "this architecture is a fully generative"
  },
  {
    "startMs": 905839,
    "text": "UI. Um, we're just going to skip and let"
  },
  {
    "startMs": 908320,
    "text": "this play while I talk. So, this is a"
  },
  {
    "startMs": 910079,
    "text": "very simple demo where I asked Claude,"
  },
  {
    "startMs": 912160,
    "text": "\"Hey, just I'm giving a talk on this."
  },
  {
    "startMs": 914240,
    "text": "Just start streaming the most"
  },
  {
    "startMs": 915920,
    "text": "interesting UI you can come up with.\""
  },
  {
    "startMs": 917760,
    "text": "And so, it just went. And what it's"
  },
  {
    "startMs": 919680,
    "text": "doing here is we exposed a tool that"
  },
  {
    "startMs": 922480,
    "text": "accepts the JSON uh the protocol"
  },
  {
    "startMs": 925600,
    "text": "serialization of a UI that prefab is"
  },
  {
    "startMs": 928000,
    "text": "based on. And so now as the agent is"
  },
  {
    "startMs": 930560,
    "text": "streaming that information over the"
  },
  {
    "startMs": 932079,
    "text": "wire, we are in real time rendering"
  },
  {
    "startMs": 934399,
    "text": "whatever we've got, healing that JSON"
  },
  {
    "startMs": 936079,
    "text": "and rendering it. And so this was a"
  },
  {
    "startMs": 937680,
    "text": "really cool demo and it was really"
  },
  {
    "startMs": 938959,
    "text": "effective and people like this because"
  },
  {
    "startMs": 940320,
    "text": "now you don't even have to define the UI"
  },
  {
    "startMs": 941839,
    "text": "yourself. All you have to do is use the"
  },
  {
    "startMs": 944079,
    "text": "skill we already ship, share it with"
  },
  {
    "startMs": 945760,
    "text": "your agent so it knows how to write a UI"
  },
  {
    "startMs": 947760,
    "text": "and off it goes. It can make you"
  },
  {
    "startMs": 949120,
    "text": "whatever you want. There are some"
  },
  {
    "startMs": 950480,
    "text": "clients that have built-in versions of"
  },
  {
    "startMs": 951759,
    "text": "this. if they have a built-in version,"
  },
  {
    "startMs": 953120,
    "text": "you may prefer to use it by all means,"
  },
  {
    "startMs": 954959,
    "text": "but this may be a way for you to build"
  },
  {
    "startMs": 956480,
    "text": "your own custom uh approach or limited"
  },
  {
    "startMs": 958880,
    "text": "set of components that are useful to"
  },
  {
    "startMs": 960320,
    "text": "you. Now, a really interesting thing"
  },
  {
    "startMs": 962320,
    "text": "happened when we spun this up. So, as I"
  },
  {
    "startMs": 964639,
    "text": "mentioned, originally the plan was for"
  },
  {
    "startMs": 966480,
    "text": "the agent to send JSON over the wire and"
  },
  {
    "startMs": 968639,
    "text": "have it be rendered into this full React"
  },
  {
    "startMs": 970720,
    "text": "application."
  },
  {
    "startMs": 972240,
    "text": "What we ended up discovering is that the"
  },
  {
    "startMs": 973759,
    "text": "Python representation of a UI is about"
  },
  {
    "startMs": 976880,
    "text": "70% smaller than the JSON"
  },
  {
    "startMs": 978880,
    "text": "representation."
  },
  {
    "startMs": 981040,
    "text": "So we don't do this anymore. When I"
  },
  {
    "startMs": 983360,
    "text": "recorded this demo was streaming JSON."
  },
  {
    "startMs": 985120,
    "text": "What we now do is we actually stream the"
  },
  {
    "startMs": 986959,
    "text": "Python over the wire. It's executed in a"
  },
  {
    "startMs": 989680,
    "text": "sandbox. It's turned into JSON on the"
  },
  {
    "startMs": 992800,
    "text": "server and then that's rendered. And so"
  },
  {
    "startMs": 994399,
    "text": "this has a dramatic dramatic token"
  },
  {
    "startMs": 996639,
    "text": "efficiency, cost, and latency uh"
  },
  {
    "startMs": 998959,
    "text": "benefit. So it would work exactly the"
  },
  {
    "startMs": 1001120,
    "text": "same as when I recorded this demo, but"
  },
  {
    "startMs": 1002959,
    "text": "this is just one of those things that"
  },
  {
    "startMs": 1004000,
    "text": "we've learned on the fly. And it's"
  },
  {
    "startMs": 1005519,
    "text": "really fascinating that the Python"
  },
  {
    "startMs": 1006959,
    "text": "representation is just that much more"
  },
  {
    "startMs": 1008399,
    "text": "compact and ergonomic than the full um"
  },
  {
    "startMs": 1011440,
    "text": "JSON one. So um that's prefab. If you'd"
  },
  {
    "startMs": 1014720,
    "text": "like to check it out, if you're curious,"
  },
  {
    "startMs": 1016240,
    "text": "if you want to see the weirdest thing"
  },
  {
    "startMs": 1017680,
    "text": "I've ever built um along with however"
  },
  {
    "startMs": 1019680,
    "text": "other many people, you can see the docs"
  },
  {
    "startMs": 1021120,
    "text": "at prefab.pref.io."
  },
  {
    "startMs": 1022720,
    "text": "You can see the full library uh which is"
  },
  {
    "startMs": 1024720,
    "text": "on our GitHub here. And this is already"
  },
  {
    "startMs": 1027360,
    "text": "fully baked into FastmcP. So, if you're"
  },
  {
    "startMs": 1029360,
    "text": "using a recent version of FastMPP, you"
  },
  {
    "startMs": 1031199,
    "text": "should be able to install this optional"
  },
  {
    "startMs": 1032959,
    "text": "addition, uh, import the components,"
  },
  {
    "startMs": 1034880,
    "text": "return them, and start playing with"
  },
  {
    "startMs": 1036240,
    "text": "these MCP apps. Thank you all for"
  },
  {
    "startMs": 1038559,
    "text": "coming. [applause]"
  }
]