How I use GenAI to Speed Up Demo Apps in My DevRel Role

Often the questions posed to software developers is whether AI will replace them. If you’re a developer advocate or in the field of Developer Relations (DevRel) then you’ve most probably thought about this too - will AI replace you? make you expandable?

The key, really, is to fundamentally leverage GenAI to speed up your work and make you more productive. This is true whether you’re an engineer or a developer advocate. As the saying goes:

“AI will not replace you. Developers who use AI will replace developers who don’t.”

Indeed, this applies too for DevRel. Let me show you a practical example from my day-to-day.

Using GenAI to Make Developer Advocates More Productive

I’m a Developer Advocate at a security company (snyk.io) and I often need to create demo applications to showcase security vulnerabilities. These are deliberately vulnerable apps that we build in Java, JavaScript, Golang and other languages and frameworks for education purposes.

As you can imagine, a lot of work is spent on building these demo apps. Here’s a nutshell of what goes into it:

• Prep and research: what sort of vulnerabilities? what’s the use-case?
• Storyline: what is a realistic example that developers can relate to?
• Proof-of-concept: building the core of the exploitation and making sure it works so that it creates the basis for the demo app
• Building the demo app: this is where the actual app is built and where the exploitation is showcased
• Make it fun: hopefully, make the app look actually fun and engaging, using proper frontend and not some boring UI
• Make it reproducible: make sure that the app can be easily deployed and run by anyone in my DevRel team, SEs, or by the community
• Document it: properly document the how-to for the exploits
• Spread the word: write a blog post, create a video, and make sure that the app is well-documented

What if I told you that out of that list, which is a lot but there’s even more that goes into it, I really only need to focus on a couple of to-do bullets and the rest can be automated by LLMs and GenAI?

Follow me for a practical, real-world example where I employed the above strategy to build a demo app that showcases a security vulnerability in image analysis and prompt injection in a Node.js app.

Step 1: Ideate the Use-Case and Fun Demo

This is my starting point. I often either see something in the news, community, social feed or other interactions that sparks an idea. In other times, I just sit down and think what would make a fun use-case to demo. You can use AI to brainstorm this too but I often find it more authentic when the idea comes naturally (or from subconsciously browsing the web and prior engagements).

So, I ideate what would be the use-case and fun demo to showcase a type of security vulnerability (in this case it’s an LLM hacking showcase)

Step 2: Proof-of-Concept

Once I locked down an “idea”, I iterate on the proof-of-concept which is the core of the program and I want to make sure that I’ve got a working example. This is where I spend most of my time because it requires effort in research, prompt injections, and various methods to find the “path” to a successful working demo.

That successful moment when everything just works! The vulnerability is exploited, the prompt injection is successful and I can see the results in the console. Yay! 🙌

Step 3: Building the Demo App

Ok so I’ve got a story, an idea, an actual proof-of-concept of the underlying insecure code and insecure code flow that would lead to a security vulnerability and break the app. Now I need to build the actual demo app.

I bet many developer advocates and engineers spend a ton of time on, for honestly in my opinion, not a good reason. Here are all the stuff you can get stuck with:

• Which framework should I use? React, or Vue? Should I try the new Svelte?
• I need to dig into the docs and see how to set up a new project
• How do I scaffold a new project? should I use a ready-made template on GitHub? use the framework’s own CLI?
• Which UI component library to choose from?
• How do I get all of the different libraries put together and configured: Shadcn, TypeScript, the metaframework, etc

And much more messy details that go into building an application. But what if I can just settle on the high-level requirements and let GenAI do the rest?

This is where the new generation of application scaffolding and Generative AI comes in! I’m not talking about Cursor or Zed. I’m not talking about prompting IDEs or ChatGPT. I’m talking about a new breed of blended IDEs for low-code development that is fine-tuned at the intersection of AI and software development.

A prime example of that is Bolt which is a Generative AI tool from the folks who built StackBlitz.

I prompt Bolt, asking it to scaffold a new Node.js app with Nuxt.js and it does all the heavy lifting for me. It sets up the project, installs the dependencies, and even gives me a working example that I can then build upon.

I can specify the pages I want, the routing, which components are needed (for example an upload file component), and even the styling. I don’t need to worry about API endpoints, or how to setup the new Nuxt project. It’s all done for me.

Conclusion

I’ve used the demo app that Bolt scaffolded as a template to get started with and just baked on it my proof-of-concept code. You can take a look here if you want to learn more: https://github.com/lirantal/event-ticket-admission-with-ai