Blog

If you involved in AI you probable stumbled upon big promises that everyone can now create its own SaaS business with not even knowing how to write a single line of code. The tools that should make this promise come true are integrated online developments environments (that have been existing before the big generative AI wave) supercharged now with AI code generation powers. The big difference to github copilot, cursor or windsurf is that those tools run a complete node based dev environment on their servers that you can easily access through a web interface and place your code project there.

The currently most popular player in this field are:

• https://v0.dev
• https://lovable.dev/
• https://bolt.new/
• https://replit.com/

How do they work…

The layout and base functions of the tools are very similar: you have a chat window to communicated with the AI agent and another set of windows to monitor the code and the rendered output of it. So far I see it all of them use a node.js tech stack with different frameworks put on top of it. Here are some screen shots of the main interfaces from replit, v0 and bolt.new:

From the first impression v0 and replit seem to be more sophisticated in terms of the UI and also the functionality. But lets bring them all to a simple test…

A simple project to test the capabilities of the tools

For my consulting business I created an openAI assistant that helps my client to deal and analyze marketing trends. Now I wanted a simple web interface that queries the assistant via the openAI API and give the answer in a simple chat interface back. So this is really not a big deal I had thought but I spent hours and (spoiler alert) not one tool was able to complete the task.

The start was indeed quite promising as I got a first app scaffolding back from each tool when prompting my demand:

create a interface for the openai assistant api. the user can send messages to a defined assistant and it answers. the conversation between user and assistant should be visualized like in typical ai applications. the user can create variuous chat threads that are then stored and visualized in the sidebar. also add authentication for the user using superbase functions.

When we speak about UI and the looks, here v0 clearly wins as it creates the best looking interface. All of the tools rely on tailwind.css.

Problems, problems, problems

I connected a simple supabase database for simple user authentication and persistent features and then the problems started: v0 was not able to remember its own proposed database schema and made from that point ongoing mistakes with wrong columns names etc.

All of the tools exposed my openAI API to the frontend in a first version. I needed to explicit tell it to use a server proxy for the API requests and not store the key in frontend code. This is quite annoying and can be also dangerous for a tech newbie. Luckily openAI itself blocks those request by default.

What do I to here? It seems like v0 is not aware what its own capabilities are and asks the user to install some packages via npm.

In the end I spent around 2h and 10+ revisions with the task on each tool and try to get it working. But: none of it even got somewhere close to the end. I repeat: NONE. None of it was able to correctly query the openAI assistant API to even submit the user request. This is really a bummer and to prove the semi talented non dev people can do it better I coded the needed piece myself in a 200line of code PHP script that works just fine.

My recap

So to sum up, my first impression of those magical tools is disillusioned as they just don’t deliver. I don’t know if my test example was so complicated but I think it was definitely not. A solution in just a few lines of old school scripting language brought me further as investing my time in those hyped tools. Although I see already a lot of those micro SaaS popping up that surely have been mostly created by non dev people with those tools.

[Update 26.02.]

I decided to take a 2nd attempt in trying to get my project with one of the AI code generators to work. This time I took my working php script as a base and just asked the AI to rewrite it. Here is the prompt I gave to v0:

i wrote a simple php script to query the openai assistant api. take the code as base and create a new project in node/nextjs doing the same functionality. create a server and a frontend part. do not save the api keys in frontend code but use a server code to query the api. reuse the logic in the process.php for the server code and rewrite in in js/ts

implement a new color scheme based on your standard colors

As you can see I explicit asked to write frontend and backend code separated which was this time also well performed. My openAI were not exposed in public like the first try as well. After 3 revision I got a working solution. This is a big surprise to be honest as with my first approach I just stopped completely pissed at revision 20+.

This is a collection of my so far best result images I used to create using GenAI tools. Most of the examples you will see below have been created using Dall-E or Flux. I also included the prompt, so that you can copy the image if you would like to re-create them.

Create an image of a figure wearing a dark, gothic costume with significant, stylistic elements. The figure's face is painted to resemble a skull, with deep black eye sockets and a white base, while the lips appear smudged. The most striking features are the large, curled ram horns on top of the head, adorned with an elaborate chain headpiece that drapes over the forehead and sides. Chains, varying in size and style, hang around the neck creating layers. The costume includes 

A hyper-realistic and detailed 3D render in 8K resolution. The scene depicts a massive moon dominating the left side of the frame, casting a dramatic glow. The ground is covered with thick smoke and raging fires, creating a sense of chaos and destruction. At the center-top of the frame, a futuristic satellite hovers in space, emitting a powerful laser beam aimed at the ground below. The atmosphere is dark and apocalyptic, with intricate textures and dynamic lighting. The composition is in a cinematic 9:16 aspect ratio

A fierce Viking warrior in a battle ready pose, holding his sword aloft with intense focus. His face is twisted in a fierce expression, beads of sweat and spit at the corners of his mouth. He wears rugged fur clothing, with wild, untamed hair and a thick beard. The surrounding environment is harsh, with dark clouds swirling above, crashing waves, and jagged rocks in the distance. Dust and mist fill the air, enhancing the atmosphere of tension and ferocity. His posture is powerful and tense, ready for the coming battle

A menacing figure of Krampus, depicted with long, twisted horns and a grotesque, demonic face. His body is covered in dark, shaggy fur, and he has one human foot and one cloven hoof. Krampus carries chains and birch rods, symbolizing his role in punishing naughty children. The background is a creepy, wintery landscape, with snow-covered trees and a dark, ominous sky. The overall atmosphere is eerie and foreboding, capturing the essence of this mythical creature.

A massive great white shark with its jaws wide open, and hanging from its terrifying teeth is a wooden sign. The sign reads, 'If you can read this, it's too late' in bold, weathered letters, giving a chilling sense of impending doom. The murky water surrounds the shark, with dark, shadowy figures lurking just below the surface, amplifying the tension. The shark’s massive mouth is poised to close, and the sign adds a sense of finality and danger

A comet impact on Earth, viewed from the ground. T-Rex in the immediate foreground and a pterosaur crashing down. More dramatic cinema action. Dramatic sky in deep orange and red. Impact creates an exploding fireball. Massive shockwave. Trees uprooted. Debris flying. Huge plume of smoke and dust. Ground shaking violently. Sparks and glowing debris flying in all directions. Intense and majestic. 

A fort gt,  blue with aluminum wheels, Carbon fiber rear wings. Dynamic curves and aggressive stance feature intricate aerodynamic details. The car is positioned in perspective, highlighting sculpted lines and jewel-like headlights. Floating around it, precise sketches show the design process, with annotations and measurements. Against pristine white background, subtle color accent the logo, grille

Create an image of a bas-relief featuring two figures, one demonic and one angelic, symbolizing the contrast between good and evil. The demonic figure is on the left and has striking red and black tones. The skin is dark red and adorned with intricate black markings that suggest sinuous scales or armor. This figure's wings rise dramatically, feathers detailed and dark, matching the horns that curl from his forehead. 

RAW hyper-realistic photo, post-apocalyptic urban street at sunset. A large sunset and a slight red cloudy sun below it, above the view. The road was flooded. Abandoned buildings lined the streets, and power lines stretched overhead, adding to the atmosphere of silence. Debris floats on the surface of the water, hinting at the turmoil of the past. Despite the destruction, there is a haunting beauty of how nature reclaims this urban environment under a dramatic sunset. UHD

"A dark, medieval castle set atop a rugged cliff, surrounded by a gloomy and misty atmosphere. The castle has multiple tall spires and intricate gothic architecture. A winding, narrow stone pathway leads up to the entrance, with moss-covered stones and overgrown roots on the sides. A tall waterfall cascades dramatically down the cliff beside the castle, merging with the fog and mist in the background. 

Create; "Detailed black and white pencil drawing illustration of a fierce mid-race Spartan warrior, wearing a traditional Greek helmet with a plume, carrying a large round shield and a sword. His muscular build and flowing cape are visible, and his armor includes protective arm and leg gear The background is minimal, with dust and energy trails emphasizing his powerful movement. The style is highly detailed, strongly contrasting the intensity and power of an ancient warrior.

Create a moody, high-contrast black-and-white illustration of a man sitting alone in a dimly lit room. The setting should feature venetian blinds casting sharp, striped shadows across his face and body, highlighting his silhouette against the darkness. Position the man seated in a leather armchair, with a contemplative pose, partially obscured by shadow. The scene should evoke a film noir atmosphere with strong, dramatic lighting that accentuates the blinds and adds depth to the scene

A realistic, detailed, and accurate HDR 3D render of an ancient ocean ecosystem. The main subject of the image is the seafloor, where Dickinsonia is visible. Anomalocaris is seen hunting nearby, while other small primitive marine life forms are visible in the background. The image is slightly hazy, with dim sunlight filtering through, creating an eerie, ancient atmosphere.

A very next step when playing around with generative AI tools, is to make a video from a given image. In my case I wanted to animate the above image of mysself (AI generated with Flux/LoRA) in a natural way to make me speak out.

My first try out where with RunwayML – unfortunately only Model #2, not the newer version 3. The results are not the great: the movement is not natural mostly weird and also the transition in the face (morphing) looks rather spooky. So this first try was failure.

Try #2 with minimax video

A very new image2video model is minimax. You can easy access it via fal.ai. The prompt was very simply, just instruct to make me speak out and show some natural gestures. The output is way better then the one from RunwayML. It looks smoother and more natural. I wouldn’t say it is truely realistic but it must be around 90% acurate.

In the previous post I explained how to train Flux/LoRA to create images of yourself. This is a quite straightforward process and after that we can create via prompts the images we want to. In my case I did my first try outs with some business portraits for myself. The results a good, sometimes a bit to blurry and smoothened out. But there is an issue that the Flux AI tends to add you at least a 2nd time into the picture if you place yourself into a typical scenery with more then just 1 person. I also found a simple solution to overcome this. Here are my example prompts and the outcomes:

Professional business portrait of erich wearing a dark grey suite, sitting confidently at a modern office desk. Background shows a contemporary office with glass windows and city views. Well-lit with soft, natural light, highlighting a friendly, approachable smile, wearing a formal suit.

Professional business portrait of erich, standing in a modern office meeting room with a table and screen in the background. Wearing business attire with a confident, relaxed posture, arms crossed and smiling warmly. Soft, professional lighting enhances a welcoming expression.

Professional portrait of erich, seated behind a modern executive desk, surrounded by minimalistic office decor like a laptop, notebook, and pen holder. Well-lit room with large windows and subtle artwork in the background. Dressed in a formal suit or business casual, with a focused, thoughtful expression.

Professional yet relaxed business portrait of erich, standing in a collaborative office space with colleagues visible in the background, blurred slightly. Wearing business casual attire, arms relaxed, with a warm, approachable expression. Modern office setting with plants and glass walls, lit with natural light.

Here we have the case, that I have been put a 2nd time into the picture.

Professional business portrait of erich, caught in a natural conversation with a colleague in a modern office lounge area. Wearing business attire, seated on a stylish office sofa with hands gesturing slightly as if explaining something. Background features office decor with plants, well-lit with ambient lighting.

How to overcome the multiple images of yourself in scenes

This is actually quite simple, you just need to tell the AI via prompt that only one person is yourself and the others should be given random faces:

erich is sitting in a high class restaurant and having dinner with a lovely woman wearing an elegant black dress. erich is smiling into the camera. he is wearing smart casual clothings. in the background we see the typical scenery of a restaurant with tables, people etc. only the person sitting on the table with the woman is erich. add random faces to all the others

And after the prompt piece added:

The first AI apps on the mobile I remember were some fun apps creating from an given image of you, different scenario pictures like a funny background. The makers charged quite some money for like 5 custom images. However with Flux LoRA there is a even better outcome for less money possible.

Flux is the image generator model by German AI company Black-Forest-Labs and is at the moment the hottest and best image generator for photo realistic images. The image generator itself can be easily for free on their website.

To achieve custom pictures of us we need to go a step further and train the model. This is not complicated and cost only 2$. I use the AI workspace fal.ai for this where you can work with many different model – and also Flux and Flux SoRA.

Step 1: train the model

Go to: https://fal.ai/models/fal-ai/flux-lora-fast-training

You will see the form pictured above. Add face shots, selfies, close up pictures of you into the uploader. I used about 25 pictures of me. Then select a “Trigger Word” – to reference the training data in your future prompt. I simply use my name “Erich” as the trigger word. Then let the training start – it will last around 1 minute to finish.

Step 2: Run the model with your trigger word

To create an image prompt based on the trained data with the Flux SoRA model simply klick on the Run button of the training form:

Or you can also directly chose the model prompt interface: https://fal.ai/models/fal-ai/flux-lora/playground

Enter your prompt referencing the “Trigger word” you have set before and let the magic happen. I generated some examples using very simple 1 line prompts:

The business picture is really great and it looks very much like me when in use in small scale. When getting closer you can see blurry areas somehow. The 2nd picture was to put me to Oktoberfest with interesting result being put twice into the picture 🙂 The black t-shirt and the yellow backbag is actually taken from one of my training pictures. Overall I am quite happy with the outcomes and with some more detailed prompts, you definitely will get even better results. Total costs ~2$.

Advanced prompt examples

Here are some more examples I generated today with a more advanced promoting:

erich is captured mid-speech.  His expressive face, adorned with a salt-and-pepper beard and mustache, is animated as he gestures with his left hand. He is holding a black microphone in his right hand, speaking passionately. The man is wearing a dark, textured shirt with unique, slightly shimmering patterns, and a green lanyard with multiple badges and logos hanging around his neck. The lanyard features the "Autodesk" and "V-Ray" logos prominently. Behind him, there is a blurred background with a white banner containing logos and text, indicating a professional or conference setting. The overall scene is vibrant and dynamic, capturing the energy of a live presentation. 

Disclaimer: This is a new version of my RSS Feed Turorial from 2008, as it still gets a decent amount of traffic from Google. Hope it still helps 15 years later.

Einen RSS Feed kann man kinderleicht für seine dynamische Website, zum Beispiel ein News Script, erstellen. Dafür ist nur die Kenntnis vom Aufbau einer RSS Datei plus eine einfache Datenbankabfrage notwendig. Hier wird gezeigt wie man einen solchen dynamische generierten RSS Feed manuell zusammenstellt.

Einleitung

Als Vorwissen für dieses Tutorial benötigt man Kenntnisse in php und mysql. Ziel ist es ein kleines php Script zu schreiben, das auf Basis von Daten aus einer mysql o.ä. Datenbank dynamisch einen RSS Feed generiert.

Zuerst muss man sich entscheiden auf welchen RSS Standard man zurück greifen will. Es gibt diverse Standards, die man auch gängig bei anderen Seiten finden kann – zB. RSS0.91, RSS1.0 und RSS2.0 (mehr dazu hier). Wir werden in diesem Tutorial einen RSS2.0 Feed erstellen.

Dokument Definition

Als erstes erstellen wir in einem Editor eine leere Datei und fügen folgenden Header Code in die ersten Zeilen ein:

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<rss version="2.0"> 
<channel> 

Hier wird erstmal definiert um was für ein Dokument es sich hier eigentlich handelt bzw. die XML DTD dazu bestimmt. Die Tags “<rss>” und ” <channel>” sind die Basis Element eines RSS Feeds. Da wir einen Dynamischen RSS Feed haben wollen und die erstellende Datei eine php Script beinhaltet, muss die erste Zeile, die XML Definition, mit einem echo ausgegeben werden, da sonst der php Interpretor auf das “?” mit einem Parse Error reagiert.

<?xml version="1.0" encoding="ISO-8859-1" ?>" 

Weiters muss hier dem Browser der content type mitgeteilt werden, da dieser sonst den Inhalt als Html und icht als xml ausgibt. Die ganze veränderte Zeile sieht dann wie folgt aus:

<?php header("Content-type: text/xml"); 
echo "<?xml version="1.0" encoding="ISO-8859-1" ?>"; ?>

Meta Daten

Nachdem wir nun die Stammelemente plus die xml Definition erstellt haben machen wir uns an die Meta Daten des Feeds. Die sehen bei RSS2.0 folgendermaßen aussehen und sind meistens statisch. Die Elemente hier sind selbsterklärend. Beim Tag “lastBuildDate” könnte man zum Beispiel mit <?php $now = time(); echo $now; ?> zur Script Laufzeit das aktuelle Datum einsetzen.

<title>Website name</title>
<link>http://www.beispiel.de</link>
<description>Beschreibung von Website</description>
<language>de-de</language>
<pubDate>Datum der Erstellung</pubDate>
<lastBuildDate>Datum des letzten Outputs, in vielen Fällen die Ausführzeit des Scriptes</lastBuildDate>
<docs>http://www.beispiel.to/rss.php</docs>
<generator>Rss Feed Engine</generator>
<managingEditor>info@beispiel.de</managingEditor>
<webMaster>info@beispiel.de</webMaster>

Elemente

Nun da die Meta Elemente ausgefüllt sind ist der nächste Schritt die einzelnen News Elemente des z.B. News Scipts in RSS konforme Daten zu konvertieren. Die Struktur eines Items sieht dabei so aus. Ein Feed kann beliebig viele Items beinhalten aber es macht Sinn diese auf ca. 10-20 Elemente zu beschränken.

<item>
<title>Beispiel Titel</title>
<link>http://www.beispiel.de/link</link>
<description>Beispiel Beschreibung, Text, Bilder etc. Die Description kann auch einen Excerpt (Auszug) des vollen Beitragtextes enthalten.</description>
<pubDate>Datum der Veröffentlichung des Beitrags</pubDate>
<guid>http://www.beispiel.de/link</guid>
</item>

Dieses Template eines Items füllen wir nun mittels einer Datenbank Abfrage o.ä. mit Daten. Der dazu passende Code könnte z.B. so aussehen:

<?php require('mysql_connect.php'); 
$SqlSelect = "SELECT link, pic, titel, text FROM news LIMIT 0,20"; 
$result = mysql_query($SqlSelect); 
if (!$result) { die('Invalid query: ' . mysql_error()); } 

while ($row = mysql_fetch_assoc($result)) { ?> 
<item> 
<title><?php echo $row['titel']; ?></title> 
<link> <?php echo $row['link']; ?> </link> 
<pubDate> Wenn vorhanden Timestamp des Beitrages, ansonst einfach weg lassen </pubDate> 
<description> <?php echo "<img src=\"".$row['pic']."\"></img></a>"; ?> <?php echo $row['text']; ?> </description> 
</item> <?php } 
mysql_free_result($result); 
mysql_close($dbh); 
?>

Zum Schluss schließen wir noch die beiden Stammelemente channel und rss am Ende des Dokumentes.

</channel>
</rss>

Um jetzt den erstellten Dynamischen RSS Feed auf der Hauptseite einzufügen und ihn für die Browser erkennbar zu machen, muss man foolgende Zeile in den Kopf der Hauptseite schreiben:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.beispiel.de/rss.php" />

Hier die fertigen Datei:

<?php header("Content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>"; ?>
<rss version="2.0">
<channel> 
	<title>Website name</title>
	<link>http://www.beispiel.de</link>
	<description>Beschreibung von Website</description>
	<language>de-de</language>
	<pubDate>Datum der Erstellung</pubDate>
	<lastBuildDate>Datum des letzten Outputs, in vielen Fällen die Ausführzeit des Scriptes</lastBuildDate>
	<docs>http://www.beispiel.to/rss.php</docs>
	<generator>Rss Feed Engine</generator>
	<managingEditor>info@beispiel.de</managingEditor>
	<webMaster>info@beispiel.de</webMaster>

<?php
require('mysql_connect.php');

$SqlSelect = "SELECT link, pic, titel, text FROM news LIMIT 0,20";
	$result = mysql_query($SqlSelect);

	if (!$result)	{	    die('Invalid query: ' . mysql_error());	}
	
	while ($row = mysql_fetch_assoc($result))	{
	
?>
	<item>
	<title><?php echo $row['titel']; ?></title>	
	<link>
	<?php echo $row['link']; ?>
	</link>	
	<pubDate>
	Wenn vorhanden Timestamp des Beitrages, ansonst einfach weg lassen
	</pubDate>
	<description>
	<?php echo "<img src=\"".$row['pic']."\"></img></a>"; ?>
	<?php  echo $row['text']; ?>
	</description>
	</item>

<?php
	}
mysql_free_result($result);
mysql_close($dbh);
?>

</channel>
</rss>