Supercharge Mendix widget development with tools like Copilot, Warp, and Cursor! Here’s how this powerful combination has revolutionized the way I build custom Mendix widgets and high code components with unprecedented speed and efficiency.

As a Mendix developer with little or no high code experience, developing custom Mendix components like widgets and JavaScript actions may seem a bit (or a lot) intimidating. It traditionally involves terminal commands, managing multiple development environments, and navigating between tools, assuming you already know at least basic JavaScript/TypeScript.

The vibe coding workflow game-changer

I’ve discovered a game-changing workflow combining Microsoft Copilot, Warp or Cursor that has transformed my widget development process and sped things up many folds!

Traditional widget development process

How widget development traditionally works:

• Install dependencies like Node, npm, etc. if you’re missing them. (Here’s a list.)
• Use the terminal command to build an empty widget
• Open this project in an editor like VS Code
• Add widget properties
• Add code
• Investigate
• Fix issues
• Build, test in a Mendix app, repeat

The AI-powered approach

How tools like Copilot, Cursor and Warp speed things up with agentic AI:

• Use the terminal command to build an empty widget (same as before).
• Tell the agent what you want the widget to do.
• The agent in the tool will write the code for you.
• The agent will build the code, and If there are errors, the agent will try to fix them.
• Once ready, it will tell you what changes have been made.
• Test it in an app, give feedback to the agent and repeat.

Here’s a video showing how I use Copilot to build a to-do list widget and integrating it in the Mendix app.

Here you see:

1. Creation of an empty widget project
2. AI using agent to analyze the project and understand that this is a Mendix widget project
3. Me explaining what I want the widget to do
4. The AI agent generating code to fit my requirements and building the widget
5. Me importing the widget into my app and getting an error
6. Giving feedback to the AI agent that there’s an error
7. AI fixing that problem
8. Me re-importing the widget and configuring it on a page
9. Running the project and testing the widget.

By the end of the video you’ll notice the to-do’s working but they’re not actually linked to the datasource I configured (also, some settings were a bit weird and unnecessary). After some back and forth with refining my requirements, giving error details and feedback, asking questions on implementation, debugging only with prompts or stuff that I didn’t like, I have it working how I wanted it. Believe me, I did not write a single line of code in this widget. See below. You can see the full widget code here.

What we stand to gain

• Super-fast development with AI agents.
• No learning curve. Just clear instructions and feedback needed.
• Choice of AI models (depending on your subscription). Free has options too!
• Building with the project context means that the agent can read your existing code before making new changes.
• Not limited to new widgets, this process can be used to refactor and fix existing widgets.
• Not limited to just widgets or JS actions, this can be used for Java development, styling, etc.
• Auto comments, readme, explanation docs, etc.
• Knowledge gap bridging – helps developers unfamiliar with high-code approaches.
• Consistent code quality across different widgets.
• Learning opportunity – studying AI-generated code patterns improves your skills.
• Rapid prototyping – easily experiment with different widget approaches.
• Existing high code developers can truly make use of such tools to speed things up several folds.

Watch out for these challenges

It’s of course not all bells and whistles. Here’s what to watch out for:

• AI hallucinates (not as much as before but still). Giving clear feedback works.
• You can be stuck in loops. Identify them and tell the agent – if it gets you in loops, it can get you out.
• Some errors are deceptive and may not be the root cause. AI might not know this.
• Code porridge (or Spaghetti if you prefer). It’s easy to forget code which already exists in the project or functions which were once used somewhere but are no longer used. AI can also do this and forget to clean-up or complicate things when it doesn’t need to. But you can tell the agent to review itself and see if there’s a simpler way of doing the same thing.
• You can question agent’s choices! If the code/feature/fix/logic seems too complicated or strange, ask it to review itself and to simplify things.
• Use version control! Use GitHub or rather tell the agent to make it a Git repo and commit after every tested stable version. This will help rollback changes if things go horribly wrong (and they will from time to time).
• Get things reviewed by a professional if possible (highly recommended).
• Performance considerations – AI might not always generate the most optimized code. Question it! Ask for comment generation, explanation of generated code and execution flow.
• Security vigilance – always review generated code for security vulnerabilities.
• Dependency on specific LLM versions – results may vary between models or version.

A few final thoughts

I’ve been building custom widgets, Java, JavaScript components for Mendix apps for years, so this was an game changing experience for me. As a experienced developer, I could see where the agent generated code in minutes which would’ve taken me hours or even days. Wherever the approach/logic was not what I wanted or things were getting too complicated, I was able to provide feedback specific to a particular problem, fix it and move on. It’s safe to say, I’m going to be using this going forward!

So…. Will this replace developers ? I don’t think so.

This isn’t replacement of developers but a disruption. AI tools are becoming skilled collaborators that handle repetitive coding tasks and implementation details while human developers focus on architecture decisions, business logic, and innovation. I believe the most successful developers will be those who learn to effectively partner with AI—providing the right guidance and knowing when to take manual control. Instead of spending hours implementing widget functionality, developers can now direct their expertise toward what really matters – learning, innovation and value delivery! For Mendix developers specifically, this will only boost a core Mendix strength: rapid development.