Create a fully functional AI chatbot in under 30 minutes.
Tutorials

How I vibe coded a Chatbot with JDoodle.ai

Akanksha Hindocha

I know chatbots are everywhere, and we don’t need more of them. Off the top of my head, I can name at least ten of them already, but hear me out: What if there was a chatbot that outputted answers custom-made for you? So that was my goal: a custom-made chatbot. But as a code-challenged individual, it was tough for me to build one completely on my own, so read on to find out how I did it.

Can I build a chatbot without any code?

I have very little coding experience, I can code small programs, but a full-fledged app? No can do. So, in JDoodle.ai, if I put in a prompt about the kind of app I want to build, it generates it in a couple of seconds. But how can I build an app, like a chatbot, that can give me real-time answers? That’s where MCP comes in.

If you are a vibe coding enthusiast like me, then you know that MCP is the hot stuff right now. But what is it? MCP is like a universal plugin, it’s like Bluetooth, you can use it to connect to everything: your mouse, headphones, and your Alexa.

It acts in the same way, it’s an interface that lets a large language model (LLM) and its tools interact more effectively by sharing context in a standardized way.

JDoodle’s MCP lets me securely connect various tools right there in the chat. No backend setup, no storing keys in scary places. JDoodle.ai handles it all, and weaves the API into the app it builds.

How to build a chatbot on JDoodle.ai?

JDoodle AI Screenshot

So JDoodle.ai lets you add three different types of generative API keys: OpenAI, Gemini, and Deepseek. I used Gemini, but you can use any of them. Here’s how to do it:

OpenAI

  • Go to platform.openai.com and log in.
  • Head over to the dashboard, find API Keys, and hit Generate API Key.
  • Copy it right away because you’ll only see it once.
  • You’ll need to add some payment info (don’t worry, you can start with like $5 in credit).
  • Then pop over to JDoodle.ai, open your chatbot project, and find the
  • Integration Panel at the top right.
  • Search for OpenAI, paste in your API key, and hit refresh.

Boom! Your chatbot is now powered by the same tech as ChatGPT.

Gemini

  • Head to Google AI Studio and log in (or sign up).
  • Click Get API Key (or Create API Key if the popup doesn’t show).
  • Copy that key and keep it somewhere safe.
  • Just a heads up: the free tier has some daily limits. If you’re going hard, you might wanna look at the pro version.
  • Back on JDoodle.ai, open your project, find the Integration Panel, select Gemini, and paste the key.
  • Refresh your project.

And just like that, you’re chatting with your chatbot.

Deepseek

  • Go to deepseek.com, log in with your Google account, and find the API Keys section.
  • Click Create New API Key, then copy and save it immediately. Keep in mind: free tier has limits, but hey, it’s free.
  • Head to JDoodle.ai, open your project, and go to the Integration Panel.
  • Choose DeepSeek, paste your key, refresh, and done.

Now your chatbot’s thinking with DeepSeek’s brain. Not bad, right?

So, how did I do it?

I first went to JDoodle.ai and pasted my prompt. I wanted a futuristic-looking chatbot that would have graphics and some animations and would be interactive. So here’s the prompt that I put in:

Build a futuristic-looking chatbot interface that features sleek, modern graphics and smooth animations. The chatbot should feel highly interactive and immersive, with dynamic visual elements that respond to user input.

Think neon accents, holographic UI components, and subtle motion effects that make the experience feel alive. Prioritize a sci-fi aesthetic: something you might see on a spaceship control panel or in a high-tech AI assistant from the future.

And then I followed the instructions for adding API keys from Gemini. And simply pasted my free Gemini API key in the integration panel. And that’s it! I had a fully functional chatbot that would work for me, and I can go to it anytime I want.

Chatbot Screenshot

Project Link: https://knk5ii.jdoodle.io

That’s not all!

With JDoodle.ai, you can do so much more than just build fully functional chatbots. You can plug in way more than just LLMs. Think of it like a toolbox for your app. Some special mentions include:

  • Mailchimp: to send emails directly from your app
  • HubSpot: for managing customer data and CRM stuff
  • Google Analytics: to see how users are interacting with your app
  • Zapier: to automate stuff across all your other tools
  • Airtable: to use as a backend database (yep, no coding required)
  • Typeform: to create beautiful forms and surveys
  • Intercom: to add a live chat or support widget
  • Sendgrid: to shoot transactional emails
  • OMDB: to pull movie data

Integrations

JDoodle.ai just makes the connections behind the scenes and wraps them into your app and that too securely.

Here’s your sign to build something cool

If you’re someone who loves dreaming up apps but doesn’t speak fluent code, JDoodle.ai is the place to vibe code.

It’s not about getting everything perfect. It’s about having an idea, throwing in a wild prompt, hooking up a few tools, and watching your app come to life like magic.

I built a chatbot. You could build a newsletter bot, a movie search engine, a mini CRM, or a fully loaded landing page with live analytics.

Related Posts

View All Posts »