Vibe Coding a Full Stack App with Magic

A couple of days ago I asked Lovable for some free tokens to use when creating YouTube videos. I wanted to create backends with Magic and frontends with Lovable, while creating YouTube videos. Since they never answered me, I decided I had to create my own frontend vibe coding features into Magic.

I added some AI functions to our vibe coding AI agent for frontend development. I spent a couple of hours in total, and below you can see the result. In this video I start out with only a database. Then I generate CRUD backend API endpoints, before I ask my vibe coding component to wrap it into an HTML frontend. The whole process is done with one single prompt, and no iterations.

The result contains several bugs, but it's actually working surprisingly well out of the box. Most things works, or at least partially, and it's a fairly complex SPA requiring authentication before accessing CRUD endpoints, with multiple entities. Below is a screenshot.

Screenshot of CRUD app

My prompt

You can find my prompt below. The prompt is fairly generic in nature, and you can probably change it to accommodate any database you have, as long as the OpenAPI specification doesn't overflow your model's context window.

I want you to create a kick ass frontend with a dark orange base color, that forces the user to authenticate using username and password, using the following OpenAPI spec:

{
  "openapi": "3.1.0",
  "info": {
    "title": "AINIRO.IO Magic Cloud Cloudlet",
    "description": "AINIRO Magic Cloud API",
    "version": "v21.0.13"
  },
  "servers": [
    {
      "url": "https://CLOUDLET_BASE_URL.us.ainiro.io"
    }
  ],
  "paths": {
    "/magic/system/auth/authenticate": {
      "get": {
        "operationId": "get_auth_authenticate",
        "description": "Authenticates a user returning a JWT token if successful.\r\n\r\nNotice, if Magic is not already setup, implying the auth secret is less than 50\r\ncharacters in length, then the default username and password is root/root and is\r\nhard coded.\r\n\r\nThe JWT token returned will contain the roles the user belong",
        "parameters": [
          {
            "name": "username",
            "in": "query",
            "schema": {
              "type": "string"
            }
          },
          {
            "name": "password",
            "in": "query",
            "schema": {
              "type": "string"
            }
          }
        ]
      }
    }
  }
}

This endpoint returns a JWT token as "ticket". Use it as a Bearer token in consecutive HTTP requests

Then once the user has logged in, it will allow the user to select any one of the primary entities from the OpenAPI specification for the "chinook" module to retrieve and edit/manage items. Retrieve the OpenAPI specification for the chinook module using your "get-openapi-spec" function to understand how to assemble the frontend.

Save it as a single HTML file named "chinook-artists.html", and return the URL to it as Markdown when done. Don't show me the HTML, just save it as is.

Notice, when sorting/ordering items by a specific column, then add only the column name as the query parameter's value. Allow me to edit individual items using a modal dialog which allows me to edit the primary text items of entities. Also allow me to create new items (don't expect a primary key, it's auto generated), and allow me to delete items.

When retrieving albums you HAVE to pass in the JWT token as a Bearer token that you previously fetched during authentication. Notice, the actual JWT token is returned from the authenticate endpoint as "ticket".

Add some nice effects and animations, and add filtering on primary columns from table. If the user is filtering, then add one % character at the end of the query before invoking the server to ensure SQL LIKE functionality. Add paging with "previous" and "next" buttons.

Create a CSS file named "main.css" that you link to which contains all CSS, and put all JavaScript in a "app.js" file. ALWAYS use absolute URLs based upon the cloudlet's backend URL. Make sure you apply small margins on all forms to avoid a cluttered UI.

To avoid stale CDN items, make sure you add some random gibberish QUERY parameter to the JavaScript and CSS inclusion elements. Make the login form small and centered on the screen.