Build a Chatbot in One Prompt with the New Gemini 2.5 Pro Experimental (Canvas Mode)

⏩ TL;DR — Skip to 12:01 to see the vocab chatbot in action🎬

We made a chatbot in one prompt using Gemini 2.5 Pro’s new Canvas mode and improved prompt-to-app coding capabilities. It runs in a live coding workspace, updates in real time, and generates working HTML, CSS, and JavaScript from a single prompt. 🤖✨ (We did tweak the prompt with Gemini again after the first run!).

This one is called Vocab Builder Bot — it helps users learn new words by providing definitions and example sentences for vocabulary they type in. We tested it locally using Visual Studio Code and Live Server.

Want to try it out? You can experiment with Gemini yourself here:
👉 makersuite.google.com/app

Just keep in mind: if you run the chatbot live in a browser, it’ll be limited to whatever data is hardcoded into it. More detailed responses — like recipe generation or career advice — would require an external API, a custom dataset, or a Retrieval-Augmented Generation (RAG) setup.

To add more vocab choices, we integrated DictionaryAPI.dev (dictionaryapi.dev/) to fetch definitions and example sentences when a word isn’t found locally. No API key required!

This chatbot uses DictionaryAPI.dev — a free and open-source dictionary API for developers.
Support the project here: dictionaryapi.dev/