Using Agent Mode in Wappler's AI Assistant

[Teodor]

Intro

Wappler’s AI Assistant has evolved quite a bit recently, giving users more flexibility in how they interact with it. There are now* a few different modes available, each tailored to a specific kind of task:

• Ask – great for when you want to discuss ideas, explore solutions, or get advice.
• Edit – lets you apply quick code changes in one go. This mode will be deprecated in favor of the Agent mode.
• Agent Mode – a smarter, more conversational mode where the assistant can actively interact with Wappler, fetch additional information, and carry out structured edits or commands.

In this article, we’ll take a closer look at Agent Mode and how it works.

*Wappler 7 beta 27.

Agent Mode

Agent mode is available in Wappler's AI Assistant for both Server Connect and App Connect.

App Connect

Open the AI Assistant:

Open the Mode Menu and select Agent:

Then select the AI Model which you want to use:

Enter your prompt and hit the send button:

The AI Agent will generate the code to you and will provide explanation about what has been added or modified:

In the Agent Chat you can see the commands being run with a success icons next to them - used for debug info. You can expand and see what changes have been made on the page:

Switching to code view you can see the Diff Toolbar which allows you to review, keep or discard the changes made on the page. Use the arrows to loop through the changes in the code:

Click Keep to keep these changes:

You can continue the conversation with the Agent, with the changes you need to be made next:

You can preview the changes in the code after every change made by the Agent:

Server Connect

The Agent Mode is also available in Server Connect.
Open a Server Action and click the AI Assistant icon:

Select the Agent mode from the dropdown:

Then select the AI Mode which you want to use:

Enter your prompt and hit the Send button. We asked the agent to output data from specific columns from a table in a database:

You can see a detailed descriptions of what changes have been made and what has been added as per your request:

Previewing the Server Action in the browser, you can see it outputs the data which we requested:

This is a simple example, but of course the AI Agent is capable of more complex tasks, such as generating CRUD operations, building conditions and other stuff you need on the server side.

[Apple]

@Teodor

The Agent Mode is also available in Server Connect.

Holy moly! How do you keep it from generating invalid JSON for Server Actions? Is there JSON validation taking in consideration the available steps and their options?

[George]

Well it is magic and the new Agent mode that generates great schema controlled output.

So we have a lot of examples and schema for it to learn from. But I’m sure will be fine tuning it more. So try it out and let us know if you find any invalid generations.

Also we currently support the server connect core actions and the database actions and more will be coming up.

[Apple]

Oh, ok. Ideally, you'd have defined the schema of each step in a format that Wappler editor could repeatedly validate against the JSON after each AI generation.

I think this is what I'm talking about:

JSON Schema

[George]

Well that is not true in AI world. JSON schema is too cumbersome and large. AI models would much better follow a good explanation with examples. And that is what we do.

[Cheese]

We do the same. We provide an explanation using line numbers from the source for files we want the Model to interpret (in a text file) or alternatively we inject a brief synopsis of the function using comments within the file itself. Enough example input soon allows the Model to learn and then upon each iteration the output is more refined. We repeat this process again and again until the Model gets dialed in and then proceed to the next set of example files once the output satisfies our needs. It is a bit like teaching a child to use a knife and fork. Once they see the parents use them they figure their own way of doing the same until one day you find yourself not having to spoon feed them as they can then do it for themselves.

[Apple]

@George

Well that is not true in AI world. JSON schema is too cumbersome and large.

I don't think you understood what I meant, my idea is not to supply the JSON schema to AI, my idea is the Wappler editor, after it receives a JSON from AI, to validate if the JSON is compliant. Like linters in IDE that validate if the code you wrote is syntactically correct.

Also, I agree JSON schema is cumbersome, maybe an alternative is writing a tool in Go that validates Wappler JSON. If there's interest Patrick can reach out for the specifics.

[George]

@Apple

my idea is the Wappler editor, after it receives a JSON from AI, to validate if the JSON is compliant

Yes we do that to some extend indeed, at least for the general Server connect actions structure. So that valid actions are inserted.

[George]

@Cheese

We provide an explanation using line numbers from the source for files we want the Model to interpret (in a text file) or alternatively we inject a brief synopsis of the function using comments

Well we actually move away from the line numbers approach because AI models can’t count! This is a very serious general problem.

So we are using now a universal diff approach that also do fuzzy matching for code changes and it has been proven to be rock solid approach.

If you are interested in the counting problem see:

The Curious Case of LLMs: LLMs Can Code but Not Count

[Cheese]

We did stumble across this issue. Was very annoying indeed. We overcome it by inserting our own commented line numbers with a script created by the Model itself. That routed us around the initial hurdle until we achieved a satisfactory outcome.

Naming conventions are among the most important aspects for CRUD operations we found. So we dumped the DB schema in to the Model. We provided working examples of basic CRUD operations. We then generated forms that followed the conventions from the tables within the DB (and example Server Connect forms). Or we can use a 'scraping' script that scrapes a given file for any forms and outputs the form inputs to a text file using their name attribute. Then we can use this to generate the necessary files using these 'scrapes' as the template for any Actions. Is a little more complicated than I'm describing here though. Next step is a fully automated version that we just point at a directory and tell where to output everything. As Wappler now has some of this functionality we'll see how we get along with it.

Very enjoyable process though! Next we are diving in to MCP and the new Google A2A layer as feel this may well become an adopted standard (being Google and all...)... Should give us a nice pipeline (and starting point) for all future similar endeavors...

[jimed99]

This week @ben mentioned in the lounge where is everyone. I have found myself leaning more on AI for immediate answers vs waiting for a forum response. Sad but true.

This addresses new pages and functionality. How will the process work to introduce AI to older projects and assist in upgrading to the next stable version of Wappler?

[Apple]

Can Agent Mode apply changes to both page and Server Action at the same time?

[George]

The current AI Assistants are per editor so effect the current editor only.

We will be introducing also a project wide AI Assistant panel that will perform project wide actions and be able to create multiple pages, server actions etc and even coordinate with their own local AI Assistants.

Is that a workflow that you are looking for or do you have something different in mind?

[Apple]

My ideal scenario I would talk to AI "Create a contact form and the relevant Server Action" and it would create both the page and Server Action for it

[TMR]

@Apple

I would talk to AI "Create a contact form and the relevant Server Action" and it would create both the page and Server Action for it

I think having Wappler AI create all form interactions on front and back end in one go would be a massive time saver. Creating forms and all their actions is a grind sometimes, having AI take the load for this would be ace.

[baub]

Ok, so I have a question. You choose which AI model you want to use. I currently have a github subscription to their model, but I also currently pay for a chatgpt subscription. Should I just use the chatpgt in wappler and then dump the github subscription. I would rather just pay for one, and outside of wappler primarily use chatgpt.

[Cheese]

I'd highly suggest Open Router @baub and that way you can select from many Models including ChatGPT if you want. You'll also be on a Pay As You Go (minimum five Dollars of credit to get started) term which rolls-over so if you don't use anything you don't pay or make a loss and if you do you only pay for what you use. Really easy to sign-up and top-up. Great service and will you give you access to pretty much any Model you want.

[sitestreet]

And this can connect directly to Wappler?

[Cheese]

Absolutely thanks to the recent integration in to the A.I settings within Wappler itself (HUGE praise to the Team). Just enter your API Key, select a Model, and off you go. The other great thing is you can then use your Open Router API Key in multiple other pieces of software such as Visual Studio Code and its plugins like Cline and Roo-Cline etc. Or use the Chat functionality of Open Router itself which is SUPER FAST! I'll try to bang out a video about Open Router and its functionality in the next couple of days... And as soon as I have a new 'puter' I'll begin to live stream my crazy sessions which will expose my madness, within Wappler, VSC, and other tools, to the world (even if it is only my mum that tunes in).

[George]

@baub

Should I just use the chatpgt in wappler and then dump the github subscription.

No. We actually do not support chatgpt directly in Wappler and if we do it will be through api key that we cost you much more.

Just use github copilot as it supports the best models you need and it is also fixed price!

Just $10 monthly for GitHub copilot Pro