Blog

After my first post on this topic (vibe coding as it is called now) some time went by and the tools got a little better. So time for give it another challenge that is beyond create a landingpage for my AI consultancy.

The project I want to create is a multi agent research system that can create deep research and analysis like many AI chats and agents today are capable. I wanted to do the entire project in javascript and research the libary langchain.js before as the most capable for this tasks to fulfill.

Before starting I create a product plan of my actual solution and from that a prompt to feed into the different AI powered coding tools. This time I use again some of the popular web based coding assistants like bolt.new, v0 and lovable and as well local tools like Cline and Cursor.

The prompt

# Multi-Agent Research Assistant Development Task

You are an expert AI engineer tasked with building a multi-agent research assistant using LangChain.js, TypeScript, and Next.js. Your guidance is needed to create a complete, production-ready system that coordinates multiple AI agents to answer complex research questions.

## System Architecture

Create a research assistant with these specialized agents:
1. ResearchAgent - Searches the web for relevant information on the query
2. SummarizerAgent - Condenses and structures retrieved information
3. FactCheckerAgent - Verifies information accuracy through secondary searches
4. SynthesizerAgent - Compiles verified information into a comprehensive answer with citations

## Technical Requirements

- Use TypeScript throughout the project
- Implement LangChain.js Runnables API for each agent's logic
- Connect to OpenAI models via LangChain wrappers
- Utilize SerpAPI for web searching capabilities
- Create a shared memory system for inter-agent communication
- Implement a clean, modular architecture with appropriately separated concerns
- Build both backend logic and frontend interface using Next.js
- Use shadcn/UI components with a dark-themed AI aesthetic
- Document code thoroughly with JSDoc comments explaining agent functions

## Development Sequence

1. First create the SharedMemory class for maintaining state between agents
2. Implement each agent in order: Research → Summarizer → FactChecker → Synthesizer
3. Create a coordinator function that orchestrates the agent workflow
4. Build the Next.js API endpoint to expose the research pipeline
5. Develop a responsive frontend that displays the research process and results

## Implementation Details

For the SharedMemory system:
- Create a TypeScript class with appropriate interfaces
- Include methods for reading/writing different data types
- Implement persistent storage if needed

For each agent:
- Define a clear input/output contract
- Handle error cases gracefully
- Add detailed logging for debugging
- Include unit tests for critical functions

For the frontend:
- Create a search input with submission handling
- Display current research progress status
- Show final results with expandable source details
- Implement a clean, responsive design

## API Structure

Implement a `/api/research` endpoint that:
- Accepts POST requests with a query string
- Returns progressive updates if possible
- Provides a final result object with the answer and supporting data

Please start by implementing the SharedMemory system, then each agent in sequence. Show each implementation completely before moving to the next component.

bolt.new

bolt.new is recently really pissing me off being super buggy, losing code checkpoints and other fancy tricks, like splitting up the tasks into multiple steps so more tokens get spend. Anyhow this is the solution it came up with:

Looks not super sleek but OK. The AI implemented all the components like shared memory, the agents and the frontend but however did not connect frontend with backend properly and only sent back mockup texts. After telling the AI doing so it updated the code and ended up in an endless loop of errors and fixing them. So the code is not usable. This time and it was also in the prompt the AI didn’t try to expose my API keys to the public website and was using a .env file.

v0

I used to work a lot with v0 lately and really created some good working applications with is so I was quite confident that it will also take this challenge. But very soon I will get disappointed. The first version I completely dumped cause the AI was not able to separate properly frontend from backend code and produced a complete mess. The second attempt did a little better and at least outputted a working frontend:

But also here the same problems that the AI can’t keep an overview of the own code and mixes path, backend code, frontend code that I never got a working solution form this approach as well. I gave it a 3rd try but the solution was again not working at and had again massive problems connecting frontend and backend code bases. This time also the implemented .env could not be readed properly.

So overall I am very disappointed of what v0 was able to (not) deliver this time.

lovable

lovable recently release its version 2 and is very hyped at the moment for being the best among the web based coding tools. I was not using before that often and most of the time for template/frontend tasks. The AI had really hard time bringing a version 1 to the screen and had around 5+ loops where fixing its own mistakes. So I really spent some time until I could see something:

The design looks very nice and follows my prompt inputs. Also there the AI built all the code with agents etc. but did not connect frontend and backend initially. After telling it to do so it tried to do. Here comes a bummer from lovable: editing files in the editor is only possible if you sync the project to a github repository. I cannot understand why this is mandatory, but after doing so it still didn’t let me edit my .env file. So I did this via a commit from github. This is super annoying but works at the end. After some back and force with the serpapi I got to a working solution finally. Here is the working result:

VScode + Cline

New around the corner and also really popular right now is the vscode extension cline. It is an open source solution and can work with any of the popular AI models through their API. So it is more tricky to set up at first then most of the web based tools. Most people now use is with Google’s gemini pro 2.5 version which offers a proper free API call tier (claim it here). The downturn is that the daily limit of 25 calls and the input context window/day of 1 Mio tokens is done quite soon cause cline send API calls non stop. This is really a very annoying fact as it is absolutely not necessary and no other comparable solution does it that way. So it took my several days only using the free tier API contingent to get so something visible. Cline also had problems with packages, using it the right way and had long work back on forth on getting a simple frontend running.

As you can see it return 0 results as it somehow uses the SERPAPI for web research in a wrong way. After some manual fixing in the css, after Cline was not able to bring the css styling to life, I finally managed to let the interface look like this (still not working properly):

Cursor

I tend to use Cursor a lot for day to day smaller tasks but has experience already my problems when things get more complicated. In direct comparison to Cline the AI works a lot more smother and faster just hammering out the needed files in light-speed. It only took around 3-4 minutes until I got a first version. I had some problems then with packages and namings but got from this tool the fastet working solution. Plus it only cost me 2 (!!!!) premium Cursor request to do this (with cline I needed around 8,5Mio outbound tokens!!!). The output is not the most beautiful and some parts of the info are missing (sources), but it is working and was super fast to create:

The results

• v0: failed
• bolt.new: failed
• lovable: success
• Cline: semi failed
• Cursor: success

To summarize this little experiment: I am super disappointed what v0 and bolt.new produced, which was after investing some time and tokens far far away from a working solution. Lovable really leveled up their game and after some quirks it produces the most fancy looking working solution among all tools. Cline is OKisch to use and I would assume if I would have spent more time to fixing the last issues, I would have also get a working solution from that tool. Clear winner for me is Cursor this time as it was super fast, cheap and was able to produce a working solution with the least effort on my side.

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.