Hi all
I’m new to using AI in Elements myself, so I may be teaching people how to suck eggs, but here is my experience as a novice at this stage.
I experimented with ChatGPT and Elements last night
I set it up through both MCP and with an API key.
I just followed the instructions in this video, and I was up and running in 5 minutes.
API Method:
The API Key method is definitely the easiest to use as it can all be done from within Elements.
I asked it to create sections on a web page based on images of layouts I had, and it did it very well. I just typed, “Using the core components, create content in the container called ‘Services Container’ using the attached image to show you how I want it to look”.
It did a great job creating what I wanted, and then I either asked it to make small changes or adjusted them myself (padding, margins, background colours, etc.).
It also didn’t get it exactly how I wanted on mobile view, so I asked it to change it.
For example, on desktop view, I had a row of 4x SVG icons with header text underneath them and on tablet view it moved them to a block of 2 rows of 2 columns (great) but on mobile view it had 1 column of 4 rows and it didn’t look great so I just asked it to change it to 2 columns and 2 rows for that view and it just did it. It saved me a lot of time.
The downside to the API key method is that you have to buy credits, and depending on what you ask it to do, it can use them quickly. I quickly realised that GPT-6 Luna is much cheaper than GPT-6 Astra so you might want to experiment with the results from using Luna first.
Personally, I am definitely going to use this feature a lot to significantly speed up my workflow and I will just budget for API credits for each project. I estimate I could probably build twice as many websites in a month using AI with Elements.
My advice for anyone who hasn’t tried it yet is to add $10 worth of credits and ask it to build a section for you on a web page. Try using GPT-6 Luna first, as that uses a lot fewer credits up.
MCP Method:
I have only just started experimenting with this, but it already feels less intuitive.
I think it could work well if you worked on two screens and had ChatGPT desktop open on one and Elements open on the other.
I’ll try to stick with this method because, as I understand it, you don’t need to buy anything else.
I have a basic £20 a month subscription to ChatGPT as I have been using it for image creation, content writing, formatting css code, etc, over the last few months and it has made a big difference to my workflow.
Someone with more knowledge and experience of AI, MCPs and APIs than I do (which isn’t difficult
) may be able to give a better explanation, but just from putting my feet in the water a little over the last 24 hours, I am blown away, and it’s going to change my workflow for the better significantly. It is going to allow me to design website layouts in graphic form and then leave the construction of them to AI. Provided it’s all done within the Elements framework, I will be able to make changes when necessary. If I get stuck, I can just ask ChatGPT to do something for me.
Over time, it will allow me to build up a good selection of components to reuse on other websites, which will speed things up for me even further.
I hope someone finds this useful, and sorry for waffling on.