Generative UI... in Python? — Jeremiah Lowin, Prefect

Good. Um, thank you all for for coming Good. Um, thank you all for for coming out. Um, I'm going to talk today about out. Um, I'm going to talk today about out. Um, I'm going to talk today about one of the weirdest pieces of software one of the weirdest pieces of software one of the weirdest pieces of software I've ever written. It's sort of on the I've ever written. It's sort of on the I've ever written. It's sort of on the edge of a whole lot of stuff I've been edge of a whole lot of stuff I've been edge of a whole lot of stuff I've been putting putting forward into the world. putting putting forward into the world. putting putting forward into the world. Um, so join me if you will. We're going Um, so join me if you will. We're going Um, so join me if you will. We're going to try and have the most reasoned to try and have the most reasoned to try and have the most reasoned approach to to a very strange thing that approach to to a very strange thing that approach to to a very strange thing that agents and MCP and other things have agents and MCP and other things have agents and MCP and other things have enabled. And so to begin, I want to talk enabled. And so to begin, I want to talk enabled. And so to begin, I want to talk about MCP apps. I don't know if any of about MCP apps. I don't know if any of about MCP apps. I don't know if any of you were able to join any of the other you were able to join any of the other you were able to join any of the other talks earlier today. Maybe the one that talks earlier today. Maybe the one that talks earlier today. Maybe the one that um Edo and Lead just gave maybe an hour um Edo and Lead just gave maybe an hour um Edo and Lead just gave maybe an hour ago. Just a show of hands. MCP apps ago. Just a show of hands. MCP apps ago. Just a show of hands. MCP apps familiarity. familiarity. familiarity. Okay, this is probably the best crowd Okay, this is probably the best crowd Okay, this is probably the best crowd I've ever given this talk to actually. I've ever given this talk to actually. I've ever given this talk to actually. So that's that's fantastic. Um, for So that's that's fantastic. Um, for So that's that's fantastic. Um, for those that didn't put their hands up, those that didn't put their hands up, those that didn't put their hands up, MCP apps is an extension of the MCP MCP apps is an extension of the MCP MCP apps is an extension of the MCP protocol that was introduced I think in protocol that was introduced I think in protocol that was introduced I think in January of this year. And the idea is January of this year. And the idea is January of this year. And the idea is this is a typical request response cycle this is a typical request response cycle this is a typical request response cycle for an MCP um tool. The user makes a for an MCP um tool. The user makes a for an MCP um tool. The user makes a request to the agent. The agent in turn request to the agent. The agent in turn request to the agent. The agent in turn decides to use an MCP tool that's hosted decides to use an MCP tool that's hosted decides to use an MCP tool that's hosted on an MCP server. A tool result comes on an MCP server. A tool result comes on an MCP server. A tool result comes back into the agent's context and the back into the agent's context and the back into the agent's context and the agent chooses to form some response and agent chooses to form some response and agent chooses to form some response and send it out to the user. And so send it out to the user. And so send it out to the user. And so fundamentally MCP servers are these fundamentally MCP servers are these fundamentally MCP servers are these fantastic ways of adding uh functions fantastic ways of adding uh functions fantastic ways of adding uh functions and business logic to your agents but and business logic to your agents but and business logic to your agents but never a direct connection between a user never a direct connection between a user never a direct connection between a user and the MCP server. It always goes and the MCP server. It always goes and the MCP server. It always goes through the brain of the agent and more through the brain of the agent and more through the brain of the agent and more importantly through the context window importantly through the context window importantly through the context window of the agent. So MCP apps are an of the agent. So MCP apps are an of the agent. So MCP apps are an extension of this which allow us extension of this which allow us extension of this which allow us actually to bypass the agent and instead actually to bypass the agent and instead actually to bypass the agent and instead what happens is the following. The user

what happens is the following. The user what happens is the following. The user requests something from the agent. The requests something from the agent. The requests something from the agent. The agent uses a tool, but instead of that agent uses a tool, but instead of that agent uses a tool, but instead of that tool request going back to the agent, it tool request going back to the agent, it tool request going back to the agent, it is sent out to the user and it's sent is sent out to the user and it's sent is sent out to the user and it's sent out as HTML, CSS, JavaScript. It's a out as HTML, CSS, JavaScript. It's a out as HTML, CSS, JavaScript. It's a full UI and it can be whatever you want full UI and it can be whatever you want full UI and it can be whatever you want it to be. And so the idea is you have it to be. And so the idea is you have it to be. And so the idea is you have this way to make to basically put the this way to make to basically put the this way to make to basically put the internet into your agent, so to speak. internet into your agent, so to speak. internet into your agent, so to speak. You can ship any custom branded useful You can ship any custom branded useful You can ship any custom branded useful UI that you want. You can let the user UI that you want. You can let the user UI that you want. You can let the user have any interactive experience that have any interactive experience that have any interactive experience that they want. And then the user, as you can they want. And then the user, as you can they want. And then the user, as you can see in the diagram, the user now can see in the diagram, the user now can see in the diagram, the user now can interact with the application. they can interact with the application. they can interact with the application. they can use the tools, they can send information use the tools, they can send information use the tools, they can send information back into a backend host on that app and back into a backend host on that app and back into a backend host on that app and really get a full experience. You can really get a full experience. You can really get a full experience. You can imagine booking a table at a restaurant imagine booking a table at a restaurant imagine booking a table at a restaurant or um changing your seat on a plane or or um changing your seat on a plane or or um changing your seat on a plane or interacting with a schedule for AI interacting with a schedule for AI interacting with a schedule for AI engineer. There's a lot of things that engineer. There's a lot of things that engineer. There's a lot of things that you can do as a user now where the agent you can do as a user now where the agent you can do as a user now where the agent facilitated it, but you are going to facilitated it, but you are going to facilitated it, but you are going to interact as a human. And there's an interact as a human. And there's an interact as a human. And there's an extension coming now. This is going to extension coming now. This is going to extension coming now. This is going to come out in um in the July MCP release come out in um in the July MCP release come out in um in the July MCP release where the agent can actually interact where the agent can actually interact where the agent can actually interact with the app as well. And this will tee with the app as well. And this will tee with the app as well. And this will tee up some really interesting use cases up some really interesting use cases up some really interesting use cases we're not going to talk about today, but we're not going to talk about today, but we're not going to talk about today, but you could hypothetically play a game of you could hypothetically play a game of you could hypothetically play a game of chess against the agent now in a visual chess against the agent now in a visual chess against the agent now in a visual app where you make a move and then the app where you make a move and then the app where you make a move and then the agent interacts with the app as well.

agent interacts with the app as well. agent interacts with the app as well. And so I think that's going to open up a And so I think that's going to open up a And so I think that's going to open up a whole new world of possibilities. whole new world of possibilities. whole new world of possibilities. Now um some of you may know a framework Now um some of you may know a framework Now um some of you may know a framework that that I'm the author of and my that that I'm the author of and my that that I'm the author of and my company maintains called FastMPP. Um company maintains called FastMPP. Um company maintains called FastMPP. Um fast MCP is one of the most popular ways fast MCP is one of the most popular ways fast MCP is one of the most popular ways of building MCP servers. And so whenever of building MCP servers. And so whenever of building MCP servers. And so whenever new cool things come to the world of new cool things come to the world of new cool things come to the world of MCP, the first thing I wonder is how can MCP, the first thing I wonder is how can MCP, the first thing I wonder is how can I deliver this to our users? And one of I deliver this to our users? And one of I deliver this to our users? And one of the most important things I have to the most important things I have to the most important things I have to share with you about our user base is share with you about our user base is share with you about our user base is that they're mostly Python engineers. that they're mostly Python engineers. that they're mostly Python engineers. And so and so this is a little bit of a And so and so this is a little bit of a And so and so this is a little bit of a problem when we want to deliver problem when we want to deliver problem when we want to deliver frontends and UIs because how are we frontends and UIs because how are we frontends and UIs because how are we actually going to do that? And this is actually going to do that? And this is actually going to do that? And this is the point in the talk where I reveal the point in the talk where I reveal the point in the talk where I reveal that I don't remember what the next that I don't remember what the next that I don't remember what the next slide exactly is. So we're going to take slide exactly is. So we're going to take slide exactly is. So we're going to take a peek at it. Nope, we're going to come a peek at it. Nope, we're going to come a peek at it. Nope, we're going to come back. Um, we we have we have a challenge back. Um, we we have we have a challenge back. Um, we we have we have a challenge now. Uh, how are we going to have have now. Uh, how are we going to have have now. Uh, how are we going to have have Python engineers build UIs that are best Python engineers build UIs that are best Python engineers build UIs that are best practice, that are interactive, that are practice, that are interactive, that are practice, that are interactive, that are beautiful, that are useful without beautiful, that are useful without beautiful, that are useful without pretending that we're going to do pretending that we're going to do pretending that we're going to do something silly, something that's been something silly, something that's been something silly, something that's been tried, and jam all of the front end, all tried, and jam all of the front end, all tried, and jam all of the front end, all of the ecosystem, everything into Python of the ecosystem, everything into Python of the ecosystem, everything into Python in some sort of like weird compromised in some sort of like weird compromised in some sort of like weird compromised haphazard Frankenstein of a system. And haphazard Frankenstein of a system. And haphazard Frankenstein of a system. And so I really struggled with this. I need so I really struggled with this. I need so I really struggled with this. I need I really need I feel an obligation to I really need I feel an obligation to I really need I feel an obligation to find a way to deliver this, but I I find a way to deliver this, but I I find a way to deliver this, but I I can't I can't pretend we're going to can't I can't pretend we're going to can't I can't pretend we're going to ship React and Python. It's not going to ship React and Python. It's not going to ship React and Python. It's not going to work. And so we thought pretty hard work. And so we thought pretty hard work. And so we thought pretty hard about who are our users in the fastmcp about who are our users in the fastmcp about who are our users in the fastmcp ecosystem. Who are these Python ecosystem. Who are these Python ecosystem. Who are these Python developers who tend to be in developers who tend to be in developers who tend to be in enterprises? What are they doing and enterprises? What are they doing and enterprises? What are they doing and what do they need these UIs for? What do what do they need these UIs for? What do what do they need these UIs for? What do they need these MCP apps for? Um what

they need these MCP apps for? Um what they need these MCP apps for? Um what they don't need is consumer-grade custom they don't need is consumer-grade custom they don't need is consumer-grade custom UIs that are fully branded. That that's UIs that are fully branded. That that's UIs that are fully branded. That that's not what these folks are doing. what not what these folks are doing. what not what these folks are doing. what they are uh primarily charged with is they are uh primarily charged with is they are uh primarily charged with is sharing information throughout their sharing information throughout their sharing information throughout their throughout their organization for throughout their organization for throughout their organization for collecting information throughout their collecting information throughout their collecting information throughout their organization and so it changed the organization and so it changed the organization and so it changed the nature of what we expect them to do nature of what we expect them to do nature of what we expect them to do within MCP apps framework and that within MCP apps framework and that within MCP apps framework and that constraint became really useful so constraint became really useful so constraint became really useful so fundamentally we expect that they're fundamentally we expect that they're fundamentally we expect that they're going to do things like build tables going to do things like build tables going to do things like build tables they're going to collect information they're going to collect information they're going to collect information through forms and they're going to want through forms and they're going to want through forms and they're going to want to share charts and so fundamentally to share charts and so fundamentally to share charts and so fundamentally with this constraint we can introduce a with this constraint we can introduce a with this constraint we can introduce a piece of software that we open sourced a piece of software that we open sourced a piece of software that we open sourced a few months ago and has been surprisingly few months ago and has been surprisingly few months ago and has been surprisingly popular among this crowd called prefab popular among this crowd called prefab popular among this crowd called prefab and it's a scoped UI building framework and it's a scoped UI building framework and it's a scoped UI building framework for the purpose of delivering UIs for the purpose of delivering UIs for the purpose of delivering UIs through an agent for the set of purposes through an agent for the set of purposes through an agent for the set of purposes that I mentioned a moment ago. So this that I mentioned a moment ago. So this that I mentioned a moment ago. So this is a hello world card. You might see is a hello world card. You might see is a hello world card. You might see this in any front-end framework, this in any front-end framework, this in any front-end framework, literally anyone. It'll have something literally anyone. It'll have something literally anyone. It'll have something that looks like this and it's on their that looks like this and it's on their that looks like this and it's on their website and you you type your name in website and you you type your name in website and you you type your name in and it it updates live. But of course, and it it updates live. But of course, and it it updates live. But of course, the weird thing about this one is that the weird thing about this one is that the weird thing about this one is that the code that generated it is entirely the code that generated it is entirely the code that generated it is entirely written in Python. And so I hope that written in Python. And so I hope that written in Python. And so I hope that you're feeling what I feel when I look you're feeling what I feel when I look you're feeling what I feel when I look at this, which is a really weird at this, which is a really weird at this, which is a really weird combination of like, yes, that's cool, combination of like, yes, that's cool, combination of like, yes, that's cool, and this really freaks me out. The yes, and this really freaks me out. The yes, and this really freaks me out. The yes, that's cool, comes from the fact that I that's cool, comes from the fact that I that's cool, comes from the fact that I think there's something about this code, think there's something about this code, think there's something about this code, even if you can't see it up close, I can even if you can't see it up close, I can even if you can't see it up close, I can make it a little bigger. There's make it a little bigger. There's make it a little bigger. There's something about this that like kind of something about this that like kind of something about this that like kind of makes sense. You can see the structure makes sense. You can see the structure makes sense. You can see the structure of the of the of the UI in the code, but

of the of the of the UI in the code, but of the of the of the UI in the code, but there's also something about it that's there's also something about it that's there's also something about it that's obviously alien and a little bit a obviously alien and a little bit a obviously alien and a little bit a little bit odd. And we come to this little bit odd. And we come to this little bit odd. And we come to this conclusion when you when you feel that conclusion when you when you feel that conclusion when you when you feel that when you look at it, which is that when when you look at it, which is that when when you look at it, which is that when you compose a front end in Python, it's you compose a front end in Python, it's you compose a front end in Python, it's actually starts to feel good as long as actually starts to feel good as long as actually starts to feel good as long as we scope the challenge right. We are not we scope the challenge right. We are not we scope the challenge right. We are not trying to build a front end from trying to build a front end from trying to build a front end from scratch. We are trying to compose a scratch. We are trying to compose a scratch. We are trying to compose a front end from a bunch of worldclass front end from a bunch of worldclass front end from a bunch of worldclass well-designed components. And that's how well-designed components. And that's how well-designed components. And that's how we keep the guardrails and that's how we we keep the guardrails and that's how we we keep the guardrails and that's how we keep the user in mind. The user here is keep the user in mind. The user here is keep the user in mind. The user here is not trying to do something arbitrary. not trying to do something arbitrary. not trying to do something arbitrary. They're trying to take a well structured They're trying to take a well structured They're trying to take a well structured front end and put it in front of um front end and put it in front of um front end and put it in front of um whomever they're delivering it to. And whomever they're delivering it to. And whomever they're delivering it to. And so here's a little quick tour of that so here's a little quick tour of that so here's a little quick tour of that DSL. Um primarily we're using context DSL. Um primarily we're using context DSL. Um primarily we're using context managers. For those of you who do know managers. For those of you who do know managers. For those of you who do know fastmcp, you know that arguably you fastmcp, you know that arguably you fastmcp, you know that arguably you could reduce fastmc down and say the could reduce fastmc down and say the could reduce fastmc down and say the core innovation of fastmcp is that we core innovation of fastmcp is that we core innovation of fastmcp is that we used a python decorator to build an used a python decorator to build an used a python decorator to build an entire MCP server. So if you want to entire MCP server. So if you want to entire MCP server. So if you want to take the same reductive approach to take the same reductive approach to take the same reductive approach to prefab, you could say we use a context prefab, you could say we use a context prefab, you could say we use a context manager to build an entire UI. And by manager to build an entire UI. And by manager to build an entire UI. And by nesting components with as context nesting components with as context nesting components with as context managers as you see here, we are managers as you see here, we are managers as you see here, we are building up the exact same structure in building up the exact same structure in building up the exact same structure in the UI. It feels very natural when you the UI. It feels very natural when you the UI. It feels very natural when you read it. You can see how things are read it. You can see how things are read it. You can see how things are structured. Um each element of the UI, structured. Um each element of the UI, structured. Um each element of the UI, each component, which is a beautiful each component, which is a beautiful each component, which is a beautiful shaden component when it's rendered, as shaden component when it's rendered, as shaden component when it's rendered, as you can see here, is a class that you you can see here, is a class that you you can see here, is a class that you instantiate. You can parameterize it.

instantiate. You can parameterize it. instantiate. You can parameterize it. you can pass it stuff like CSS classes you can pass it stuff like CSS classes you can pass it stuff like CSS classes and and make it look however you want. and and make it look however you want. and and make it look however you want. And then the last thing which we're not And then the last thing which we're not And then the last thing which we're not going to have enough time to really going to have enough time to really going to have enough time to really explore today is these reactive explore today is these reactive explore today is these reactive variables. Um I'll show you a demo of variables. Um I'll show you a demo of variables. Um I'll show you a demo of those in a moment, but essentially we those in a moment, but essentially we those in a moment, but essentially we have a full way to um create client side have a full way to um create client side have a full way to um create client side interactivity and bind data between interactivity and bind data between interactivity and bind data between components that allows you to build components that allows you to build components that allows you to build these really rich experiences again these really rich experiences again these really rich experiences again without having to go fully into the without having to go fully into the without having to go fully into the JavaScript world and leave an ecosystem JavaScript world and leave an ecosystem JavaScript world and leave an ecosystem that my user base at least is extremely that my user base at least is extremely that my user base at least is extremely comfortable with. Um, and this is the comfortable with. Um, and this is the comfortable with. Um, and this is the pipeline that prefab is essentially pipeline that prefab is essentially pipeline that prefab is essentially exposing. We use a Python DSL that I exposing. We use a Python DSL that I exposing. We use a Python DSL that I just shared with you. We use that to just shared with you. We use that to just shared with you. We use that to build a declarative representation of a build a declarative representation of a build a declarative representation of a UI that then gets serialized into a JSON UI that then gets serialized into a JSON UI that then gets serialized into a JSON protocol. And that JSON protocol is protocol. And that JSON protocol is protocol. And that JSON protocol is ultimately rendered by a React app which ultimately rendered by a React app which ultimately rendered by a React app which is hosted as the actual MCP app. And so is hosted as the actual MCP app. And so is hosted as the actual MCP app. And so this is going to open up a whole lot of this is going to open up a whole lot of this is going to open up a whole lot of possibilities for us that again I'm possibilities for us that again I'm possibilities for us that again I'm going to show you in just a second. But going to show you in just a second. But going to show you in just a second. But the key to this whole thing is the JSON the key to this whole thing is the JSON the key to this whole thing is the JSON in the middle. The Python is actually an in the middle. The Python is actually an in the middle. The Python is actually an accident that I discovered after the accident that I discovered after the accident that I discovered after the fact because it was a weird fact because it was a weird fact because it was a weird idiosyncratic thing that I wanted. The idiosyncratic thing that I wanted. The idiosyncratic thing that I wanted. The point of this was can we create a point of this was can we create a point of this was can we create a serializable representation of a UI and serializable representation of a UI and serializable representation of a UI and that's the JSON protocol again. And that's the JSON protocol again. And that's the JSON protocol again. And because it's serializable, I can because it's serializable, I can because it's serializable, I can generate it from an agent. I can send it generate it from an agent. I can send it generate it from an agent. I can send it to an agent. I can generate it as a to an agent. I can generate it as a to an agent. I can generate it as a human and ask an agent to modify.

human and ask an agent to modify. human and ask an agent to modify. There's all this cool stuff that happens There's all this cool stuff that happens There's all this cool stuff that happens because of that intermediate because of that intermediate because of that intermediate representation in JSON. And then when representation in JSON. And then when representation in JSON. And then when the when the Python DSL just fell out of the when the Python DSL just fell out of the when the Python DSL just fell out of this and was really beautiful and easy this and was really beautiful and easy this and was really beautiful and easy to use, I kind of felt like we had to use, I kind of felt like we had to use, I kind of felt like we had something something something So uh we have these docs and sort of to So uh we have these docs and sort of to So uh we have these docs and sort of to prove the point this was another prove the point this was another prove the point this was another constraint we took on this is I don't constraint we took on this is I don't constraint we took on this is I don't even know what this is this is a doc even know what this is this is a doc even know what this is this is a doc these are the docs for the data table these are the docs for the data table these are the docs for the data table component in prefab I think there's 130 component in prefab I think there's 130 component in prefab I think there's 130 or 140 components that we ship that you or 140 components that we ship that you or 140 components that we ship that you can compose into an arbitrary form the can compose into an arbitrary form the can compose into an arbitrary form the docs for prefab are 100% rendered in docs for prefab are 100% rendered in docs for prefab are 100% rendered in prefab so the data table that's here in prefab so the data table that's here in prefab so the data table that's here in the basic usage it is live rendered in the basic usage it is live rendered in the basic usage it is live rendered in prefab the Python code you can see it prefab the Python code you can see it prefab the Python code you can see it sneaking in at the bottom of the screen sneaking in at the bottom of the screen sneaking in at the bottom of the screen that Python code is being rendered live that Python code is being rendered live that Python code is being rendered live by the renderer to generate that. If you by the renderer to generate that. If you by the renderer to generate that. If you want, you can take any example in the want, you can take any example in the want, you can take any example in the prefab docs, you can click a link, pop prefab docs, you can click a link, pop prefab docs, you can click a link, pop them into the playground, and you can them into the playground, and you can them into the playground, and you can edit the code live, the Python code edit the code live, the Python code edit the code live, the Python code live, and you will see the UI update. live, and you will see the UI update. live, and you will see the UI update. And again, this is super weird. If And again, this is super weird. If And again, this is super weird. If you're feeling a little uncomfortable you're feeling a little uncomfortable you're feeling a little uncomfortable about this, that is that is okay. It about this, that is that is okay. It about this, that is that is okay. It makes a lot more sense when we constrain makes a lot more sense when we constrain makes a lot more sense when we constrain the problem. And remember that we're the problem. And remember that we're the problem. And remember that we're composing a UI rather than building it.

composing a UI rather than building it. composing a UI rather than building it. So, I want to bring this back to the So, I want to bring this back to the So, I want to bring this back to the thing I opened with now, which is MCP thing I opened with now, which is MCP thing I opened with now, which is MCP servers and more specifically MCP apps. servers and more specifically MCP apps. servers and more specifically MCP apps. You are welcome to use prefab for any You are welcome to use prefab for any You are welcome to use prefab for any kind of front-end problem you have. My kind of front-end problem you have. My kind of front-end problem you have. My team has started using it for small team has started using it for small team has started using it for small interactive data apps and things to interactive data apps and things to interactive data apps and things to explore. They've been building explore. They've been building explore. They've been building presentations with it. We ship a a dark presentations with it. We ship a a dark presentations with it. We ship a a dark mode theme that honestly looks kind of mode theme that honestly looks kind of mode theme that honestly looks kind of like the one I'm showing you right now like the one I'm showing you right now like the one I'm showing you right now to make slides and presentations. You to make slides and presentations. You to make slides and presentations. You can do a lot of stuff with it. But the can do a lot of stuff with it. But the can do a lot of stuff with it. But the reason we built it, the use case that it reason we built it, the use case that it reason we built it, the use case that it is satisfying is for MCP servers. And so is satisfying is for MCP servers. And so is satisfying is for MCP servers. And so um I want to give you a quick tour of um I want to give you a quick tour of um I want to give you a quick tour of three ways that you can use it, three three ways that you can use it, three three ways that you can use it, three increasingly sophisticated ways that you increasingly sophisticated ways that you increasingly sophisticated ways that you can use it in your MCP server. The first can use it in your MCP server. The first can use it in your MCP server. The first is to build an interactive tool. As I is to build an interactive tool. As I is to build an interactive tool. As I showed you at the beginning of the talk, showed you at the beginning of the talk, showed you at the beginning of the talk, typically an MCP tool is something your typically an MCP tool is something your typically an MCP tool is something your agent calls and the agent gets the agent calls and the agent gets the agent calls and the agent gets the result and you don't get to interact result and you don't get to interact result and you don't get to interact with it at all. So what's the easiest with it at all. So what's the easiest with it at all. So what's the easiest way that we can advance that that way that we can advance that that way that we can advance that that interactive functionality? interactive functionality? interactive functionality? I'm going to show you here. This is a I'm going to show you here. This is a I'm going to show you here. This is a fastm tool. It's been decorated with a fastm tool. It's been decorated with a fastm tool. It's been decorated with a tool decorator as you can see and it's tool decorator as you can see and it's tool decorator as you can see and it's just a Python function that returns some just a Python function that returns some just a Python function that returns some information. Bearing in mind this information. Bearing in mind this information. Bearing in mind this information will go to the agent, not information will go to the agent, not information will go to the agent, not the user. If we want to turn this into a the user. If we want to turn this into a the user. If we want to turn this into a fully interactive tool with prefab, fully interactive tool with prefab, fully interactive tool with prefab, we're going to make one change. Instead we're going to make one change. Instead we're going to make one change. Instead of returning a Python dictionary at the of returning a Python dictionary at the of returning a Python dictionary at the end, which will go to the agent, we're end, which will go to the agent, we're end, which will go to the agent, we're going to return a prefab component. In going to return a prefab component. In going to return a prefab component. In this case, it's the data table. These this case, it's the data table. These this case, it's the data table. These are the this is what I just showed you are the this is what I just showed you are the this is what I just showed you the docs for a moment ago. And when we the docs for a moment ago. And when we the docs for a moment ago. And when we return this prefab component, FastMPP return this prefab component, FastMPP return this prefab component, FastMPP will automatically detect that. It will will automatically detect that. It will will automatically detect that. It will automatically infer that you in fact automatically infer that you in fact automatically infer that you in fact want to return an MCP app. and it will want to return an MCP app. and it will want to return an MCP app. and it will spin up all the machinery to get the spin up all the machinery to get the spin up all the machinery to get the HTML, the JavaScript, the CSS, the HTML, the JavaScript, the CSS, the HTML, the JavaScript, the CSS, the render, everything in place so that your

render, everything in place so that your render, everything in place so that your user will see a data table. Here's what user will see a data table. Here's what user will see a data table. Here's what this looks like in practice. This is this looks like in practice. This is this looks like in practice. This is using the goose client, which is an using the goose client, which is an using the goose client, which is an excellent one. Um, I asked a server that excellent one. Um, I asked a server that excellent one. Um, I asked a server that had the function I just uh showed you, had the function I just uh showed you, had the function I just uh showed you, show me the team directory. And what show me the team directory. And what show me the team directory. And what pops up uh this would be better as a pops up uh this would be better as a pops up uh this would be better as a GIF. I apologize, but what pops up is a GIF. I apologize, but what pops up is a GIF. I apologize, but what pops up is a fully interactive data table component. fully interactive data table component. fully interactive data table component. It supports um searching and filtering It supports um searching and filtering It supports um searching and filtering and sorting and pagionation and all this and sorting and pagionation and all this and sorting and pagionation and all this stuff. And all it is is what I showed stuff. And all it is is what I showed stuff. And all it is is what I showed you a moment ago. Just return the data you a moment ago. Just return the data you a moment ago. Just return the data table class and all this will be taken table class and all this will be taken table class and all this will be taken care of. We can go a step further. What care of. We can go a step further. What care of. We can go a step further. What if in addition to the data table, we if in addition to the data table, we if in addition to the data table, we want to show a pie chart right next to want to show a pie chart right next to want to show a pie chart right next to the data table that breaks down this the data table that breaks down this the data table that breaks down this team directory. As you might imagine, team directory. As you might imagine, team directory. As you might imagine, very, very, very similar code. Instead very, very, very similar code. Instead very, very, very similar code. Instead of the data table alone, we're now going of the data table alone, we're now going of the data table alone, we're now going to import a grid and a pie chart. And if to import a grid and a pie chart. And if to import a grid and a pie chart. And if you look at the bottom, you'll see that you look at the bottom, you'll see that you look at the bottom, you'll see that we compose both the pie chart and the we compose both the pie chart and the we compose both the pie chart and the data table into a grid very naturally data table into a grid very naturally data table into a grid very naturally with a context manager. And this is the with a context manager. And this is the with a context manager. And this is the result. we now get a pie chart next to result. we now get a pie chart next to result. we now get a pie chart next to our data table. So this follows a our data table. So this follows a our data table. So this follows a principle that we really try to hold in principle that we really try to hold in principle that we really try to hold in a lot of our software at Prefect, which a lot of our software at Prefect, which a lot of our software at Prefect, which is one line of code, one big noticeable is one line of code, one big noticeable is one line of code, one big noticeable change. We try to keep that complexity change. We try to keep that complexity change. We try to keep that complexity incremental. And so this satisfies a lot incremental. And so this satisfies a lot incremental. And so this satisfies a lot of things that I think are really of things that I think are really of things that I think are really important about frameworks and DSLs. Um, important about frameworks and DSLs. Um, important about frameworks and DSLs. Um, this is very quickly because we won't this is very quickly because we won't this is very quickly because we won't have time to go into it. This is just an have time to go into it. This is just an have time to go into it. This is just an example I threw together and recorded of example I threw together and recorded of example I threw together and recorded of fully client side interactivity where fully client side interactivity where fully client side interactivity where all of these controls are linked. Uh, all of these controls are linked. Uh, all of these controls are linked. Uh, stuff's updating, text is updating, stuff's updating, text is updating, stuff's updating, text is updating, values are updating. No JavaScript was values are updating. No JavaScript was values are updating. No JavaScript was written. This is just a couple of written. This is just a couple of written. This is just a couple of classes composed that all have the same classes composed that all have the same classes composed that all have the same attribute assigned. So they all work attribute assigned. So they all work attribute assigned. So they all work together automatically.

together automatically. together automatically. Um, oh, and I did throw in a quick code Um, oh, and I did throw in a quick code Um, oh, and I did throw in a quick code example of what that looks like. We have example of what that looks like. We have example of what that looks like. We have a class called RX, which as you may a class called RX, which as you may a class called RX, which as you may guess stands for reactive. If you use guess stands for reactive. If you use guess stands for reactive. If you use these reactive variables, you can just these reactive variables, you can just these reactive variables, you can just reference them anywhere in your code. reference them anywhere in your code. reference them anywhere in your code. You can format them. You can you can You can format them. You can you can You can format them. You can you can make them the name of something and it make them the name of something and it make them the name of something and it will automatically compile into the will automatically compile into the will automatically compile into the correct uh JavaScript implementation. correct uh JavaScript implementation. correct uh JavaScript implementation. The second thing that we can do is a The second thing that we can do is a The second thing that we can do is a fastmcp app. So if an interactive tool fastmcp app. So if an interactive tool fastmcp app. So if an interactive tool is sort of a oneshot here's a user is sort of a oneshot here's a user is sort of a oneshot here's a user interface and you can interact with it interface and you can interact with it interface and you can interact with it in the client a fastmcp app is a full in the client a fastmcp app is a full in the client a fastmcp app is a full application with a backend and in this application with a backend and in this application with a backend and in this case the MCP server is going to be the case the MCP server is going to be the case the MCP server is going to be the back end. We don't have time to go back end. We don't have time to go back end. We don't have time to go through a full worked example in this through a full worked example in this through a full worked example in this session but here's what the code looks session but here's what the code looks session but here's what the code looks like just to give you a sense of the like just to give you a sense of the like just to give you a sense of the ergonomics. We're going to write a class ergonomics. We're going to write a class ergonomics. We're going to write a class which is our fastmcp app and then we're which is our fastmcp app and then we're which is our fastmcp app and then we're going to decorate at least two uh going to decorate at least two uh going to decorate at least two uh functions with app.ui UI. That's the functions with app.ui UI. That's the functions with app.ui UI. That's the entry point that's going to return the entry point that's going to return the entry point that's going to return the prefab components that form the base UI prefab components that form the base UI prefab components that form the base UI of that application. And then at least of that application. And then at least of that application. And then at least one, I guess this is optional, so zero one, I guess this is optional, so zero one, I guess this is optional, so zero or more um app.tools. And these are or more um app.tools. And these are or more um app.tools. And these are essentially backend methods that you can essentially backend methods that you can essentially backend methods that you can now reference in the UI. So you could now reference in the UI. So you could now reference in the UI. So you could have a button that takes data that the have a button that takes data that the have a button that takes data that the user has entered into a form and sends user has entered into a form and sends user has entered into a form and sends it to a database using a decorated tool it to a database using a decorated tool it to a database using a decorated tool like this. One thing that we use and we like this. One thing that we use and we like this. One thing that we use and we ship as a built-in component now in ship as a built-in component now in ship as a built-in component now in fastmcp fastmcp fastmcp is an upload component. So as you can is an upload component. So as you can is an upload component. So as you can see because only the agent has access to see because only the agent has access to see because only the agent has access to an MCP server you can't simply upload a an MCP server you can't simply upload a an MCP server you can't simply upload a file to an MCP server. It has to go file to an MCP server. It has to go file to an MCP server. It has to go through the brain of the agent. And so through the brain of the agent. And so through the brain of the agent. And so what ends up happening is a lot of

what ends up happening is a lot of what ends up happening is a lot of people create basically an upload tool people create basically an upload tool people create basically an upload tool on their MCP server forget that the on their MCP server forget that the on their MCP server forget that the agent has to actually call it. And what agent has to actually call it. And what agent has to actually call it. And what you end up doing is the world's most you end up doing is the world's most you end up doing is the world's most expensive copy paste operation. You give expensive copy paste operation. You give expensive copy paste operation. You give the agent a megabyte of text. the agent the agent a megabyte of text. the agent the agent a megabyte of text. the agent retypes it character by character into retypes it character by character into retypes it character by character into the MCP and now yes in fact you have the MCP and now yes in fact you have the MCP and now yes in fact you have uploaded it but it's extremely extremely uploaded it but it's extremely extremely uploaded it but it's extremely extremely inefficient. So this is a really good inefficient. So this is a really good inefficient. So this is a really good use case for an MCP app where you ask use case for an MCP app where you ask use case for an MCP app where you ask the agent to bring up the app interface the agent to bring up the app interface the agent to bring up the app interface you drag a file into it and now the file you drag a file into it and now the file you drag a file into it and now the file bypasses the agent and goes right into bypasses the agent and goes right into bypasses the agent and goes right into the server. And we've made that a the server. And we've made that a the server. And we've made that a oneliner like this along with a handful oneliner like this along with a handful oneliner like this along with a handful of other um useful tools. And is this a of other um useful tools. And is this a of other um useful tools. And is this a gift? this is not a GIF or if it is it's gift? this is not a GIF or if it is it's gift? this is not a GIF or if it is it's not rendering but it would look like not rendering but it would look like not rendering but it would look like this in your client in any client that this in your client in any client that this in your client in any client that supports MCP apps if you ask the agent I supports MCP apps if you ask the agent I supports MCP apps if you ask the agent I need to upload something it can now show need to upload something it can now show need to upload something it can now show you this and you can upload safely and you this and you can upload safely and you this and you can upload safely and most importantly cheaply um oh I do have most importantly cheaply um oh I do have most importantly cheaply um oh I do have a gift mind know your own slides is a a gift mind know your own slides is a a gift mind know your own slides is a good lesson from this talk so here's the good lesson from this talk so here's the good lesson from this talk so here's the agent is now interacting with a file agent is now interacting with a file agent is now interacting with a file that I just uploaded that I dragged and that I just uploaded that I dragged and that I just uploaded that I dragged and dropped um I'll make these slides dropped um I'll make these slides dropped um I'll make these slides available later if you'd like to see available later if you'd like to see available later if you'd like to see this or of course it's a oneliner you this or of course it's a oneliner you this or of course it's a oneliner you could try it in your servers uh this could try it in your servers uh this could try it in your servers uh this afternoon. The last thing that I want to afternoon. The last thing that I want to afternoon. The last thing that I want to talk about which is sort of enabled by talk about which is sort of enabled by talk about which is sort of enabled by this architecture is a fully generative this architecture is a fully generative this architecture is a fully generative UI. Um, we're just going to skip and let UI. Um, we're just going to skip and let UI. Um, we're just going to skip and let this play while I talk. So, this is a this play while I talk. So, this is a this play while I talk. So, this is a very simple demo where I asked Claude, very simple demo where I asked Claude, very simple demo where I asked Claude, "Hey, just I'm giving a talk on this.

"Hey, just I'm giving a talk on this. "Hey, just I'm giving a talk on this. Just start streaming the most Just start streaming the most Just start streaming the most interesting UI you can come up with." interesting UI you can come up with." interesting UI you can come up with." And so, it just went. And what it's And so, it just went. And what it's And so, it just went. And what it's doing here is we exposed a tool that doing here is we exposed a tool that doing here is we exposed a tool that accepts the JSON uh the protocol accepts the JSON uh the protocol accepts the JSON uh the protocol serialization of a UI that prefab is serialization of a UI that prefab is serialization of a UI that prefab is based on. And so now as the agent is based on. And so now as the agent is based on. And so now as the agent is streaming that information over the streaming that information over the streaming that information over the wire, we are in real time rendering wire, we are in real time rendering wire, we are in real time rendering whatever we've got, healing that JSON whatever we've got, healing that JSON whatever we've got, healing that JSON and rendering it. And so this was a and rendering it. And so this was a and rendering it. And so this was a really cool demo and it was really really cool demo and it was really really cool demo and it was really effective and people like this because effective and people like this because effective and people like this because now you don't even have to define the UI now you don't even have to define the UI now you don't even have to define the UI yourself. All you have to do is use the yourself. All you have to do is use the yourself. All you have to do is use the skill we already ship, share it with skill we already ship, share it with skill we already ship, share it with your agent so it knows how to write a UI your agent so it knows how to write a UI your agent so it knows how to write a UI and off it goes. It can make you and off it goes. It can make you and off it goes. It can make you whatever you want. There are some whatever you want. There are some whatever you want. There are some clients that have built-in versions of clients that have built-in versions of clients that have built-in versions of this. if they have a built-in version, this. if they have a built-in version, this. if they have a built-in version, you may prefer to use it by all means, you may prefer to use it by all means, you may prefer to use it by all means, but this may be a way for you to build but this may be a way for you to build but this may be a way for you to build your own custom uh approach or limited your own custom uh approach or limited your own custom uh approach or limited set of components that are useful to set of components that are useful to set of components that are useful to you. Now, a really interesting thing you. Now, a really interesting thing you. Now, a really interesting thing happened when we spun this up. So, as I happened when we spun this up. So, as I happened when we spun this up. So, as I mentioned, originally the plan was for mentioned, originally the plan was for mentioned, originally the plan was for the agent to send JSON over the wire and the agent to send JSON over the wire and the agent to send JSON over the wire and have it be rendered into this full React have it be rendered into this full React have it be rendered into this full React application. application. application. What we ended up discovering is that the What we ended up discovering is that the What we ended up discovering is that the Python representation of a UI is about Python representation of a UI is about Python representation of a UI is about 70% smaller than the JSON 70% smaller than the JSON 70% smaller than the JSON representation.

representation. representation. So we don't do this anymore. When I So we don't do this anymore. When I So we don't do this anymore. When I recorded this demo was streaming JSON. recorded this demo was streaming JSON. recorded this demo was streaming JSON. What we now do is we actually stream the What we now do is we actually stream the What we now do is we actually stream the Python over the wire. It's executed in a Python over the wire. It's executed in a Python over the wire. It's executed in a sandbox. It's turned into JSON on the sandbox. It's turned into JSON on the sandbox. It's turned into JSON on the server and then that's rendered. And so server and then that's rendered. And so server and then that's rendered. And so this has a dramatic dramatic token this has a dramatic dramatic token this has a dramatic dramatic token efficiency, cost, and latency uh efficiency, cost, and latency uh efficiency, cost, and latency uh benefit. So it would work exactly the benefit. So it would work exactly the benefit. So it would work exactly the same as when I recorded this demo, but same as when I recorded this demo, but same as when I recorded this demo, but this is just one of those things that this is just one of those things that this is just one of those things that we've learned on the fly. And it's we've learned on the fly. And it's we've learned on the fly. And it's really fascinating that the Python really fascinating that the Python really fascinating that the Python representation is just that much more representation is just that much more representation is just that much more compact and ergonomic than the full um compact and ergonomic than the full um compact and ergonomic than the full um JSON one. So um that's prefab. If you'd JSON one. So um that's prefab. If you'd JSON one. So um that's prefab. If you'd like to check it out, if you're curious, like to check it out, if you're curious, like to check it out, if you're curious, if you want to see the weirdest thing if you want to see the weirdest thing if you want to see the weirdest thing I've ever built um along with however I've ever built um along with however I've ever built um along with however other many people, you can see the docs other many people, you can see the docs other many people, you can see the docs at prefab.pref.io. at prefab.pref.io. at prefab.pref.io. You can see the full library uh which is You can see the full library uh which is You can see the full library uh which is on our GitHub here. And this is already on our GitHub here. And this is already on our GitHub here. And this is already fully baked into FastmcP. So, if you're fully baked into FastmcP. So, if you're fully baked into FastmcP. So, if you're using a recent version of FastMPP, you using a recent version of FastMPP, you using a recent version of FastMPP, you should be able to install this optional should be able to install this optional should be able to install this optional addition, uh, import the components, addition, uh, import the components, addition, uh, import the components, return them, and start playing with return them, and start playing with return them, and start playing with these MCP apps. Thank you all for these MCP apps. Thank you all for these MCP apps. Thank you all for coming.