Inspiration
My team and I have always loved social deduction games. The thrill of being able to suss out your friends and compete with them together. When we saw that the theme was clone, we began to ideate on topics that surrounded cloning and settled on one that we thought was amazing.
What it does
Echo is a social deduction game at heart, but the deciding vote isn't between two people, but instead between a person and a clone (in actuality an AI LLM model with the ability to learn). To begin, the host begins by hosting a “chamber”, which is our term for a party. The server has a code to allow other players to join. Once a group of 3-4 players have joined (or more, can be scaled massively), the game can be started. The game begins with the host picking a target, which is the player that the clone aims to impersonate. Every round, before the public question, the user answers 2 “training questions”, which will teach the clone about the player’s usual topics and writing styles. After the user answers/trains the clone, a question that everybody can see is displayed in which both the target and the clone respond to. The clone then responds with its response and the human responds with its response. The spectators now need to decide which one of the responses is human. As the rounds progress, the clone has more training data from the user and is able to craft better responses that reflect the player being impersonated. By round 5, when the game ends, the clone’s responses are almost indistinguishable from the player being impersonated, allowing for some funny and plot twist moments that create really fun responses.
How we built it
tech stack
Here is the tech stack
- React 18 + Typescript for frontend UI
- Vite for dev server and build tool
- React Router for out host code and play code routes
- PartyKit for hosting the real-time websocket server. This helped a lot since it handled all the game state, broadcasting, and room management
- partysocket which is just a client side WebSocket wrapper that auto reconnects when connection to the lobby is lost for seamless play
- OpenAI GPT-4o for generating the clone's answer server-side
- Cloudflare pages, hosts the static frontend
- Partykit cloud, which hosts the server at the [something].partykit.dev link, but it runs on cloudflare pages, we just used this for a bit but switched to cloudflare later.
- Claude Code, this helped us a lot with building aspects of the game such as integrating partykit, vite, and some of the UI design to get it how we liked it. It also helped us plan the stack and the timeline since it knew far more coding resources than we ever could.
- Suno AI Music generator for background music since it was able to fit our theme exactly how we liked
Challenges we ran into
The biggest issue we ran into was probably keeping the clone from finishing before the target. The original design we had assumed that both answers would be ready at the same time, but GPT-4o is a fast AI model, so it would be done in around 2-3 seconds. If the host screen showed that answer B was done almost instantly, the game would just be over because everyone could tell the typing speed would be that of an AI. In that case answer A will be used instead of answer B. The fix for this was that we added the cloneRevealAt mechanism. When the target sends their first keystroke (through targetTyping) the server will set a random 5-10 second countdown before the clone is revealed as having its response being done. The clone stream finished in the background and then just waited. Both answers display as ready in a small time window so that it's basically impossible for the spectators to deduce the human from the bot using timing.
The second biggest problem that we ran into was prompt quality. We had to iterate the prompt we made to our ChatGPT API a couple of times to get the AI to respond how we wanted, which was to completely replicate the user's inputs no matter how unhinged or crazy they may be. The new prompt is far more detailed than the one we used in PLAN.md. The current prompt used can be found in our index.ts file. The prompt that is currently used in the latest version tells the model to explicitly mirror recurring topics that the user has inputted, use the same sentence length and typing style, pick topics that the real person would pick, and avoid em dashes or any other AI-esqe writing conventions. These are all changes that came from multiple iterations of playtests.
Accomplishments that we're proud of
Definitely it was actually getting the game up and running and ready to play before the competition ended. Hackathons are always a challenge for me (Sam) and it was my friend's (Bourne) first ever hackathon, so the possibilities of us finishing before the due date, and with time to spare for iterations and Quality of Life updates was very slim. Nevertheless, we locked in and got this done early with some time to spare to make the game look nice and make it actually an enjoyable playable experience. We were even able to run a couple of rounds with our friends nearby! (The unhinged ones were the most funny ;D)
What we learned
How to deploy on Cloudflare pages Previous to this we had only deployed on Vercel, so switching to Cloudflare pages was a bit different but we chose it since Partykit (The platform we used to host the multiplayer aspect of the game)
Using Vite for frontend building This was a quality of life thing we made for ourselves to not make the deployment process too tedious. After reading some of the docs and getting some help from Claude we got it running so that we could deploy with a single npm command.
Using GPT API This was probably the first time that we have used the ChatGPT API call in a real experiment, so it did pose a bit of challenges to get it set up, but after the initial setup, everything worked seamlessly. Overall, a good experience and it helped us learn how we can actually integrate AI chatbots into apps without seeming like we're just buzzword farming for investors.
What's next for Echo
My favorite part! As seen in our trailer and code, the app is basically done. This means that it's ready for deployment and even for people to play online. If you already have a group of friends this would be a great game to play with them either in a Discord call where the host screen can be streamed or an inperson meetup where the host screen is big for everyone to see and the spectators have the game open on their phones or computers. Truthfully, the possibilities are endless (fun) for Echo and we really hope you have fun playing it as well.
I do have to warn you that the pages.dev link below does NOT work on LCPS wifi without some sort of VPN or Hotspot in our testing, it may work for you, so be sure to try it, but be aware that if the page does not load, it is not an issue on our end.
Built With
- cloudflare-pages
- openai-gpt-4o
- partykit
- partykit-server
- react
- react-router
- typescript
- vite
Log in or sign up for Devpost to join the conversation.