DEV Community

Jimmy
Jimmy

Posted on

Teaching AI to Blog: My Journey into Agentic AI Development — Part 2

In Part 1 of this series, I demonstrated how to build an agentic AI flow where multiple agent and tool nodes are connected using LangGraph. Now that the pipeline is ready and the prompts are set up, let’s see it in action.

To better showcase results that include both text and images, we’ll create an elegant graphical user interface using Streamlit. Streamlit is fantastic for building Python data apps — especially for backend developers like me who aren’t as comfortable with frontend work — making it ideal for this simple AI application.

I’ll skip the details of the Streamlit code here, but you can find everything in my GitHub project. Here’s what the final application’s UI will look like:

The left pane serves as the configuration section. Here, you’ll find switches to enable debugging and logging, as well as settings for the number of retries and the timeout value when calling the remote LLM API (in this case, Azure OpenAI). There’s also an option to enable image generation, which triggers calls to the DALL-E 3 API.

The most important feature is the Editor Style dropdown, which lets you choose the prompt file that will be loaded for final editing:

With the General style, the draft article will receive only minimal editing. For the other styles, as their names suggest, the article will be significantly enhanced according to the specific style defined in each prompt setup.

As a handy feature, the Show Workflow Graph button displays a flow diagram of the graph configuration, using the Mermaid code mentioned in the previous article. This provides an easy way to verify that the graph is set up correctly:

Alright, let’s give it a try! How about writing a blog post on street photography with a 35mm fixed lens? I absolutely love street photography, and the 35mm prime lens has always been my favorite. If I had to choose just one lens to keep, it would definitely be the 35mm — ideally with an f/1.4 aperture.

Let’s start with the General editing style and click the Generate Blogpost button:

While building the graph, I enabled logging of critical information using the logger object. From the console output, I can see the following:

This is a good sign — it indicates that a tool_calls message was detected when running the conditional edge from the research LLM, and that the Tavily web search tool was indeed used.

Next, I also noticed that the image tool node was triggered successfully — the editor node made an API call to the DALL-E 3 endpoint using the prompts defined for the General editing style.

Finally, the editor returned the polished article successfully — everything is working seamlessly!

But what exactly is being returned by the different agents? Let’s start by taking a look at the output from the research agent:

Here’s just a portion of the research summary — the full result is much longer. The Tavily search returned a comprehensive list of information about street photography with a 35mm lens, including source links. Great job!

Next, let’s look at the drafted article generated by the write agent. Here are the first two sections:

Not bad for a draft, though it’s still a bit basic. So, how does the final polished article look after applying the General editing style?

I have to admit, the difference isn’t very significant (section headings even are not changed). That’s because the prompt for the General editing style doesn’t favor any particular tone — it just makes minor adjustments to the draft.

So, how about the images that were generated?

I’d say the images are quite standard — not particularly impressive. But that’s understandable, since the style description for the General editing style is fairly ordinary:

When generating images:
- Use the generate_article_image tool with detailed, descriptive prompts that DALL-E 3 can understand
- Write clear, specific prompts that describe exactly what you want to see in the image
- Include details about composition, lighting, colors, and mood when relevant
- Specify an appropriate style based on the editor style:

  a. CRITICAL STYLE: Use "photorealistic documentary photography" style
     - Request: "Shot with professional camera, journalistic photography, high detail, natural lighting"
     - Example: "Photorealistic documentary photograph of [subject], professional journalism style, shot with DSLR camera, natural lighting, high detail, serious tone"

  b. EMOTIONAL STYLE: Use "artistic storybook illustration" style
     - Request: "Painted illustration, storybook art style, warm colors, emotional atmosphere"
     - Example: "Beautiful storybook illustration of [subject], painted art style, warm emotional colors, soft lighting, narrative atmosphere, reminiscent of children's book art"

  c. HILARIOUS STYLE: Use "3D animated cartoon" style
     - Request: "3D rendered cartoon, Pixar/Disney animation style, bright colors, exaggerated features"
     - Example: "Adorable 3D cartoon illustration of [subject], Pixar animation style, bright vibrant colors, cute characters with big eyes, playful atmosphere, high quality render"

  d. GENERAL STYLE: Use "professional digital illustration" style
     - Request: "Clean digital illustration, modern design, balanced colors"
     - Example: "Professional digital illustration of [subject], clean modern style, clear details, balanced color palette, informative design"

Enter fullscreen mode Exit fullscreen mode

But what if I try using the Emotional style instead? I have to say, I was quite amused when I saw the final article:

The tone immediately becomes much more emotional and empathetic, presenting the topic as a story — yet it still focuses on street photography with a 35mm lens. This shift is exactly what I expected, given that the prompt for the Emotional editor is as follows:

Editor Style: EMOTIONAL

You are a deeply emotional and empathetic blog editor who writes with passion and heart. Your task is to revise the provided article into an emotionally resonant blog post that feels like a short story or novel, weaving the article’s topic and details into a compelling narrative. Storytelling is central to your approach, and the story’s theme (e.g., romance, family, friendship, or another fitting emotional narrative) should align with the article’s original topic to create a heartfelt connection.

Instructions:
- Transform the article into a blog post that reads like a short story or novel, immersing the topic’s details into the narrative to make them relatable and engaging.
- Choose a story theme (e.g., romance, family, friendship) that complements the article’s topic, ensuring the narrative feels authentic and emotionally compelling.
- Infuse emotional depth, heartfelt connections, and personal reflections to evoke empathy and make readers feel deeply connected to the topic.
- Use warm, caring language that touches the heart and maintains emotional resonance throughout.
- Ensure the narrative flows smoothly, with vivid descriptions, relatable characters, and emotional insights that enhance the storytelling.
- Break up long paragraphs for readability and use emotional headings or subheadings to guide the reader through the story.
- Correct any grammar, spelling, or stylistic errors from the original draft.
- Seamlessly integrate the article’s key facts, findings, or insights into the story, ensuring they feel natural within the narrative.
- Maintain a tone that is warm, empathetic, and emotionally engaging, drawing readers into the story and the topic.
- If the original article includes an image or image-related instructions, incorporate a description of a relevant, evocative image (e.g., “Picture a weathered photograph of a family gathered around a table”) within the narrative, but do not generate or retrieve actual images unless explicitly requested.

Here is the article to edit:

{article_draft}

Return the emotionally enhanced blog post only.

Enter fullscreen mode Exit fullscreen mode

What about the images that were generated?

The images do follow my instructions — painted illustration, storybook art style, warm colors, emotional atmosphere — though aesthetically, they’re not quite to my taste.

Let’s give it another try. How about using the Hilarious style?

Well, whether it’s truly hilarious is up for debate, but the tone is definitely lighter and more humorous (at least the LLM made an effort!).

However, the accompanying images are actually quite fitting to what I expected:

Can I do better?

This little project took up my leisure time over the course of three days. While it’s just an ordinary application, I thoroughly enjoyed the learning process, and I am ready to step up for further challenges.

But could it be improved? Looking back at the final results, there are definitely some areas that could be optimized.

  • Currently, the edit agent uses a combined prompt for both document editing and image generation, along with instructions to embed image URLs into the output. I noticed that the LLM sometimes fails to embed the URLs correctly, even though the system logs confirm the images are generated and the URLs are returned. Separating the document formatting from the editor agent’s prompt would likely simplify things and make the process more reliable.

  • Additionally, more contextual information about the final article should be included when generating image prompts. Right now, the prompt is based only on the editor style and blog post topic. This works for the General editing style, but when using the Emotional style — which turns the article into a story — the images often don’t align well with the narrative context.

Time for some fun upgrades!

So is that all? Not even close! Instead of coming up with topics myself, why not let the AI search for and suggest topics to write about? I’ll cover this in next article.

( source code: https://github.com/jimmyhott/MARAGS/tree/ver-1.2 )

Top comments (1)

Collapse
 
trojanmocx profile image
ALI

This is an incredible deep dive into agentic AI and LangGraph! I love how you combined multiple agents, LLMs, and image generation with a clean Streamlit interface—it really showcases the practical power of agentic pipelines. The ability to switch editor styles like Emotional or Hilarious is such a creative touch, and I appreciate the detailed walkthrough showing how each agent contributes to the final output. Definitely inspiring for anyone looking to build multi-agent AI applications!