The Magic Frog - Collaborative Storytelling (Bot and Website)

in utopian-io •  last year

Some of you already might have stumbled upon this new Steem account: @the-magic-frog. The Magic Frog is a fun project around collaborative storytelling and maybe also promoting Steem. I want to share this project with you because maybe I could need some help with developing some features and I also want to expose this project to a greater audience, the Utopian community. Because after all... I'm really serious about this and I want it to become big.

I highly recommend to read the introduction post here. It was great fun to write it and it gives the project some character. But since this is a development contribution I will share some of the "technical magic" happening in the background.

The mechanics in short:

At the very end of the introduction post you see that the first story started with "Once upon a time, there was a wizard..." and people commented how to proceed. Every day at 12:30 PM CET a new post gets published, where people can comment. The comment with the most upvotes after 24 hours will be appended to the story in the next post. A story can end when "The End!" gets appended to the story. In the next post a new story will then start, with "Once upon a time...". (The mighty wizard is only the protagonist of the first story. For future stories it's totally up to the community.)

The rewards those posts generate are used to reward the participants and power up the account. So whenever a story ends, half of the author rewards from those posts are given back to the community. Either by raffle or splitting the pot based on how many parts a participant has contributed to the story. I haven't decided yet. Maybe a mix of both.

Once the bot account has enough Steem Power, it could maybe give small upvotes for everyone who participates and a full upvote for each winning comment. The bot also upvotes all the story posts to ensure a minimum pot. The more Steem Power it has, the bigger the minimum pot and the reward for simply participating.

Today is day 14 of the first story. It turns out to be exactly what I expected to happen. It starts with good and serious intentions but then drifts into a very questionable direction. Perfect!

"Wait!" said one stork, "do we really want to see the wizard naked?" The imagery started to flow through their minds, but they figured that they would be fine.

by @enforcer48

Of course...

Read the whole current story at

The Magic Story Machine a.k.a. The Bot

The bot is rather simple. Each post it publishes holds a day and a storyNumber in its json_metadata. So by looking at the last post the bot knows where we are. Each post contains the current story, as far as it has progressed, in its body between two markers. (This will probably also go into the json_metadata.)

It reads all the comments of the most recent post and picks the one that is valid and has the most upvotes. The voting weight or SteemPower of the voter is ignored. Whatever the community decides to append to the story gets appended in the new post.

It's a node script and a little helper file that uses the steemjs library.


  • prepare to get more than 100 posts
  • automatically raffle/distribute the generated rewards
  • automatically reply to the most upvoted comment
  • automatically upvote post
  • publish on Twitter/Facebook

Idea: Maybe this approach of using comments as commands for what happens in the next post or whereever... could be a thing of it's own, a little helper class to easily configure commands and actions. But that's just an idea. Maybe someone want's to pick it up.

The Website

I created the website mainly to display the current pot value and to avoid wrongly formatted comments but actually it makes the project visible outside of Steem and so I thought maybe it can even attract some people from outside. If only the sign up process would be faster... :(

Currently the website gives a brief introduction to the project and displays the current story, its pot value and the suggestions how the story could go on. You can login via SteemConnect to vote on the story and other comments and of course write your own one.

Vue.js & Nuxt.js

The Website is built with Nuxt.js, a framework on top of Vue.js. There is the main page and an auth page to receive the SteemConnect access_token and safe it in a cookie.

The rest is just fetching some async data, connecting to SteemConnect and some templating.
Well, and of course, handling the commenting and voting... since this was the initial intention. It makes sure that a comment is not longer than 250 characters and makes it more clear how to end a story. And be careful when voting. Votes are always at 100%. ;)


The website uses Bootstrap-Vue, a very nice bootstrap integration for Vue.js. With Nuxt.js you only need to select it on install and you are ready to go.


There are currently no notifications, except for one error message. I implemented vue-notification for that. There will be more notifications, for example when your comment gets upvoted or makes it into the story or when a story ends and aaaaall the money gets distributed.

Custom Components

I used the component functionality only for the Navbar, the LikeButton and the Commands. Everything else happens in the index file.


There still is a lot of room for improvements.

  • Enable HTTPS
  • Wallet Integration
  • User Ranking
  • Story Archive
  • Twitter/Facebook share buttons
  • Notifications
  • Educational Content about Steem
  • Style the Auth Page... at least a little bit.

Bye the way... Thanks a lot @wehmoen, for sponsoring the domain and the server for the website.

Big Plans

Audio/Print Version

As I mentioned earlier, I want to make this project big. If it reaches a certain size and popularity and once we have generated some interesting and funny stories I can easily imagine to publish a printed version, in small numbers.

One thing I definitely want to have is an audio version. @buckydurddle, who is the voice of the Utopian videos already showed some interest in helping me with that! I will come back to you very soon! ;)


The idea was really very spontaneous and silly but people seem to enjoy it and even people outside of Steem, that I've talked to, think this is a really interesting idea, although they don't understand how on earth this can generate some revenue. I believe this project can also serve as a little promotional campaign for Steem. Therefore I need to improve the Steem-related information provided on the website. But it must be very "integrated" and fitting the project. People must not notice that this is a promotional campaign... it's my version of a trojan horse! :D

@the-magic-frog currently has less than 50 followers. I want 1000... at least! So I definitely need some influencers to promote the project. See this post as a first call for such people, but maybe there will a separate Task Request for that and other things on the list. I definitely see some stickers on traffic lights and street lights and for sure there will be banners on Facebook (if they don't ban it :D) and elsewhere.

Other languages

Currently the project is only in English but of course, theoretically there can be a version for every language. I will take care of the German version myself very soon, but if you are interested in supporting the project in your language, you are very welcome to contact me and we can make it happen. I will cover the technical part and you can translate the background story or come up with your own.


Everyone is welcome to help the project to grow, of course! For the start the most effective way of doing this is sharing the story posts, upvoting them to raise the pot, and most important... participate!

Use the website to submit your comments and vote on other peoples ideas!

There are already two interesting suggestions today!

If you do not consider yourself to be the incarnation of creativity itself... but you also feel way to powerful, you can share some of your power and delegate it to the frog. I initially delegated 500 SP but I think it can be some more. Of course 50 % of the rewards will be powered up, so upvoting the story posts also helps very much... but if you want to give the frog an instant boost... feel free to delegate a little something. Maybe I can come up with a way to reward delegators as well. We'll see.

Get in touch with me on Discord: @mkt#8655

The End! ;)

Posted on - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Hello, as a member of @steemdunk you have received a free courtesy boost! Steemdunk is an automated curation platform that is easy to use and built for the community. Join us at

Upvote this comment to support the bot and increase your future rewards!

The.... the.... the architect! So all the rumors and myths are actually true. Wow!


I'm so sorry that you found it out this way :/ I should have told you earlier about your father....


He's the father of... literally.... EVERYTHING! I'm fine... but what a revelation! I'm still shaking!

For the preservation of the majestic Russia!


Sa sdorowje!

Lieber Bürger,
mit Wohlwollen habe ich Ihren Beitrag gelesen. Vielen Dank, dass Sie sich an der Steem Blockchain beteiligen.


Ihre Bundeskanzlerin


When you copy/paste or repeatedly type the same comments you could be mistaken for a bot.

Tips to avoid being flagged

Thank You! ⚜


Vielen Dank für Ihre Aufmerksamkeit! Die deutsche Version wird bald veröffentlicht!
Hochachtungsvoll... mkt!

I like this project. It's fun and engaging. (I noticed that I got quoted lol)

As for other languages, I think it's definitely worth asking @justyy, one of the five Chinese Witnesses, to see if he knows anyone that would be interested in this project in Chinese.


I'll definitely do that!
@justyy? Haven't talked for some while? How are you? :P

Btw @enforcer48 I totally forgot to mention you. Corrected it now! ;)

The idea is really interesting and I'm enjoying participating in it. Too bad that there are very few participants at the moment. It could really use some more love thats for sure. My account is new so I don't have much followers yet. Nonetheless, I will still resteem this to show my support.


The Frog once said.... "Every tiny little help is appreciated... a tiny little bit!" :P No, honestly, thank you! :)

Hey @mkt! Thank you for the great work you've done!

We're already looking forward to your next contribution!

Fully Decentralized Rewards

We hope you will take the time to share your expertise and knowledge by rating contributions made by others on to help us reward the best contributions together.

Utopian Witness!

Vote for Utopian Witness! We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

Want to chat? Join us on Discord

i would love to do the arabic version


Seems like this will be an international project... :D Give me some time pls! I'll come back to you!


great . btw you can find me on the utopian discord channel , i am a moderator there


me too... at least... I was... ;)

Thank you for the contribution. It has been reviewed.

  • Please add a license to your github repo.
  • I love projects like this, rewarding creativity is a very lofty goal.
  • I'm also interested in getting the French version going.

Need help? Write a ticket on
Chat with us on Discord.



Thank you for reviewing my contribution. I know that you actually read it! :D Thank you @helo! I added the license file... ;) More descriptive README files will follow soon! :P


And I can see you are still testing me. ;-)


Once you are supervisor.... you'll never go back! xD No, honestly.... thanks for taking the time! :)


Oh and btw @helo .... It would be a pure honor to have you on board for the french version! Give me some time! :)

Very creative way to making a story.Awards increase creativity for most peoples but not every...

I would like to help you by running the Romanian version!


Awesome! I will come back to you once I've set up all the prerequisites for multi language support!


Do you have a discord server?


Not yet... Soon!

Thanks for your contribution @mkt. I've joined the others who've scored it.

Let me also say as an aficionado of collaborative writing I am very excited about this one. Both from a user's and developer's perspective it promises to be a lot of fun.

One of the things the questionnaire asked us to score was your commit messages. Your messages were okay but could have done more to inform other developers of the intent and process behind each commit.

One of the best practices that I try to follow for commit messages is to use the imperative mood. It tends be clear, concise and easy for the reader to follow. For example, instead of...


consider something like...

Fix commands and adjust comments

Writing as if we were telling someone else what needs to be done encourages us to find the essence of each commit. Tiny commits are also easier to write about.

Another area the questionnaire asked us to score was 'completeness' of your comments. I gave you the highest rating in this area because your code was understandable, followed readable conventions, and didn't need extensive comments.

The comments that were included were appropriate for reference and warning. In my opinion this is the practice that should be encouraged over writing lots of comments.

Again, I think very highly of your project. The feedback above are just some finer points to help you score even higher.

Best wishes!


What a feedback! Thank you. You are taking your job serious! And I'll try to improve my commit messages.... but I also promised my mother to never take drugs and so on,... so, don't count on me. :D


But we will never give up hope! :D