AI Integration in Wappler

[Teodor]

Intro

We’ve taken a big step forward in bringing AI-powered development to Wappler with the integration of GitHub Copilot. With this integration, users can now build entire pages in Design View by simply describing what they need. Whether it’s adding images, sections, buttons, or other elements, Copilot helps generate the structure instantly. In Code View, it provides intelligent suggestions to streamline development. This makes creating web pages faster, more intuitive, and more efficient.
And this is just the beginning - more AI integrations and features are coming soon!

GitHub Copilot requires a GitHub Account

Enable Copilot and the latest Claude Sonnet models for the best results in the GitHub Settings

GitHub Copilot is available for free in Wappler and requires only GitHub Copilot plan that can be also Free as well Pro for just $10 per month. See GitHub Copilot Plans

Enable GitHub Copilot

First you need a GitHub account.
Open Wappler Options and go to the AI section. Enable GitHub Copilot:

A notification showing and authorization code appears:

And the device activation page on GitHub is loaded in your browser. Click Continue:

Enter or paste the code from Wappler options:

And then click the Authorize GitHub Copilot Plugin button:

And we're done:

Click Save in Wappler options:

And go to github copilot settings. Make sure to enable the latest Claude Sonnet models for the best results:

Creating Page Layout using AI

Let's create a page layout in Wappler Design View, using AI.
We open a blank page and click the GitHub Copilot button:

Select where to insert the generated code - before, after or inside the selected element/node:

Then select the Model to use. We select the Claude 3.7 Sonnet, as it is really advanced:

Enter your prompt and click Generate. The prompt we used is

Create a section with 3 user profile cards with an avatar, name, designation, short bio, and social media buttons for the user:

You can see the code being generated:

And in a few seconds the result is on your page:

You can inspect the elements in the App Structure, and adjust them as you normally do:

Let's edit the generated layout. Select the section that was added and click the Copilot icon:

Let's change the design a bit.
Set the position to Replace Current Node and enter the following prompt:

Add depth effect with more shadows and remove the border around the cards. Also add hover effect to the cards

And here are the results:

Finally we want to add title and a button for this section. Select the section and click the Copilot button:

Set the position to Replace Current Node and enter the following prompt:

Add a section title and a subtitle, also add a dark rounded button after the cards, matching their modern style.

And here's the result:

You can see how easy we created a nice looking page with just a few prompts using GitHub Copilot.

Please let us know what do you think about the AI Integration in Design View.

[sitestreet]

Wow. I really wasn't keen on the idea of AI being added to Wappler as I feel I will spend more time checking and fixing what's generated rather than just doing it myself.

But... I've just set it up and given it a quick go and it's impressive.

Went for something simple and it did it perfectly:

"Add a row of three icons - facebook, x, instagram - centred with an animation on hover"

<div class="row text-center justify-content-center mb-4">
    <div class="col-auto">
        <a href="#" class="text-black mx-2 fs-4"><i class="bi bi-facebook transition-hover"></i></a>
        <a href="#" class="text-black mx-2 fs-4"><i class="bi bi-twitter-x transition-hover"></i></a>
        <a href="#" class="text-black mx-2 fs-4"><i class="bi bi-instagram transition-hover"></i></a>
     </div>
</div>

[kfawcett]

Very cool. Can't wait to try it out.

I'm really liking Anything LLM at the moment, which can be run locally and has a local API so you can connect to it from other local apps (i.e. you could integrate Wappler with it). This would allow us to choose the model(s) (claude, openai, deepseek, Nvidia NIM, Gemini, etc.) we use along with a local vector database (LanceDB, Pincecone, Chroma, and others).

I would love to see something like this integrated. It would allow us to use a vector database to store additional documentation like our github repositories and other docs relevant to Wappler as part of the development process. It also has live sync of the docs in the repositories and other artifacts we add into the vector database.

API Access & Keys ~ AnythingLLM

[Cheese]

Would much preferred to have seen something like Open Router being adopted rather than Copilot... Still can't please all the people all the time! Early days for Wappler AI though so maybe in the future?

[kfawcett]

AnythingLLM has OpenRouter as an option.

[Cheese]

Have explored AnythingLLM/Ollama and both are great tools @kfawcett

[sitestreet]

Will this be rolled out into Server Connect, too? Would be great for things like conditions, queries, advanced logic, etc.

[patrick]

The generator in design view is not the only AI integration, the monaco code editor also uses Github Copilot for code completions.

[kfawcett]

@Cheese

Have explored AnythingLLM

Have you ingested your git repositories into it?

I just started playing with it and so far it seems to work pretty well at providing more context about what's being built. Even across multiple repositories (i.e. server and mobile apps built in Wappler). I even added additional docs about Wappler to enhance its knowledge (e.g. how to build custom app connect extensions).

[Cheese]

@kfawcett

Have you ingested your git repositories into it?

We do not use Git as maintain our own custom solution but we have fed thousands of pages of information as training data. Its all about accurate example data and prompting. At first I laughed and joked about the term 'Prompt Engineer' but it is quite the skill to achieve the best results in working with any LLM. We spend a lot of time crafting prompts and instruction sets when we have the time spare (easy to get carried away with it when there is far more important work to be done though).

[Digo]

Personally, I hope not.

You still have to double-check things so often with AI, and with server connect you can't easily read the code because it's all JSON. I can already picture it somehow making a small mistake in the JSON that ends up causing a bigger issue somewhere and it taking ages to find the cause.

In reply to Wappler now having AI intergration:

I do think co-pilot is a good addition to Wappler, but I seriously hope this isn't the start of AI being included everywhere in the app under every single menu where it isn't needed just so the term AI can be used on the main website for advertising. The amount of apps and services I use that are now filled with "AI" garbage which adds exactly 0 useful functionality is absurd. Just look at Intercom, they've basically forgotten their entire previous business model just so they can plaster AI everywhere.

To be clear, I do think there is a use case for it in Wappler, which is co-pilot, but beyond that I really hope we don't end up with a bunch of other useless stuff. I think there are far more important features that should have been prioritized rather than adding AI though.

[tbvgl]

Solid first step to integrate AI
AI is all about context and prompting and being able to select a node is a good first step for providing context.

[umadmin]

I’m very encouraged by the update! I can’t wait to dig in. I’ve been increasingly splitting my wappler project dev time between the IDE and VS code to be able to leverage Copilot. It will be great to unify that experience!

[brad]

Activation procedure works very smooth. Well done.

Played with it for a few simple prompts and it seems to work. I don't do much for static public websites as my main job is database dashboards. So I don't see how this will be useful for me 'yet'.

I hope people will post real life examples of how they used it.

Looks good. This is a great place to start. I'm curious to see where it goes.

[baub]

ok, this is awesome!

And here is the code it generated!!!

<meta name="description" content="Expert shoreline protection services in Osage Beach, MO. Specializing in rip rap installation, concrete seawalls, land clearing & shoreline development. Ameren-certified contractors.">
<meta name="keywords" content="rip rap, seawall construction, shoreline protection, Lake of the Ozarks, Osage Beach MO, concrete seawalls, land clearing, shoreline development, barge services, material transportation">
<meta name="author" content="Lake of the Ozarks Rip Rap and Barge">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Loto Rip Rap & Barge | Professional Shoreline Protection Services">
<meta property="og:description" content="Protect your lakefront property with expert rip rap installation, seawall construction & shoreline development services in Lake of the Ozarks. Ameren-certified contractors.">
<meta property="og:image" content="assets/images/LOTO-Rip-Rap-Logo.jpg">
<meta property="og:url" content="https://lotoriprap.com">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Loto Rip Rap & Barge | Professional Shoreline Protection Services">
<meta name="twitter:description" content="Expert shoreline protection and development services at Lake of the Ozarks. Rip rap installation, seawalls & more.">
<meta name="twitter:image" content="assets/images/LOTO-Rip-Rap-Logo.jpg">
<meta name="geo.region" content="US-MO">
<meta name="geo.placename" content="Osage Beach">
<meta name="geo.position" content="38.1503;-92.6180">

[Antony]

I have bunch of custom css classes that are used all across my app… @Teodor , do you think if I describe these in the prompt they will get added?

How about it auto-adding dmx-xyz attributes if they are in the spec? Do you think it will add those too?

Would these need to be in each prompt, or can I train my copilot to know about them?

Sorry if these are nube questions… not used AI to create code yet!

[brad]

I tried the exact same prompt as @baub and didn't quite get the same results. It still gave me about 75% success. Only difference is I had to use the GPT model. Any of the models that show 'preview' I get an unsupported message.

[George]

Make sure you have enabled the Claude models in your GitHub profile first as explained in the doc above

[baub]

Did you enable Claude 3.5 Sonnet model

[brad]

Ah, I missed that step. Got it now.