Democratizing APIs with AI Assistance: A Step-by-Step Guide

Access the original SE4 website experiment (seen in the screenshot above) here.

I love experimenting and staying up-to-date.

Background: In Sweden, we have a long-running debate on energy prices. Briefly, the country is divided into four energy zones (SE1-SE4), with me residing in SE4.

I had an idea of displaying the difference in these regional prices.

Here’s the exciting part: We’ve reached a stage where I can simply provide an API address to an AI like Gemini or ChatGPT. These AI models can then understand the API, generate code to request data, and even build a basic website to display it.

Is this the democratization of APIs?

Not quite yet, but we’re getting closer.

The initial code might be clunky and lack features, but it works! I shared this process in a LinkedIn post today, along with a promised guide on how to achieve this yourself. So here we go!

Leading the way with constraints

In my experience, one of the most effective leadership strategies involves setting clear constraints on objectives. This concept, which I’ve encountered in various leadership trainings, is something I leverage frequently. My former boss consistently emphasized the importance of setting deadlines, constraints and goals for desired outcomes. Essentially, you need to create constraints and limitations to avoid getting lost in the open sea.

The same principle applies to AI. Throughout this article, I’ll guide you through the process of achieving something similar to the SE4 website I generated using an AI.

Providing clear constraints

As you’ll see, I provided clear constraints to the AI (in this case, Google Gemini). This ensured the AI wouldn’t generate code requiring complex technologies like cloud services or Node.js, keeping the solution simple. Let’s see where this approach leads us.

The AI successfully confirmed the possibility of creating something under these constraints. While I won’t include the entire output here due to its length, you can expect similar results by trying it yourself with Gemini.

The next step involved code generation for requesting data from the API.

AI filling the gaps

An interesting aspect of this process is that I didn’t specify the individual variables within the API call (e.g., year, month in Swedish: ÅR, MÅNAD). The AI was able to interpret this and create the necessary data for the call itself. As an example, “const today = new Date()” provides the data, from which the year can be derived. In the past, you would have had to write this code yourself, potentially requiring additional research to determine the specific formatting required.

Fortunately, AI can now handle this step for you.

At the conclusion of the generated response, the limitations imposed by my constraints would also be presented.

Building the foundation

With the groundwork laid, we can proceed by requesting the complete codebase from the AI. This code can then be copied and pasted into a website folder for upload.

While the full response isn’t included here, you can already see that this is a bare-bones solution lacking specific styling elements. However, the AI did prepare for this aspect.

The following step involves logging in to your web hosting platform (e.g., One.com) to create the necessary files. You can then paste the code and upload it to your website folder.

The files has been created and the code pasted into them. Now, this is the result:

Refining and Iterating

The initial results might not be perfect. If this occurs, provide feedback to the AI, including snippets from your newly created website. Simply tell Gemini that you didnt get the result you expected, and make sure you provide the result by simply copying it from your newly created website.

Gemini suggested a fix and I took it. This time it failed again. The result was the same.

Since I used to be a software engineer, I know this can be tricky if you have’nt seen the structure of the request output. In this case it’s a json file.

The structure is avilable at the API manual pages, I provided the structure to Gemini to try to help

Gemini understood and right away started to crunch another way of displaying the data.

What i particularily like here, is that it also provides an explanation of what it is trying to do. Both in the code and in the ouput seen on the screenshot above.

Ok, lets try this revised version!

It worked! We now have the data from the API displayed on our website.

Limitations

Current AI capabilities have limitations. For instance, in this example, Gemini couldn’t directly access and analyze the website output to automatically adjust its code. However, this is an area of ongoing development, and the future holds promise for even more seamless AI integration.

Beyond the basics

The website created here serves as a starting point. It lacks styling and functionalities like displaying data for all zones (SE1-4) and calculating price differences. This is where you and the AI can collaborate to create a more comprehensive solution!

Conclusion

This blog post demonstrates the potential of AI in bridging the gap between APIs and everyday users. With clear constraints and iterative collaboration, even those with limited coding experience can leverage the power of APIs. As AI capabilities continue to evolve, I am sure the process will become even more accessible and intuitive.