Building a Real-Time Multiplayer Chess Game Inside ChatGPT (Agents SDK)

Hello everybody. I'm Steve James. I'm based in Roterdam in the Netherlands. I've been at Cloudflare for a little bit over a year. This is my second time and I'm I work in the agency team. So today we're going to show you a proof of concept that we've built using the uh OpenAI's apps SDK. We are going to show you a multiplayer realtime chess app that is going to render inside chat GPT and your conversation and that you can play with your friends remotely while at the same time um getting help from chatbt. So you can have a look at the OpenAI apps SDK docs here developers openai.com appsdk and you can also have a look at the guide that we've built. Uh so you can build this from scratch. Uh it's less than a thousand lines of code and by the end of the guide you're going to have the same application that you're going to see here deployed on your account or you can just use ours and we're excited to see what you guys build for this. So for those of you that are not developers, openi recently announced the apps SDK which are going to allow developers to build applications that will render inside chat dbt. And what we will uh show right here in in order to build this you currently have to uh enable your account to be a developer account and install the applications manually. OpenAI is planning to have a unified app store where users can just go look up for the their favorite apps and install them and from then on they are just available on their account at at any time. So showing what we have built uh here have two different browsers uh that can effectively act as uh two different accounts that I would just say let's play some chess and since right here in my connectors you can see that I have this chess application um once I say this chap GPT is smart enough to know um that this might uh sorry I have uh tent pro enabled uh let me not go with row. Uh let me tell it let's place chess here. I don't need to think 20 minutes for that. Um since it knows that I have this uh chess connector enabled, it is able to just uh to know what it has to do with it. And it knows I want to um start start a game here. And you can see inside my chat conversation, I have this game menu rendered. And what would be say my friend that also wants to uh play some chess with me. They will say the same thing or something between the lines. And I'm going to start a new game from the game menu. And I would share this with my friend. So my friend will go here and instead of starting a new game just join my lobby. And right here we can see uh our game board has already rendered. And what we have built is a multiplayer game that is going to sync real time. We get to play at the same time while uh getting the best help from Chad GPT and improving our gameplay hopefully. So I'm white. So I let's say I'm going to start here. Immediately my other browser gets to gets to see the update and I now get to move a make a move here. And you can see that of course uh you're going to get the uh exactly what you expect here. Um black now that it's not its own turn. I cannot move. I cannot make a move for um uh for white. So you can effectively effectively build u all kinds of applications. And the entire thing is less than 800 lines of code which is pretty insane. So, uh, the extra thing that we'll like to to show here is that if I ask for help, say I'm stuck or I'm not exactly sure what the best move is, I can have what maybe uh I consider to be a better chess player than I am, which I'm not very good. Um, and it would just proceed to be here. Since it has access to the exact state of the board and what player I am, it can just uh provide a detailed guide or a detailed analysis of of the board state, which is pretty cool. And this is just a proof of concept that we've built to see how far we can push this new um application model. And it's pretty interesting to see what the ecosystem might look like in in a year or so. So you can go directly to the guide that we have on the cloud docs. Um it's very easy to to follow guide step by step, but also you can just go directly and we have the entire code available on GitHub. So you can go here and uh have a look. You can just copy and paste this this uh worker. This is just a worker. You get to deploy the whole thing with one command um wrangler deploy and it's already available. Then if um you want to test it out while you're building it, you would need to in your uh GPT account add it as a connector. But that's uh super straightforward. And eventually we're going to get that app store where your users can just do a one-click install. So we started with um apps SDK. We wanted first of all we wanted to make sure that you could build these apps on top of the agents SDK and we realized that the examples that were available were uh very simple. Uh effectively these applications are just um HTML and JavaScript that gets rendered inside the conversation. uh UI and we wanted to see uh how far we could push it and in order to do so um we first started testing there was an internal uh demo of uh real-time updates. There was just a counter and a button that you pressed several times and different um different browsers different users can see the same counter uh increase uh uh in real time and that gave me the idea of okay we have different browsers that are seeing the same data and update in real time. Might as well just go and do something multiplayer. And at the time I was just uh getting started with chess and it seemed like it was u slow paced enough to be uh simple proof of concept to build and still interesting enough to to be worthy of of being an example. And to be honest, we built this from scratch and it was very very simple to to build the whole thing. It was very fast. And as I said, it's around 800 lines of code, even less. And most of it is the UI, which is just uh HTML and React code. The uh chess engine is using a few uh JavaScript libraries that were already available. And we're just using the agents SDK to build the MCP server that powers the application which is how uh OpenAI uh apps work and uh another agent to be the uh real time uh chess engine and uh chess game that both players connect to. Uh but it is uh very straightforward and I suggest everyone gives it a go. It's hard to pin down one thing that uh I'm most excited about, but if in in the topic of the apps SDK and with openAI's Atlas browser that they also announced very very recently, it it does seem that we are shifting very quickly and quite heavily all our tools and software stack and it kind of just the end user applications as well. So the browser we might see that in a here most browsers are very similar to what Atlas is doing. It's not just the browser that has a search box and then you have to click through but it's just a TTPT application and maybe just a chat app but then you don't really go and look up for sites. Maybe most of your applications render inside um your your conversations and your chats and maybe you interact with most of them through um through one of the LLMs you're chatting with. And it's it's very hard to predict what just in a year from now this all might look like because it advances so quickly and and in many different ways. It's always hard to know what one or two years down them even just six months uh might look like but it is very interesting to see um that we might have a new ecosystem for developers and builders to get their new ideas and not everything is built. You have a new green field to to play with and I'm just very excited to see what what our users come up with. Workers is in a very good spot. they they are the best platform to to build this on to build agents or to just to build uh TTP apps because um you don't even necessarily need to build an agent for any of this um where we're using the agents SDK to do to do all this uh real-time sync but it takes almost no code to deploy an MCP server which effectively is one of these apps and it's basically free if you're starting if you're a developer um it scales uh as much as you want. You never have to worry about any of these and you have access to the rest of the developer platform that uh Cloudflare has available. So you can build anything that you can imagine and almost uh no code and no complexity and very fast which is very important nowadays. I think we are going to start seeing um users have more than one agent that they own slashcontrol that are they're going to be in charge of one specific set of tasks that the user wants them to do. Say you're going to have maybe your email agent and you know that you can always talk to them uh about what's in your email or uh you are confident enough that uh your email agent is going to let you know in case a important email comes along. But me as a user, I'm going to stop worrying about uh checking my inbox and um maybe a travel agent or that that's been around for a long time. Now I have one agent that is always it deals with my flights, my hotels and everything. It can talk to my email agent, but they're different. And I think increasingly we're going to see more and more tasks that they're different that they're going to have their own agents. And maybe you will end up seeing some sort of platform that will unify all these agents that it will be very easy for users to have um all of these kind of AI employees that do most of the mundane tasks that uh they're kind of they they just take uh time away from your day. But it's very interesting to see what what that might go uh into. And that's a wrap.