<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Alex</title>
    <description>The latest articles on Forem by Alex (@alexcc522).</description>
    <link>https://forem.com/alexcc522</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1684630%2F11e73fe9-f240-442e-8dc2-00c24b72b2c8.jpeg</url>
      <title>Forem: Alex</title>
      <link>https://forem.com/alexcc522</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/alexcc522"/>
    <language>en</language>
    <item>
      <title>What's Actually Happening When AI "Enhances" a Video</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Wed, 13 May 2026 02:13:54 +0000</pubDate>
      <link>https://forem.com/alexcc522/whats-actually-happening-when-ai-enhances-a-video-137l</link>
      <guid>https://forem.com/alexcc522/whats-actually-happening-when-ai-enhances-a-video-137l</guid>
      <description>&lt;p&gt;AI video enhancement is one of those features that gets marketed with dramatic before/after clips and very little explanation of what's actually going on under the hood.&lt;/p&gt;

&lt;p&gt;This post covers the technical foundations — what models are doing, where they work well, and where they hit real limits.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem with Traditional Approaches
&lt;/h2&gt;

&lt;p&gt;Classical video processing tools (think FFmpeg filters, VirtualDub, early sharpening algorithms) work in pixel space with hand-crafted rules:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sharpen: increase contrast at detected edges using kernels like Laplacian or Unsharp Mask&lt;/li&gt;
&lt;li&gt;Denoise: average surrounding pixel values (Gaussian blur, median filter)&lt;/li&gt;
&lt;li&gt;Upscale: bicubic or bilinear interpolation — essentially weighted averaging of neighboring pixels&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These methods are fast and deterministic, but they have a fundamental ceiling: they have no model of what the content &lt;em&gt;should&lt;/em&gt; look like. A denoising filter doesn't know whether a patch of variation is film grain or fabric texture. A sharpening kernel doesn't know it's looking at a face versus a background. They apply the same operation everywhere.&lt;/p&gt;

&lt;p&gt;The results are predictable: over-sharpened halos, blurry textures, and that distinctive "processed" look.&lt;/p&gt;




&lt;h2&gt;
  
  
  How Deep Learning Changes the Approach
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.totalmedia.ai/video/enhance-online/editor" rel="noopener noreferrer"&gt;Modern AI enhancement&lt;/a&gt; uses convolutional neural networks (CNNs) and, more recently, transformer-based architectures trained on large datasets of paired low-quality/high-quality video frames.&lt;/p&gt;

&lt;p&gt;The model learns a mapping: given a degraded input patch, predict what the clean output should look like. During training, the network sees millions of examples of noise patterns, compression artifacts, blur, and color degradation — paired with their ground-truth clean versions.&lt;/p&gt;

&lt;p&gt;At inference time, the model isn't applying a rule. It's making a learned prediction based on context. That's why it can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Preserve texture while removing noise (it has learned what noise looks like versus texture)&lt;/li&gt;
&lt;li&gt;Reconstruct edges without halos (it knows edge context, not just gradient magnitude)&lt;/li&gt;
&lt;li&gt;Restore color without over-saturation (it has learned natural color distributions)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The practical upside: the output looks like better source footage, not like filtered footage.&lt;/p&gt;




&lt;h2&gt;
  
  
  Frame Interpolation: A Separate Problem
&lt;/h2&gt;

&lt;p&gt;Upscaling and denoising work on individual frames. Frame interpolation is a different challenge: synthesizing new frames between existing ones to increase frame rate.&lt;/p&gt;

&lt;p&gt;The naive approach (blending adjacent frames) produces ghosting artifacts wherever there's motion. The AI approach uses &lt;strong&gt;optical flow estimation&lt;/strong&gt; — computing the motion vectors between frames, then warping and blending source frames along the predicted motion path to generate the intermediate frame.&lt;/p&gt;

&lt;p&gt;More recent approaches use neural networks that jointly estimate motion and synthesize the intermediate frame end-to-end, producing cleaner results on complex motion like fast camera pans or object occlusion.&lt;/p&gt;

&lt;p&gt;The output: 24fps footage that plays at 60fps with synthesized intermediate frames, substantially reducing perceived choppiness.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Optical flow-based interpolation works well on predictable motion but can produce artifacts on very fast motion, motion blur, or scene cuts. Most tools detect cuts and skip interpolation at transitions.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Upscaling: What "4x" Actually Means
&lt;/h2&gt;

&lt;p&gt;Traditional 4x upscaling takes a 480p frame and produces a 1920×1080 frame by interpolating between known pixels. The output has the right dimensions but no additional real detail.&lt;/p&gt;

&lt;p&gt;AI super-resolution (SR) models — architectures like ESRGAN, Real-ESRGAN, or more recent diffusion-based SR models — don't just interpolate. They generate plausible high-frequency detail based on learned priors about natural images.&lt;/p&gt;

&lt;p&gt;A 4x AI upscale of a face doesn't just make the face bigger. It generates plausible detail for skin texture, eye detail, and hair that wasn't present in the source. Whether this is "real" detail is philosophically debatable — it's the model's best prediction, not a recovery of original information. In practice, for most viewers, the result looks substantially more natural than bicubic upscaling.&lt;/p&gt;

&lt;p&gt;The quality ceiling is largely determined by the source. AI SR works best when there's a coherent low-resolution signal to start from. Heavily over-compressed video with significant blocking artifacts gives the model a corrupted starting point — artifact removal typically runs as a pre-processing step before SR in production pipelines.&lt;/p&gt;




&lt;h2&gt;
  
  
  Where It Breaks Down
&lt;/h2&gt;

&lt;p&gt;Knowing the limits is as important as knowing the capabilities:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Condition&lt;/th&gt;
&lt;th&gt;Why It's Hard&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Severe motion blur&lt;/td&gt;
&lt;td&gt;Blur destroys spatial frequency information; deconvolution is ill-posed&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Heavy MPEG blocking&lt;/td&gt;
&lt;td&gt;Large blocks give the model very little signal to work from&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Scene cuts during interpolation&lt;/td&gt;
&lt;td&gt;Optical flow between unrelated frames produces obvious artifacts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Extreme color degradation&lt;/td&gt;
&lt;td&gt;Color priors can hallucinate incorrect hues in ambiguous regions&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Very low source resolution (&amp;lt; 240p)&lt;/td&gt;
&lt;td&gt;Too little information for SR to produce plausible high-res output&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The honest summary: AI enhancement is a powerful tool for footage that has &lt;em&gt;some&lt;/em&gt; recoverable signal. It is not a reconstruction tool for footage that is fundamentally missing data.&lt;/p&gt;




&lt;h2&gt;
  
  
  Applied: What This Looks Like in Practice
&lt;/h2&gt;

&lt;p&gt;Tools like &lt;a href="//totalmedia.ai/video/enhance-online/editor"&gt;TotalMedia VideoEnhance&lt;/a&gt; package these pipelines into a browser-based interface — upload a video, configure the AI model, frame interpolation target, and output resolution (up to 4K, 8K on Pro), then process.&lt;/p&gt;

&lt;p&gt;The interesting engineering constraint in browser-based video AI is balancing model size against inference time. Running a full Real-ESRGAN pipeline on a 10-minute video client-side is not feasible. Server-side inference with progress streaming is the practical architecture — which is what most web-based tools use.&lt;/p&gt;

&lt;p&gt;The before/after split preview is generated from a short sample clip, not the full video, which is how per-frame inference becomes interactive.&lt;/p&gt;




&lt;h2&gt;
  
  
  Further Reading
&lt;/h2&gt;

&lt;p&gt;If you want to go deeper on the models:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://arxiv.org/abs/2107.10833" rel="noopener noreferrer"&gt;Real-ESRGAN paper&lt;/a&gt; — practical SR for real-world degradation&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://arxiv.org/abs/2011.06294" rel="noopener noreferrer"&gt;RIFE: Real-Time Intermediate Flow Estimation&lt;/a&gt; — fast optical flow interpolation&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/XPixelGroup/BasicSR" rel="noopener noreferrer"&gt;BasicSR library&lt;/a&gt; — open-source SR training and inference toolkit&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The gap between research-grade results and production-ready tools has closed significantly in the last two years. Worth understanding the foundations if you're building in this space.&lt;/p&gt;

&lt;p&gt;Check more AI video tools and resources on TotalMedia: &lt;a href="https://totalmedia.ai" rel="noopener noreferrer"&gt;https://totalmedia.ai&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Tags: &lt;code&gt;video-processing&lt;/code&gt; &lt;code&gt;machine-learning&lt;/code&gt; &lt;code&gt;computer-vision&lt;/code&gt; &lt;code&gt;ai&lt;/code&gt; &lt;code&gt;deep-learning&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>beginners</category>
      <category>learning</category>
    </item>
    <item>
      <title>Launching TotalMedia: A Simpler Way to Fix and Convert Video Files</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Thu, 30 Apr 2026 02:41:38 +0000</pubDate>
      <link>https://forem.com/alexcc522/launching-totalmedia-a-simpler-way-to-fix-and-convert-video-files-4937</link>
      <guid>https://forem.com/alexcc522/launching-totalmedia-a-simpler-way-to-fix-and-convert-video-files-4937</guid>
      <description>&lt;p&gt;Most video tools are built around a single function.&lt;/p&gt;

&lt;p&gt;Record. Edit. Stream.&lt;/p&gt;

&lt;p&gt;But if you actually work with video files, the real friction shows up after that.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Wrong format for your editor&lt;/li&gt;
&lt;li&gt;Files too large to share&lt;/li&gt;
&lt;li&gt;Low-quality recordings that need cleanup&lt;/li&gt;
&lt;li&gt;Repeating the same conversion steps across multiple files&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We built &lt;strong&gt;TotalMedia&lt;/strong&gt; to handle that layer.&lt;/p&gt;




&lt;h3&gt;
  
  
  What we launched
&lt;/h3&gt;

&lt;p&gt;Two focused tools:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. VideoEnhance&lt;/strong&gt;&lt;br&gt;
Link: &lt;a href="https://www.totalmedia.ai/video/enhance-online/editor" rel="noopener noreferrer"&gt;https://www.totalmedia.ai/video/enhance-online/editor&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbxmwo8xhjvx4ofrf176b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbxmwo8xhjvx4ofrf176b.png" alt=" " width="800" height="454"&gt;&lt;/a&gt;&lt;br&gt;
Improves video quality using AI-based processing.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Upscaling (up to 4K/8K depending on mode)&lt;/li&gt;
&lt;li&gt;Frame interpolation&lt;/li&gt;
&lt;li&gt;Noise and artifact reduction&lt;/li&gt;
&lt;li&gt;Multi-file queue support&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. VideoConverter&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn0ykiljpkvdfs20omfzi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn0ykiljpkvdfs20omfzi.png" alt=" " width="800" height="527"&gt;&lt;/a&gt;&lt;br&gt;
Handles conversion and compression at scale.&lt;br&gt;
Link: &lt;a href="https://www.totalmedia.ai/video/converter-online/convert" rel="noopener noreferrer"&gt;https://www.totalmedia.ai/video/converter-online/convert&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Multi-format support&lt;/li&gt;
&lt;li&gt;Batch processing&lt;/li&gt;
&lt;li&gt;Device and web presets&lt;/li&gt;
&lt;li&gt;Custom output settings&lt;/li&gt;
&lt;li&gt;Built-in downloader module&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Why not just use existing tools?
&lt;/h3&gt;

&lt;p&gt;Most existing tools fall into two categories:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Too simple&lt;/strong&gt; → limited formats, no batch workflow&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Too complex&lt;/strong&gt; → heavy UI, slow for repetitive tasks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We optimized for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Speed&lt;/li&gt;
&lt;li&gt;Consistency&lt;/li&gt;
&lt;li&gt;Minimal repeated work&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Typical workflow we’re targeting
&lt;/h3&gt;

&lt;p&gt;Instead of:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;record → edit → export → convert → compress → retry&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We want:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;record → enhance (if needed) → convert → done&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  What we’re focusing on next
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Faster batch processing&lt;/li&gt;
&lt;li&gt;Better handling of mixed input formats&lt;/li&gt;
&lt;li&gt;Cleaner output consistency across devices&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;If you work with screen recordings, downloaded videos, or large batches of files, this might save you some time.&lt;/p&gt;

&lt;p&gt;Learn more at our official website: &lt;a href="https://totalmedia.ai" rel="noopener noreferrer"&gt;https://totalmedia.ai&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>saas</category>
    </item>
    <item>
      <title>Add Real AI to Your Lovable Project with One Prompt</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Fri, 08 Aug 2025 09:19:13 +0000</pubDate>
      <link>https://forem.com/momen_hq/add-real-ai-to-your-lovable-project-with-one-prompt-354h</link>
      <guid>https://forem.com/momen_hq/add-real-ai-to-your-lovable-project-with-one-prompt-354h</guid>
      <description>&lt;h2&gt;
  
  
  TL;DR:
&lt;/h2&gt;

&lt;p&gt;Use Momen's Lovable Prompt Generator to connect a fully-configured AI agent (with schema + project URL) into your Lovable app using a single generated prompt. No need to manually configure APIs or write backend code. Ideal for integrating real agentic AI into UI-first Lovable apps — reliably and visually.&lt;/p&gt;

&lt;p&gt;Try it now: &lt;a href="https://momen.app/lovable-prompt-generator" rel="noopener noreferrer"&gt;Lovable Prompt Generator&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When Lovable Isn’t Enough
&lt;/h2&gt;

&lt;p&gt;If you’ve spent time &lt;a href="https://momen.app/blogs/why-lovable-isnt-easy-for-non-technical-users/" rel="noopener noreferrer"&gt;building in Lovable&lt;/a&gt;, you know how fast it is to get a good-looking UI up and running. But once you try to add real AI agents, or complex logic, things start to get tricky. The platform was built for speed — not depth.&lt;/p&gt;

&lt;p&gt;This tutorial introduces a workaround: a prompt generator that links your Lovable frontend to a real AI agent you’ve built and tested visually in &lt;a href="http://momen.app" rel="noopener noreferrer"&gt;Momen&lt;/a&gt;. It doesn’t require writing code, and gives you more control.&lt;/p&gt;

&lt;h2&gt;
  
  
  What’s Momen?
&lt;/h2&gt;

&lt;p&gt;Momen is the no‑code full‑stack web app builder that powers this tool. It handles the parts Lovable doesn’t focus on — things like AI agents, backend workflows, and databases. You can visually create and test your AI agent in Momen, confirm it works, and then use the prompt generator to connect it back to Lovable with a single prompt.&lt;/p&gt;

&lt;p&gt;If you’ve hit the wall trying to add &lt;a href="http://momen.app/ai" rel="noopener noreferrer"&gt;real agentic AI&lt;/a&gt; to your Lovable projects, this tool is a way forward.&lt;/p&gt;

&lt;h2&gt;
  
  
  What You'll Learn
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to visually build a real AI agent in Momen&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to generate a Lovable-compatible prompt using your agent config&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to plug that prompt into Lovable to create a fully working AI app&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What You'll Need
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A Lovable account ready&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A &lt;a href="http://editor.momen.app" rel="noopener noreferrer"&gt;Momen account&lt;/a&gt; (free plan works)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A clear idea of what you want your AI to do&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  4 Steps to Build an AI App in Lovable
&lt;/h2&gt;

&lt;p&gt;Before we dive in, here's the basic idea:&lt;/p&gt;

&lt;p&gt;Momen powers your backend &lt;a href="https://docs.momen.app/actions/ai/overview/" rel="noopener noreferrer"&gt;AI agent&lt;/a&gt;, and this tool helps you generate a single prompt that tells Lovable how to connect to it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3yqjkuvqrzxgaqnestek.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3yqjkuvqrzxgaqnestek.png" width="800" height="343"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Create Your Momen Project
&lt;/h3&gt;

&lt;p&gt;Sign up at &lt;a href="http://momen.app" rel="noopener noreferrer"&gt;&lt;strong&gt;momen.app&lt;/strong&gt;&lt;/a&gt; and create a new project.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4j0t3ek9sntx60ks8oi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4j0t3ek9sntx60ks8oi.PNG" width="800" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can either start from scratch or choose a template with AI agents already configured.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xw13jvjj7zruro4grdi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xw13jvjj7zruro4grdi.PNG" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Build Your AI Agents in Momen
&lt;/h3&gt;

&lt;p&gt;Click the &lt;strong&gt;"AI"&lt;/strong&gt; button on the top bar to open the agent panel. Then click &lt;strong&gt;“Add agent”&lt;/strong&gt; to start building.&lt;/p&gt;

&lt;p&gt;You’ll see several sections in the agent builder:&lt;/p&gt;

&lt;h4&gt;
  
  
  General Configuration
&lt;/h4&gt;

&lt;p&gt;Choose your preferred LLM (GPT-4o, Gemini 2.5, etc.), and optionally adjust settings like temperature (personality), output length, and conversation rounds.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fszgnr8zkc3gavw9m8v04.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fszgnr8zkc3gavw9m8v04.png" width="800" height="458"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Input
&lt;/h4&gt;

&lt;p&gt;In the input section, Define what the user needs to provide — e.g., description, style， etc.. These are dynamic fields that user fills in.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft0jlexi9albi0m1djetb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft0jlexi9albi0m1djetb.png" width="800" height="412"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Prompt
&lt;/h4&gt;

&lt;p&gt;Set the agent’s &lt;strong&gt;Role&lt;/strong&gt; (what it acts as) and &lt;strong&gt;Goal&lt;/strong&gt; (what it needs to do). Example: &lt;em&gt;“You are a helpful assistant that summarizes user input.”&lt;/em&gt; You can also add &lt;strong&gt;Constraints&lt;/strong&gt; like “Use markdown only” or “Don’t include sources.”&lt;/p&gt;

&lt;p&gt;Use &lt;code&gt;+&lt;/code&gt; to reference inputs, user info, constants, or formulas in the prompt.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2e9qqkidhr5uy8cnjw4i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2e9qqkidhr5uy8cnjw4i.png" width="800" height="421"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Context
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71597ow3uhg3e55kfzo8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71597ow3uhg3e55kfzo8.png" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Want your agent to access knowledge? Add data from database tables or connect APIs. APIs can even link your agent to external services.&lt;/p&gt;

&lt;h4&gt;
  
  
  Tools (Advanced)
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95nrigncmdlbp5t732lx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95nrigncmdlbp5t732lx.png" width="800" height="378"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Configure &lt;a href="https://docs.momen.app/actions/actionflow/overview/" rel="noopener noreferrer"&gt;backend workflows (Actionflow)&lt;/a&gt;, trigger &lt;a href="https://docs.momen.app/data/api/" rel="noopener noreferrer"&gt;APIs&lt;/a&gt;, or invoke other agents. This is how you give your agent real functionality beyond LLM text.&lt;/p&gt;

&lt;h4&gt;
  
  
  Output
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8wdhw2c30mm68jew1bej.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8wdhw2c30mm68jew1bej.gif" width="720" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the &lt;strong&gt;Output&lt;/strong&gt; section, you can configure how the AI response is delivered:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Default Output&lt;/strong&gt;: The model will respond freely in plain text. You can also enable &lt;strong&gt;Streaming&lt;/strong&gt;, which shows the response as it’s being generated — a smoother UX, especially for chat-based interactions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Structured Output&lt;/strong&gt;: If your app needs structured data (a JSON object), you can define the expected format here. This is helpful when your Lovable UI relies on specific fields.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Note: &lt;strong&gt;Gemini 2.0 Flash&lt;/strong&gt; (used for image generation) does &lt;strong&gt;not&lt;/strong&gt; support structured outputs.&lt;/p&gt;

&lt;h4&gt;
  
  
  Debug
&lt;/h4&gt;

&lt;p&gt;On the right, test your agent and inspect each round: input, output, tool usage, and system messages.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdvw7o1zqphuvv62uhvh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdvw7o1zqphuvv62uhvh.png" width="800" height="768"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxez1y5be53rwderbv4oo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxez1y5be53rwderbv4oo.png" width="800" height="439"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once done, click &lt;strong&gt;“Sync”&lt;/strong&gt; to save your configuration.&lt;/p&gt;

&lt;p&gt;Once you configured your agent, click the sync button to save your configurations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgusjihd0u6cgs6ilhdpu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgusjihd0u6cgs6ilhdpu.png" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💡 Pro Tip: Test your agent first in Momen’s debug panel — if it works here, it’ll work in Lovable.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Generate Your Prompt
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Copy your project URL&lt;/strong&gt; from your browser.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg285w01e32p97l86z943.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg285w01e32p97l86z943.png" width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; In the agent panel, click the &lt;code&gt;⋯&lt;/code&gt; menu and select &lt;strong&gt;"Copy".&lt;/strong&gt; This includes your agent setup.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0kgyu36eue73823brlx6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0kgyu36eue73823brlx6.png" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Open the Lovable prompt generator.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Paste in:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Project URL&lt;/li&gt;
&lt;li&gt; Agent Schema&lt;/li&gt;
&lt;li&gt; Describe your app&lt;/li&gt;
&lt;li&gt; Choose whether you need authentication&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqnw3xbhxrjv5e76b5iwe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqnw3xbhxrjv5e76b5iwe.png" width="800" height="608"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Click &lt;strong&gt;Generate&lt;/strong&gt; — and your Lovable-compatible prompt will appear.&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;

&lt;/ol&gt;

&lt;h3&gt;
  
  
  Step 4: Paste the Prompt in Lovable
&lt;/h3&gt;

&lt;p&gt;In your Lovable project, paste the generated prompt.&lt;/p&gt;

&lt;p&gt;Wait 1–5 minutes — Lovable will start generating your AI app powered by the Momen agent.&lt;/p&gt;

&lt;p&gt;That’s it. You’ve now got a frontend built with Lovable, and real AI logic powered by Momen — all with one prompt.&lt;/p&gt;

&lt;h2&gt;
  
  
  FAQs
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What exactly is the “agent schema”? Where do I find it?
&lt;/h3&gt;

&lt;p&gt;The &lt;strong&gt;agent schema&lt;/strong&gt; is just a copy of your agent’s “setup” — everything you configured in Momen (the model, prompts, tools, etc.) in one package. &lt;strong&gt;How to find it:&lt;/strong&gt; Go to your agent panel in Momen, click the three-dot menu (⋯) in the top right, and select &lt;strong&gt;“Copy”&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What happens if I paste the wrong schema or URL?
&lt;/h3&gt;

&lt;p&gt;Our tool will immediately show an error message if something’s off — for example, if the URL isn’t a Momen project link or the schema doesn’t match the format.&lt;/p&gt;

&lt;p&gt;You won’t waste time generating a broken prompt. Just fix the input (copy the correct project URL or schema) and try again.&lt;/p&gt;

&lt;h3&gt;
  
  
  Can I add multiple agents to the same Lovable project using this tool?
&lt;/h3&gt;

&lt;p&gt;Not directly — right now, the tool only links one agent to a Lovable project at a time.&lt;/p&gt;

&lt;p&gt;However, inside Momen’s &lt;a href="http://momen.app/ai" rel="noopener noreferrer"&gt;AI Agent Builder&lt;/a&gt;, you can chain multiple agents together. That means you can design several agents to work as a team (e.g., one for research, one for summarizing, one for writing) and then connect that combined agent workflow to Lovable with a single prompt.&lt;/p&gt;

&lt;h3&gt;
  
  
  Is Momen free to use? Are there any limits?
&lt;/h3&gt;

&lt;p&gt;Yes — you can start for free. The &lt;a href="http://momen.app/pricing" rel="noopener noreferrer"&gt;free plan&lt;/a&gt; gives you 100k AI Points for building AI agents.&lt;/p&gt;

&lt;h3&gt;
  
  
  Do I need to know what an “Actionflow” is to build an agent?
&lt;/h3&gt;

&lt;p&gt;No. Actionflows are &lt;strong&gt;optional&lt;/strong&gt;. You can create a fully working agent without ever touching them. But if you want your AI to &lt;a href="https://docs.momen.app/actions/ai/overview/" rel="noopener noreferrer"&gt;trigger multi-step workflows&lt;/a&gt; (like “send email → update database → call API”), that’s when Actionflows shine.&lt;/p&gt;

&lt;h3&gt;
  
  
  Can I test/debug my agent before connecting it to Lovable?
&lt;/h3&gt;

&lt;p&gt;Yes — &lt;strong&gt;right inside Momen.&lt;/strong&gt; There’s a built-in debug panel where you can test the agent, see every step (inputs, outputs, tool calls), and fix issues before touching Lovable.&lt;/p&gt;

&lt;h3&gt;
  
  
  What models does Momen support? Can I choose between GPT and Gemini?
&lt;/h3&gt;

&lt;p&gt;Yes. You can pick from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;OpenAI models&lt;/strong&gt; (GPT-4o mini, GOT-4o, GPT-4.1, GPT-4.1 mini, GPT-4.1 nano GPT-o3 mini, GPT-o4 mini)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Gemini models&lt;/strong&gt; (2.5 Pro, 2.5 Flash, 2.0 Flash for images)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Does the AI automatically work in Lovable once I paste the prompt?
&lt;/h3&gt;

&lt;p&gt;Yes. The prompt tells Lovable exactly how to connect to your Momen agent.&lt;/p&gt;

&lt;h3&gt;
  
  
  What do I do if Lovable gives an error after pasting the prompt?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Check the "data" in your Momen AI agent panel, you should see the information of every round of the conversation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If things are alright in Momen, you should try to debug in Lovable.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How do I know if the agent is actually responding inside Lovable?
&lt;/h3&gt;

&lt;p&gt;If your Lovable app feels unresponsive or you’re not sure the AI is doing anything, you can confirm directly in Momen’s agent logs:&lt;/p&gt;

&lt;p&gt;Open your Momen project's agent panel → &lt;a href="https://docs.momen.app/actions/ai/ai_data_model/" rel="noopener noreferrer"&gt;Data tab&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Here you’ll see every request your agent received from Lovable, along with the response status and details.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources &amp;amp; Next Steps
&lt;/h2&gt;

&lt;p&gt;🔗 &lt;strong&gt;Learn more about building AI agents in Momen&lt;/strong&gt; → &lt;a href="https://docs.momen.app/actions/ai/overview/" rel="noopener noreferrer"&gt;Momen AI Docs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;See how to build workflows&lt;/strong&gt; → &lt;a href="https://docs.momen.app/actions/actionflow/overview/" rel="noopener noreferrer"&gt;Actionflow Guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;See how to connect with APIs&lt;/strong&gt; → &lt;a href="https://docs.momen.app/data/api/" rel="noopener noreferrer"&gt;API Guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;Explore the Momen Community Forum&lt;/strong&gt; → &lt;a href="https://forum.momen.app" rel="noopener noreferrer"&gt;forum.momen.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🎬 &lt;strong&gt;Subscribe to Momen's Youtube channel&lt;/strong&gt; → &lt;a href="https://www.youtube.com/@Momen_HQ" rel="noopener noreferrer"&gt;https://www.youtube.com/@Momen_HQ&lt;/a&gt;&lt;/p&gt;

</description>
      <category>vibecoding</category>
      <category>ai</category>
      <category>productivity</category>
      <category>programming</category>
    </item>
    <item>
      <title>Add Real AI to Your Lovable Project with One Prompt</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Fri, 08 Aug 2025 09:19:13 +0000</pubDate>
      <link>https://forem.com/momen_hq/add-real-ai-to-your-lovable-project-with-one-prompt-3ma8</link>
      <guid>https://forem.com/momen_hq/add-real-ai-to-your-lovable-project-with-one-prompt-3ma8</guid>
      <description>&lt;h2&gt;
  
  
  TL;DR:
&lt;/h2&gt;

&lt;p&gt;Use Momen's Lovable Prompt Generator to connect a fully-configured AI agent (with schema + project URL) into your Lovable app using a single generated prompt. No need to manually configure APIs or write backend code. Ideal for integrating real agentic AI into UI-first Lovable apps — reliably and visually.&lt;/p&gt;

&lt;p&gt;Try it now: &lt;a href="https://momen.app/lovable-prompt-generator" rel="noopener noreferrer"&gt;Lovable Prompt Generator&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When Lovable Isn’t Enough
&lt;/h2&gt;

&lt;p&gt;If you’ve spent time &lt;a href="https://momen.app/blogs/why-lovable-isnt-easy-for-non-technical-users/" rel="noopener noreferrer"&gt;building in Lovable&lt;/a&gt;, you know how fast it is to get a good-looking UI up and running. But once you try to add real AI agents, or complex logic, things start to get tricky. The platform was built for speed — not depth.&lt;/p&gt;

&lt;p&gt;This tutorial introduces a workaround: a prompt generator that links your Lovable frontend to a real AI agent you’ve built and tested visually in &lt;a href="http://momen.app" rel="noopener noreferrer"&gt;Momen&lt;/a&gt;. It doesn’t require writing code, and gives you more control.&lt;/p&gt;

&lt;h2&gt;
  
  
  What’s Momen?
&lt;/h2&gt;

&lt;p&gt;Momen is the no‑code full‑stack web app builder that powers this tool. It handles the parts Lovable doesn’t focus on — things like AI agents, backend workflows, and databases. You can visually create and test your AI agent in Momen, confirm it works, and then use the prompt generator to connect it back to Lovable with a single prompt.&lt;/p&gt;

&lt;p&gt;If you’ve hit the wall trying to add &lt;a href="http://momen.app/ai" rel="noopener noreferrer"&gt;real agentic AI&lt;/a&gt; to your Lovable projects, this tool is a way forward.&lt;/p&gt;

&lt;h2&gt;
  
  
  What You'll Learn
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to visually build a real AI agent in Momen&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to generate a Lovable-compatible prompt using your agent config&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to plug that prompt into Lovable to create a fully working AI app&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What You'll Need
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A Lovable account ready&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A &lt;a href="http://editor.momen.app" rel="noopener noreferrer"&gt;Momen account&lt;/a&gt; (free plan works)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A clear idea of what you want your AI to do&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  4 Steps to Build an AI App in Lovable
&lt;/h2&gt;

&lt;p&gt;Before we dive in, here's the basic idea:&lt;/p&gt;

&lt;p&gt;Momen powers your backend &lt;a href="https://docs.momen.app/actions/ai/overview/" rel="noopener noreferrer"&gt;AI agent&lt;/a&gt;, and this tool helps you generate a single prompt that tells Lovable how to connect to it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3yqjkuvqrzxgaqnestek.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3yqjkuvqrzxgaqnestek.png" width="800" height="343"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Create Your Momen Project
&lt;/h3&gt;

&lt;p&gt;Sign up at &lt;a href="http://momen.app" rel="noopener noreferrer"&gt;&lt;strong&gt;momen.app&lt;/strong&gt;&lt;/a&gt; and create a new project.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4j0t3ek9sntx60ks8oi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4j0t3ek9sntx60ks8oi.PNG" width="800" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can either start from scratch or choose a template with AI agents already configured.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xw13jvjj7zruro4grdi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xw13jvjj7zruro4grdi.PNG" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Build Your AI Agents in Momen
&lt;/h3&gt;

&lt;p&gt;Click the &lt;strong&gt;"AI"&lt;/strong&gt; button on the top bar to open the agent panel. Then click &lt;strong&gt;“Add agent”&lt;/strong&gt; to start building.&lt;/p&gt;

&lt;p&gt;You’ll see several sections in the agent builder:&lt;/p&gt;

&lt;h4&gt;
  
  
  General Configuration
&lt;/h4&gt;

&lt;p&gt;Choose your preferred LLM (GPT-4o, Gemini 2.5, etc.), and optionally adjust settings like temperature (personality), output length, and conversation rounds.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fszgnr8zkc3gavw9m8v04.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fszgnr8zkc3gavw9m8v04.png" width="800" height="458"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Input
&lt;/h4&gt;

&lt;p&gt;In the input section, Define what the user needs to provide — e.g., description, style， etc.. These are dynamic fields that user fills in.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft0jlexi9albi0m1djetb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft0jlexi9albi0m1djetb.png" width="800" height="412"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Prompt
&lt;/h4&gt;

&lt;p&gt;Set the agent’s &lt;strong&gt;Role&lt;/strong&gt; (what it acts as) and &lt;strong&gt;Goal&lt;/strong&gt; (what it needs to do). Example: &lt;em&gt;“You are a helpful assistant that summarizes user input.”&lt;/em&gt; You can also add &lt;strong&gt;Constraints&lt;/strong&gt; like “Use markdown only” or “Don’t include sources.”&lt;/p&gt;

&lt;p&gt;Use &lt;code&gt;+&lt;/code&gt; to reference inputs, user info, constants, or formulas in the prompt.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2e9qqkidhr5uy8cnjw4i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2e9qqkidhr5uy8cnjw4i.png" width="800" height="421"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Context
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71597ow3uhg3e55kfzo8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71597ow3uhg3e55kfzo8.png" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Want your agent to access knowledge? Add data from database tables or connect APIs. APIs can even link your agent to external services.&lt;/p&gt;

&lt;h4&gt;
  
  
  Tools (Advanced)
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95nrigncmdlbp5t732lx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95nrigncmdlbp5t732lx.png" width="800" height="378"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Configure &lt;a href="https://docs.momen.app/actions/actionflow/overview/" rel="noopener noreferrer"&gt;backend workflows (Actionflow)&lt;/a&gt;, trigger &lt;a href="https://docs.momen.app/data/api/" rel="noopener noreferrer"&gt;APIs&lt;/a&gt;, or invoke other agents. This is how you give your agent real functionality beyond LLM text.&lt;/p&gt;

&lt;h4&gt;
  
  
  Output
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8wdhw2c30mm68jew1bej.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8wdhw2c30mm68jew1bej.gif" width="720" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the &lt;strong&gt;Output&lt;/strong&gt; section, you can configure how the AI response is delivered:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Default Output&lt;/strong&gt;: The model will respond freely in plain text. You can also enable &lt;strong&gt;Streaming&lt;/strong&gt;, which shows the response as it’s being generated — a smoother UX, especially for chat-based interactions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Structured Output&lt;/strong&gt;: If your app needs structured data (a JSON object), you can define the expected format here. This is helpful when your Lovable UI relies on specific fields.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Note: &lt;strong&gt;Gemini 2.0 Flash&lt;/strong&gt; (used for image generation) does &lt;strong&gt;not&lt;/strong&gt; support structured outputs.&lt;/p&gt;

&lt;h4&gt;
  
  
  Debug
&lt;/h4&gt;

&lt;p&gt;On the right, test your agent and inspect each round: input, output, tool usage, and system messages.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdvw7o1zqphuvv62uhvh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdvw7o1zqphuvv62uhvh.png" width="800" height="768"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxez1y5be53rwderbv4oo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxez1y5be53rwderbv4oo.png" width="800" height="439"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once done, click &lt;strong&gt;“Sync”&lt;/strong&gt; to save your configuration.&lt;/p&gt;

&lt;p&gt;Once you configured your agent, click the sync button to save your configurations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgusjihd0u6cgs6ilhdpu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgusjihd0u6cgs6ilhdpu.png" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💡 Pro Tip: Test your agent first in Momen’s debug panel — if it works here, it’ll work in Lovable.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Generate Your Prompt
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Copy your project URL&lt;/strong&gt; from your browser.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg285w01e32p97l86z943.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg285w01e32p97l86z943.png" width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; In the agent panel, click the &lt;code&gt;⋯&lt;/code&gt; menu and select &lt;strong&gt;"Copy".&lt;/strong&gt; This includes your agent setup.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0kgyu36eue73823brlx6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0kgyu36eue73823brlx6.png" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Open the Lovable prompt generator.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Paste in:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Project URL&lt;/li&gt;
&lt;li&gt; Agent Schema&lt;/li&gt;
&lt;li&gt; Describe your app&lt;/li&gt;
&lt;li&gt; Choose whether you need authentication&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqnw3xbhxrjv5e76b5iwe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqnw3xbhxrjv5e76b5iwe.png" width="800" height="608"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Click &lt;strong&gt;Generate&lt;/strong&gt; — and your Lovable-compatible prompt will appear.&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;

&lt;/ol&gt;

&lt;h3&gt;
  
  
  Step 4: Paste the Prompt in Lovable
&lt;/h3&gt;

&lt;p&gt;In your Lovable project, paste the generated prompt.&lt;/p&gt;

&lt;p&gt;Wait 1–5 minutes — Lovable will start generating your AI app powered by the Momen agent.&lt;/p&gt;

&lt;p&gt;That’s it. You’ve now got a frontend built with Lovable, and real AI logic powered by Momen — all with one prompt.&lt;/p&gt;

&lt;h2&gt;
  
  
  FAQs
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What exactly is the “agent schema”? Where do I find it?
&lt;/h3&gt;

&lt;p&gt;The &lt;strong&gt;agent schema&lt;/strong&gt; is just a copy of your agent’s “setup” — everything you configured in Momen (the model, prompts, tools, etc.) in one package. &lt;strong&gt;How to find it:&lt;/strong&gt; Go to your agent panel in Momen, click the three-dot menu (⋯) in the top right, and select &lt;strong&gt;“Copy”&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What happens if I paste the wrong schema or URL?
&lt;/h3&gt;

&lt;p&gt;Our tool will immediately show an error message if something’s off — for example, if the URL isn’t a Momen project link or the schema doesn’t match the format.&lt;/p&gt;

&lt;p&gt;You won’t waste time generating a broken prompt. Just fix the input (copy the correct project URL or schema) and try again.&lt;/p&gt;

&lt;h3&gt;
  
  
  Can I add multiple agents to the same Lovable project using this tool?
&lt;/h3&gt;

&lt;p&gt;Not directly — right now, the tool only links one agent to a Lovable project at a time.&lt;/p&gt;

&lt;p&gt;However, inside Momen’s &lt;a href="http://momen.app/ai" rel="noopener noreferrer"&gt;AI Agent Builder&lt;/a&gt;, you can chain multiple agents together. That means you can design several agents to work as a team (e.g., one for research, one for summarizing, one for writing) and then connect that combined agent workflow to Lovable with a single prompt.&lt;/p&gt;

&lt;h3&gt;
  
  
  Is Momen free to use? Are there any limits?
&lt;/h3&gt;

&lt;p&gt;Yes — you can start for free. The &lt;a href="http://momen.app/pricing" rel="noopener noreferrer"&gt;free plan&lt;/a&gt; gives you 100k AI Points for building AI agents.&lt;/p&gt;

&lt;h3&gt;
  
  
  Do I need to know what an “Actionflow” is to build an agent?
&lt;/h3&gt;

&lt;p&gt;No. Actionflows are &lt;strong&gt;optional&lt;/strong&gt;. You can create a fully working agent without ever touching them. But if you want your AI to &lt;a href="https://docs.momen.app/actions/ai/overview/" rel="noopener noreferrer"&gt;trigger multi-step workflows&lt;/a&gt; (like “send email → update database → call API”), that’s when Actionflows shine.&lt;/p&gt;

&lt;h3&gt;
  
  
  Can I test/debug my agent before connecting it to Lovable?
&lt;/h3&gt;

&lt;p&gt;Yes — &lt;strong&gt;right inside Momen.&lt;/strong&gt; There’s a built-in debug panel where you can test the agent, see every step (inputs, outputs, tool calls), and fix issues before touching Lovable.&lt;/p&gt;

&lt;h3&gt;
  
  
  What models does Momen support? Can I choose between GPT and Gemini?
&lt;/h3&gt;

&lt;p&gt;Yes. You can pick from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;OpenAI models&lt;/strong&gt; (GPT-4o mini, GOT-4o, GPT-4.1, GPT-4.1 mini, GPT-4.1 nano GPT-o3 mini, GPT-o4 mini)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Gemini models&lt;/strong&gt; (2.5 Pro, 2.5 Flash, 2.0 Flash for images)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Does the AI automatically work in Lovable once I paste the prompt?
&lt;/h3&gt;

&lt;p&gt;Yes. The prompt tells Lovable exactly how to connect to your Momen agent.&lt;/p&gt;

&lt;h3&gt;
  
  
  What do I do if Lovable gives an error after pasting the prompt?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Check the "data" in your Momen AI agent panel, you should see the information of every round of the conversation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If things are alright in Momen, you should try to debug in Lovable.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How do I know if the agent is actually responding inside Lovable?
&lt;/h3&gt;

&lt;p&gt;If your Lovable app feels unresponsive or you’re not sure the AI is doing anything, you can confirm directly in Momen’s agent logs:&lt;/p&gt;

&lt;p&gt;Open your Momen project's agent panel → &lt;a href="https://docs.momen.app/actions/ai/ai_data_model/" rel="noopener noreferrer"&gt;Data tab&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Here you’ll see every request your agent received from Lovable, along with the response status and details.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources &amp;amp; Next Steps
&lt;/h2&gt;

&lt;p&gt;🔗 &lt;strong&gt;Learn more about building AI agents in Momen&lt;/strong&gt; → &lt;a href="https://docs.momen.app/actions/ai/overview/" rel="noopener noreferrer"&gt;Momen AI Docs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;See how to build workflows&lt;/strong&gt; → &lt;a href="https://docs.momen.app/actions/actionflow/overview/" rel="noopener noreferrer"&gt;Actionflow Guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;See how to connect with APIs&lt;/strong&gt; → &lt;a href="https://docs.momen.app/data/api/" rel="noopener noreferrer"&gt;API Guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;Explore the Momen Community Forum&lt;/strong&gt; → &lt;a href="https://forum.momen.app" rel="noopener noreferrer"&gt;forum.momen.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🎬 &lt;strong&gt;Subscribe to Momen's Youtube channel&lt;/strong&gt; → &lt;a href="https://www.youtube.com/@Momen_HQ" rel="noopener noreferrer"&gt;https://www.youtube.com/@Momen_HQ&lt;/a&gt;&lt;/p&gt;

</description>
      <category>vibecoding</category>
      <category>ai</category>
      <category>productivity</category>
      <category>programming</category>
    </item>
    <item>
      <title>How a Legal Advocate Built an AI-Powered Case Intake &amp; Memo Generator — Without Writing Code</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Tue, 22 Jul 2025 09:05:24 +0000</pubDate>
      <link>https://forem.com/momen_hq/how-a-legal-advocate-built-an-ai-powered-case-intake-memo-generator-without-writing-code-d9m</link>
      <guid>https://forem.com/momen_hq/how-a-legal-advocate-built-an-ai-powered-case-intake-memo-generator-without-writing-code-d9m</guid>
      <description>&lt;h2&gt;
  
  
  ⚖️ Built a Legal AI Assistant in a Week — No Code
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Problem:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Client intake in law firms is messy.&lt;br&gt;&lt;br&gt;
Manual forms, unclear info, and memo drafts that start from scratch.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thomas&lt;/strong&gt;, a non-technical legal advocate, wanted to automate the first mile of casework:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Intake → Clarification → Drafting&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So he built it—&lt;strong&gt;in 1 week&lt;/strong&gt;—with &lt;a href="https://momen.app" rel="noopener noreferrer"&gt;Momen&lt;/a&gt;. No engineers.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7y4ecgz32jeqotwg6jx.png" alt=" " width="800" height="488"&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  🛠️ The Setup
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Built With&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Intake Form&lt;/td&gt;
&lt;td&gt;Momen's drag and drop UI builder&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;AI Follow-Up&lt;/td&gt;
&lt;td&gt;Momen's AI agent builder (with RAG)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Memo Generation&lt;/td&gt;
&lt;td&gt;Momen's Actionflow + LLM&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PDF Export&lt;/td&gt;
&lt;td&gt;LegalMarkdown&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Roles &amp;amp; Auth&lt;/td&gt;
&lt;td&gt;Momen's Built-in permission&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  🔄 The Workflow
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Client submits a case&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI follows up&lt;/strong&gt; with smart questions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Once complete&lt;/strong&gt;, Actionflow generates a memo&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lawyer dashboard&lt;/strong&gt; shows full history + PDF export&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;No polling, no glue code. Just declarative logic and built-in AI agents.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fav8tsgk3z9qkaw2u2t5p.PNG" alt=" " width="800" height="1200"&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  ✅ Outcome
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;MVP in under 7 days
&lt;/li&gt;
&lt;li&gt;AI-powered summaries + drafts
&lt;/li&gt;
&lt;li&gt;Saves 2–3 hours per case
&lt;/li&gt;
&lt;li&gt;Cost: &amp;lt;$100/month&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🧠 Why It Works
&lt;/h2&gt;

&lt;p&gt;Momen gave him:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Structured data + UI
&lt;/li&gt;
&lt;li&gt;Backend workflows (Actionflow)
&lt;/li&gt;
&lt;li&gt;RAG-enabled AI agents
&lt;/li&gt;
&lt;li&gt;Full access control
&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Built like a dev, without writing code.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Try it yourself → &lt;a href="https://momen.app" rel="noopener noreferrer"&gt;https://momen.app&lt;/a&gt;&lt;br&gt;
Read more details: &lt;a href="https://momen.app/blogs/build-legal-assistant-with-momen/" rel="noopener noreferrer"&gt;https://momen.app/blogs/build-legal-assistant-with-momen/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How We Built an AI-Powered Legal Timeline Generator</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Fri, 27 Jun 2025 09:40:32 +0000</pubDate>
      <link>https://forem.com/momen_hq/how-we-built-an-ai-powered-legal-timeline-generator-5a33</link>
      <guid>https://forem.com/momen_hq/how-we-built-an-ai-powered-legal-timeline-generator-5a33</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; At &lt;em&gt;Hack the Law Cambridge&lt;/em&gt;, we built an AI-powered &lt;strong&gt;Event Timeline Generator&lt;/strong&gt; using &lt;a href="https://momen.app" rel="noopener noreferrer"&gt;Momen&lt;/a&gt;, ChatGPT-4o, and Gemini 2.5—no code required. It extracts events from legal text, detects conflicts between witness statements, and visualizes everything in a timeline. This post breaks down the &lt;strong&gt;full architecture&lt;/strong&gt; so you can &lt;strong&gt;reverse engineer&lt;/strong&gt; it yourself.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/rlugt8fTZYI"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚖️ The Legal Pain Point: Reconstructing Timelines from Testimonies
&lt;/h2&gt;

&lt;p&gt;Litigation teams often spend hours parsing through witness statements, deposition transcripts, and contradictory accounts to rebuild a factual timeline. It's manual, high-stakes, and prone to human error.&lt;/p&gt;

&lt;p&gt;So we asked: &lt;em&gt;Can we automate this?&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ The Tool: AI-Powered Timeline Generator (Demo App)
&lt;/h2&gt;

&lt;p&gt;We built this app for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🧑‍⚖️ Litigation associates
&lt;/li&gt;
&lt;li&gt;🧑‍💼 Paralegals
&lt;/li&gt;
&lt;li&gt;🧑‍💻 Legal tech teams
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Core Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Upload or paste raw text (statements or transcripts)&lt;/li&gt;
&lt;li&gt;AI extracts events and timestamps&lt;/li&gt;
&lt;li&gt;AI detects and highlights contradictions&lt;/li&gt;
&lt;li&gt;Interactive timeline view with source quotes&lt;/li&gt;
&lt;li&gt;Structured database for case history&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🚫 Why Not Just Use ChatGPT?
&lt;/h2&gt;

&lt;p&gt;Sure, you can paste text into ChatGPT—but legal workflows need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Structure&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Repeatability&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Traceability&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Collaboration&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s why we used &lt;strong&gt;Momen&lt;/strong&gt;, a no-code platform where you can build full-stack apps with backend logic, UI, databases, and AI agents.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚙️ How It Works (Full Stack Breakdown)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧩 Database Schema
&lt;/h3&gt;

&lt;p&gt;We created &lt;strong&gt;6 interrelated tables&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;Statement&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Timeline_event&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Conflict&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Event_evidence&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Event_in_conflict&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Analysis&lt;/code&gt; (parent record for each case)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🧠 Two AI Agents:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;timeline_extractor&lt;/code&gt; (ChatGPT-4o)&lt;br&gt;&lt;br&gt;
→ Parses each statement, extracts events, timestamps, witnesses  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;conflict_detector&lt;/code&gt; (Gemini 2.5)&lt;br&gt;&lt;br&gt;
→ Compares statements and flags conflicting events&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  🔁 Actionflows = No-Code Backend Logic
&lt;/h2&gt;

&lt;h3&gt;
  
  
  ✅ &lt;code&gt;process_statements&lt;/code&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Triggered when user clicks “Generate Timeline”&lt;/li&gt;
&lt;li&gt;Creates an &lt;code&gt;analysis_id&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Saves input statements&lt;/li&gt;
&lt;li&gt;Calls &lt;code&gt;insert_events&lt;/code&gt; for each statement&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✅ &lt;code&gt;insert_events&lt;/code&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Calls &lt;code&gt;timeline_extractor&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Saves structured events to &lt;code&gt;timeline_event&lt;/code&gt; table&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✅ &lt;code&gt;insert_conflicts&lt;/code&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Triggered when user clicks “Detect Conflicts”&lt;/li&gt;
&lt;li&gt;Calls &lt;code&gt;conflict_detector&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Stores results in &lt;code&gt;Conflict&lt;/code&gt; and &lt;code&gt;Event_in_conflict&lt;/code&gt; tables&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🖼️ Frontend (Also No Code)
&lt;/h2&gt;

&lt;p&gt;Built using Momen’s visual UI components:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Text inputs for witness statements&lt;/li&gt;
&lt;li&gt;Button to trigger timeline generation&lt;/li&gt;
&lt;li&gt;Interactive timeline list view (subscribed to &lt;code&gt;timeline_event&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Sidebar to show conflict details&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;💡 Conflicting events show in &lt;strong&gt;red&lt;/strong&gt;, with side-by-side quote comparison.&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 Timeline: Built in 2 Days
&lt;/h2&gt;

&lt;p&gt;Even under hackathon time pressure, the app:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Parsed multi-page legal text&lt;/li&gt;
&lt;li&gt;Built a timeline in under 30 seconds&lt;/li&gt;
&lt;li&gt;Flagged conflicts with full traceability&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;📉 Total cost? ~$99 (includes both LLM agents + infra).&lt;/p&gt;




&lt;h2&gt;
  
  
  🔍 Want to Reverse Engineer It?
&lt;/h2&gt;

&lt;p&gt;You can explore the &lt;strong&gt;full setup&lt;/strong&gt;—database, agents, and Actionflows—here:&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://editor.momen.app/tool/RZJyj4e4dQ8/WEB?code=qh9Tg7XU9wtRp" rel="noopener noreferrer"&gt;&lt;strong&gt;Reverse engineer the full Momen build (view-only link)&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Yes, you can view every detail of how it works.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For a more detailed breakdown, &lt;a href="https://momen.app/blogs/ai-legal-document-analysis-built-with-momen/" rel="noopener noreferrer"&gt;check it here&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🧭 What’s Next?
&lt;/h2&gt;

&lt;p&gt;Because it’s built with Gemini 2.5 (multi-modal), future versions could:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyze deposition videos or CCTV&lt;/li&gt;
&lt;li&gt;Merge transcripts + video into one timeline&lt;/li&gt;
&lt;li&gt;Integrate with document management systems&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Drop questions or ideas in the comments!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>productivity</category>
      <category>gemini</category>
    </item>
    <item>
      <title>How a Used-Car Dealer Built an AI SaaS in 5 Days — With No Code</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Tue, 17 Jun 2025 06:56:12 +0000</pubDate>
      <link>https://forem.com/momen_hq/how-a-used-car-dealer-built-an-ai-saas-in-5-days-with-no-code-4mc0</link>
      <guid>https://forem.com/momen_hq/how-a-used-car-dealer-built-an-ai-saas-in-5-days-with-no-code-4mc0</guid>
      <description>&lt;h2&gt;
  
  
  🚗 Introduction: When Manual Tasks Stall Growth
&lt;/h2&gt;

&lt;p&gt;Leo, a seasoned used-car entrepreneur, had a vision. After 14 years of sourcing, importing, and selling vehicles, he was buried under browser tabs, spreadsheets, and tedious admin work. Every car listing he reviewed had to be copied, cleaned, and emailed manually.&lt;/p&gt;

&lt;p&gt;He didn’t know how to code — but he knew something had to change. So he explored no-code tools.&lt;/p&gt;

&lt;p&gt;After hitting roadblocks with Adalo and Softr (slow performance, poor backend support, no paywall integration), Leo nearly gave up.&lt;/p&gt;

&lt;p&gt;Then he found Momen.&lt;/p&gt;

&lt;h2&gt;
  
  
  🔧 From Hustle to Builder: What Was the Problem?
&lt;/h2&gt;

&lt;p&gt;In the used &amp;amp; repairable car business, most vehicle info comes from sites like Copart, IAAI, or AutoTrader. But these sites are inconsistent — many don’t have APIs. Critical details are buried in cluttered layouts.&lt;/p&gt;

&lt;p&gt;Leo’s vision: build a custom system to scrape vehicle data, clean it with AI, and manage it all in a dashboard.&lt;/p&gt;

&lt;p&gt;No-code tools weren’t up to the task. Adalo lagged with real data. Softr required complex Airtable setups and had no scraping support.&lt;/p&gt;

&lt;p&gt;He needed something better. A real system. A SaaS.&lt;/p&gt;

&lt;h2&gt;
  
  
  ⚙️ The Build: An AI SaaS in Under a Week
&lt;/h2&gt;

&lt;p&gt;Leo used Momen to build a full SaaS, in 3 parts:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Chrome Extension (Built in Cursor)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Handles user auth and permission checks via Momen APIs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scrapes vehicle info and location data from listing pages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Sends raw text to Momen backend for processing.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Momen Backend
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Actionflow kicks off when new data arrives.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;AI Agent structures data (VIN, damage status, pricing).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stores clean records in a structured, queryable database.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Momen Frontend (Management Dashboard)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Staff can view/edit vehicle listings.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Set prices and trigger automated emails.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Built-in Stripe paywall for subscription-based access.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All of this was built in less than 5 days for under $100.&lt;/p&gt;

&lt;h2&gt;
  
  
  💡 Why Momen Made the Difference
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;AI Where It Matters: Instead of spamming ChatGPT prompts, Leo’s agent cleaned the messiest data with structured outputs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Bridge to the Web: No APIs? No problem. The extension + Momen turned any site into a structured data source.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;No Glue Code: No Airtable juggling, no Zapier madness. One platform for backend, frontend, AI, and auth.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ⏱️ Time + 💸 Money Saved
&lt;/h2&gt;

&lt;p&gt;Traditional dev: ~$20K+ in engineers &amp;amp; infra.&lt;/p&gt;

&lt;p&gt;With Momen: &amp;lt;$100 in tools + one week.&lt;/p&gt;

&lt;p&gt;Leo saved 95% in startup cost and now processes car data in minutes, not hours.&lt;/p&gt;

&lt;h2&gt;
  
  
  ✅ Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Momen didn’t just help Leo automate — it helped him build a sellable SaaS product, without writing a line of code.&lt;/p&gt;

&lt;p&gt;This is what’s possible when non-technical founders combine domain expertise with the right no-code + AI platform.&lt;/p&gt;

&lt;p&gt;See the detailed breakdown of his project here: &lt;a href="https://momen.app/blogs/how-this-used-car-business-founder-built-an-ai-automation-saas/" rel="noopener noreferrer"&gt;https://momen.app/blogs/how-this-used-car-business-founder-built-an-ai-automation-saas/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>productivity</category>
      <category>webscraping</category>
    </item>
    <item>
      <title>From Energy Expertise to Working AI App — Without Writing a Line of Code</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Wed, 04 Jun 2025 06:16:11 +0000</pubDate>
      <link>https://forem.com/momen_hq/from-energy-expertise-to-working-ai-app-without-writing-a-line-of-code-169p</link>
      <guid>https://forem.com/momen_hq/from-energy-expertise-to-working-ai-app-without-writing-a-line-of-code-169p</guid>
      <description>&lt;p&gt;When Lucy, a renewable energy founder based in Singapore, set out to build a solar calculator, she wasn’t looking to code. She was looking to solve a real problem — homeowners were overwhelmed with energy choices, and suppliers were struggling to stand out.&lt;/p&gt;

&lt;p&gt;She had the know-how, the formula, and the user pain point. What she didn’t have? A dev team.&lt;/p&gt;

&lt;p&gt;So she turned to no-code — and more specifically, a full-stack builder called Momen — to bring her idea to life in less than a week.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem: Too Much Tech, Not Enough Clarity
&lt;/h2&gt;

&lt;p&gt;Anyone who’s tried to size a solar panel system knows it’s not simple. You need to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Estimate your household power needs&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Factor in daily solar irradiance at your location&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Choose the right mix of batteries, inverters, and panels&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Lucy wanted to make this approachable — ideally through an AI-guided assistant that could talk to users, gather relevant info, and run the calculations behind the scenes.&lt;/p&gt;

&lt;h2&gt;
  
  
  How She Built It: AI-Guided, No-Code, All-in-One
&lt;/h2&gt;

&lt;p&gt;Here’s what her app does:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Conversational Input — Users interact with an AI assistant that dynamically asks questions based on their answers. Have a pool? It’ll ask about pumps. Live in a cloudy area? It adjusts expectations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Real-Time Data Processing — The app uses Google Maps API to convert an address into coordinates, then runs a solar irradiance formula on the backend.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Energy Recommendation — Once the info is gathered, a second AI agent calculates the number of solar panels and batteries needed. All results are shown in a clean UI.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The best part? Lucy built all this using &lt;a href="//momen.app"&gt;Momen&lt;/a&gt;, a visual development tool that lets you create full-stack apps with or without code. She used its agent builder for the conversation logic, conditional views for smart UI rendering, and a native database for appliance and solar data.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Not Just Use Bubble or ChatGPT?
&lt;/h2&gt;

&lt;p&gt;Lucy had tried those paths before. Bubble gave her UI flexibility, but building logic-heavy flows became frustrating. AI tools like GPT were great at answering questions — not running full workflows.&lt;/p&gt;

&lt;p&gt;With Momen, she could:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Write and tweak prompts for logic&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use code where needed, without losing the visual builder&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Keep frontend, backend, and AI all in one tool&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It wasn’t a hacky prototype. It was a real app — production-ready, and fast.&lt;/p&gt;

&lt;h2&gt;
  
  
  For Founders Without Code
&lt;/h2&gt;

&lt;p&gt;If you’re a non-technical founder sitting on years of industry expertise, this is a reminder: you don’t need to be technical to build something valuable.&lt;/p&gt;

&lt;p&gt;Lucy didn’t start with “what tech stack should I use.” She started with “what problem am I solving?” Then used the tool that let her move fast and stay in control.&lt;/p&gt;

&lt;p&gt;👉 Want to see how it works?&lt;br&gt;
Check out the full case study (with screenshots + app breakdown):&lt;br&gt;
🔗 &lt;a href="https://momen.app/blogs/ai-energy-app-built-with-momen/" rel="noopener noreferrer"&gt;https://momen.app/blogs/ai-energy-app-built-with-momen/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>tutorial</category>
      <category>devops</category>
    </item>
    <item>
      <title>Inside Our Stack: Lovable + Cursor + Momen = A Custom Analytics Tool</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Tue, 20 May 2025 09:20:40 +0000</pubDate>
      <link>https://forem.com/momen_hq/how-we-used-lovable-cursor-momen-to-build-our-social-metrics-tool-4g40</link>
      <guid>https://forem.com/momen_hq/how-we-used-lovable-cursor-momen-to-build-our-social-metrics-tool-4g40</guid>
      <description>&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;We needed a better way to track engagement on our content across platforms—our old RPA workflow was limited, messy, and unscalable.&lt;/p&gt;

&lt;p&gt;So we built our own internal dashboard by combining:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Lovable → For generating a clean UI from our product brief&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cursor → To help write custom React chart components (with AI)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="//momen.app"&gt;Momen&lt;/a&gt; → A full-stack no-code platform where we stitched everything together&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why Momen?
&lt;/h2&gt;

&lt;p&gt;Unlike Lovable or Cursor alone, Momen gave us structure, control, and flexibility:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Fully configurable backend (data modeling, workflows, automation)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Code components for embedding real React&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Visual editor for app logic, roles, and data flows&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🛠️ Key features:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Add a content link → auto-fetch and store details&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Visualize engagement over time&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Automated updates via Actionflow&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Fully interactive UI built with real code components&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;⚙️ Built 90% visually. Coded only where it mattered.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  📽️ Want to See It in Action?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;🎥 Watch the 10-min video walkthrough: 
  &lt;iframe src="https://www.youtube.com/embed/UMbtYJeXGGA"&gt;
  &lt;/iframe&gt;
&lt;/li&gt;
&lt;li&gt;✍️ Read the full blog post: 
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://momen.app/blogs/build-dashboard-with-lovable-cursor-momen/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic.quickcreator.io%2Fstatic%2Faaai2zwevf3xuzqz%2Fimage%2F196025f3e82a4869b6601905867fae01.png" height="auto" class="m-0"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://momen.app/blogs/build-dashboard-with-lovable-cursor-momen/" rel="noopener noreferrer" class="c-link"&gt;
            How We Used Lovable + Cursor + Momen to Build Our Social Metrics Tool
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            See how to build a content dashboard with Momen, Lovable and Cursor. Explore how to increase the dev efficiency while gaining flexibility and control.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatics.mylandingpages.co%2Fstatic%2Fqc-site-aaall5kkykxzwyvk%2Fimage%2F6a2e19f71a554fb8ae0dd4affc382141.png"&gt;
          momen.app
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;🌐 Explore the live project: &lt;a href="https://editor.momen.app/tool/L6ARjmem6RK/WEB?code=sgllui0YcYinL" rel="noopener noreferrer"&gt;https://editor.momen.app/tool/L6ARjmem6RK/WEB?code=sgllui0YcYinL&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>vibecoding</category>
      <category>nocode</category>
      <category>webdev</category>
      <category>react</category>
    </item>
    <item>
      <title>We build an AI mental health assistant with 7 AI agents! (no-code needed)</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Wed, 26 Mar 2025 06:51:39 +0000</pubDate>
      <link>https://forem.com/momen_hq/we-build-an-ai-mental-health-assistant-with-7-ai-agents-no-code-needed-45aj</link>
      <guid>https://forem.com/momen_hq/we-build-an-ai-mental-health-assistant-with-7-ai-agents-no-code-needed-45aj</guid>
      <description>&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;AI is no longer just about chatbots—it can provide real, tangible support. This blog explores how an AI-powered mental health assistant was built using Momen, leveraging multi-agent collaboration, real-time data retrieval, and automated workflows.&lt;/p&gt;

&lt;p&gt;A Momen user, Eric, built this assistant to offer personalized crisis intervention. The app retrieves user medical history, symptoms, and emotional state to generate real-time AI-driven support—all while running seamlessly in the background.&lt;/p&gt;

&lt;p&gt;Watch the video breakdown: &lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/y-tDnBIp4VY"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠 How It Works
&lt;/h2&gt;

&lt;p&gt;1️⃣ User Input &amp;amp; Data Retrieval&lt;br&gt;
The user submits an inquiry about their health or emotional state.&lt;/p&gt;

&lt;p&gt;The system retrieves relevant medical history, past diagnoses, and emotional feedback from the database.&lt;/p&gt;

&lt;p&gt;2️⃣ AI-Driven Analysis&lt;br&gt;
Vector search is used to match symptoms with existing intervention strategies.&lt;/p&gt;

&lt;p&gt;AI cross-references symptoms with predefined crisis plans to suggest the most relevant response.&lt;/p&gt;

&lt;p&gt;3️⃣ Personalized Intervention&lt;br&gt;
The system analyzes the user’s condition in real-time and formulates a tailored intervention strategy.&lt;/p&gt;

&lt;p&gt;AI recommendations evolve based on user interactions, improving accuracy over time.&lt;/p&gt;

&lt;h2&gt;
  
  
  🔧 How It Was Built
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🖌 Generating UI with Loveable
&lt;/h3&gt;

&lt;p&gt;Eric used Loveable to generate a UI based on a Product Requirements Document (PRD). Loveable provided an auto-generated UI, which was then refined in Figma before being built in Momen.&lt;/p&gt;

&lt;h3&gt;
  
  
  🏗 Structuring the Database in Momen
&lt;/h3&gt;

&lt;p&gt;A structured database was essential for AI-driven interactions. The app's database stores:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;User medical history &amp;amp; medications&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Journal entries &amp;amp; emotional feedback&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Predefined crisis intervention plans&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Momen's backend ensures fast retrieval and scalability, handling complex user data efficiently.&lt;/p&gt;

&lt;h3&gt;
  
  
  💻 Building the UI with Momen's Drag and Drop Editor
&lt;/h3&gt;

&lt;p&gt;Eric quickly builds out the UI and binds the data in the database to make it interactive.&lt;/p&gt;

&lt;h3&gt;
  
  
  🤖 AI Agents &amp;amp; Actionflows
&lt;/h3&gt;

&lt;p&gt;Unlike a basic chatbot, this app operates through 7 AI agents, each handling a specific function:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Classification Agent → Determines if input is a casual chat or a medical concern.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Symptom Agent → Matches symptoms with crisis intervention strategies.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Chat Agent → Engages users in casual conversations while maintaining context.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Summary Agents (x4) → Summarize user interactions to ensure context-aware responses.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each AI agent runs in Momen’s Actionflows, ensuring seamless automation.&lt;/p&gt;

&lt;h2&gt;
  
  
  ✨ Key Highlights
&lt;/h2&gt;

&lt;p&gt;✔ Multi-Agent Collaboration → AI agents work together to retrieve and analyze user data.&lt;br&gt;
✔ Real-Time Context Awareness → The assistant pulls the latest user data for informed responses.&lt;br&gt;
✔ Seamless Backend Execution → Everything runs in the background, ensuring a smooth experience.&lt;br&gt;
✔ Scalable &amp;amp; Cost-Effective → Built in under 10 hours using Momen’s no-code platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Try It Yourself!
&lt;/h2&gt;

&lt;p&gt;Eric’s project will be soon launched as a Momen template! Clone it to explore the setup and customize it for your own AI-driven applications.&lt;/p&gt;

&lt;p&gt;🔗 Check out the template in Momen → &lt;a href="https://editor.momen.app" rel="noopener noreferrer"&gt;Momen editor&lt;/a&gt;&lt;br&gt;
📺 Watch the full breakdown → &lt;a href="https://youtu.be/y-tDnBIp4VY" rel="noopener noreferrer"&gt;How to build an AI mental health assistant&lt;/a&gt;&lt;br&gt;
📝 Read more on the blog → &lt;a href="https://momen.app/blogs/ai-mental-health-assistant/" rel="noopener noreferrer"&gt;A deep dive of the agentic workflow&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>powerfuldevs</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>DeepSeek + GPT-4o: We build an AI dietitian with no-code</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Mon, 10 Mar 2025 07:07:53 +0000</pubDate>
      <link>https://forem.com/momen_hq/deepseek-gpt-4o-we-build-an-ai-dietitian-with-no-code-n0a</link>
      <guid>https://forem.com/momen_hq/deepseek-gpt-4o-we-build-an-ai-dietitian-with-no-code-n0a</guid>
      <description>&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;We built an AI app with DeepSeek and GPT-4o. See how we did it:&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/0m0sR5UdEv8"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In early 2025, DeepSeek R1 gained widespread recognition for its cost-effectiveness, strong logical reasoning, and open-source nature. Its exceptional coding and language-processing capabilities made it popular among AI enthusiasts. However, its potential extends beyond simple chatbot applications—it can serve as the foundation for custom AI assistants and customer service bots. For startups seeking an affordable alternative to GPT-based APIs, DeepSeek presents a compelling choice.&lt;/p&gt;

&lt;p&gt;Yet, DeepSeek has limitations—it lacks the essential features of an AI agent. Because of this, DeepSeek alone isn't enough to build a fully functional AI agent (as of March 2025). However, with &lt;a href="//momen.app"&gt;Momen’s integrated AI agent builder&lt;/a&gt; and BYOM (Bring Your Own Model) support, we integrated DeepSeek into an &lt;a href="https://momen.app/blogs/understanding-ai-agents-beginners-guide/" rel="noopener noreferrer"&gt;agentic workflow&lt;/a&gt; without writing any code. In this guide, we’ll demonstrate how to build a diet assistant app called "Angry Dietitian", combining DeepSeek’s capabilities in reasoning and text generation, with GPT-4o for image processing.&lt;/p&gt;

&lt;p&gt;Here's a preview of the DeepSeek app we build with Momen :&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/anLKwgbjb6k"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Why DeepSeek for AI App Development?
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Cost effectiveness: DeepSeek R1 offers a significantly cheaper alternative to other AI models:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;OpenAI GPT-4o: $5.50 per 1M tokens (weighted cost, assuming a 1.5 input/output ratio).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;DeepSeek R1: $1.21 per 1M tokens—78% cheaper than GPT-4o.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Advanced reasoning capabilities: DeepSeek R1 is optimized for complex reasoning tasks, making it suitable for AI applications requiring logical processing and in-depth analysis.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Efficient Resource Utilization: Unlike some larger models, DeepSeek R1 can run efficiently on consumer-grade hardware, making it more accessible for AI developers and startups.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  What DeepSeek Can’t Do (And How to Work Around It)
&lt;/h3&gt;

&lt;p&gt;While DeepSeek excels in reasoning and cost efficiency, it lacks native support for (as of March 2025):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Multimodal inputs (e.g., image recognition).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Native JSON structured output.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Tool invocation for dynamic &lt;a href="https://docs.momen.app/data/api" rel="noopener noreferrer"&gt;API calls&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To overcome these limitations, we use Momen’s AI agent builder to integrate multiple AI models into a single application.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why Momen? The Power of BYOM (Bring Your Own Model)
&lt;/h3&gt;

&lt;p&gt;Momen enables AI agent orchestration—allowing users to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Integrate their preferred AI models (e.g., DeepSeek, GPT-4o, GPT-4o mini).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;GPT-4o and GPT-4o mini are built-in in Momen, but you can also &lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://docs.momen.app/actions/ai/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdocs.momen.app%2Fassets%2Fimages%2Fofficialwebsite.png" height="450" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://docs.momen.app/actions/ai/" rel="noopener noreferrer" class="c-link"&gt;
            AI | Momen Docs
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Based on LLMs, leveraging RAG and tool invocation, you can create customized business AI apps and agents.
          &lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    &amp;lt;div class="color-secondary fs-s flex items-center"&amp;gt;
        &amp;lt;img
          alt="favicon"
          class="c-embed__favicon m-0 mr-2 radius-0"
          src="https://docs.momen.app/favicon.ico"
          loading="lazy" /&amp;gt;
      docs.momen.app
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;/div&gt;
&lt;br&gt;
.

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Generate structured JSON outputs (ideal for frontend display and inter-agent collaboration).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Deploy your AI app with one click, no-code needed.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With Momen’s new BYOM feature, you can configure your AI agent using your own deployed DeepSeek model—ensuring greater control, reliability, and reduced downtime.&lt;/p&gt;

&lt;h2&gt;
  
  
  Core Functions
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Main Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;AI capabilities:&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;DeepSeek-powered analysis: The app leverages DeepSeek’s text generation and reasoning abilities to provide personalized dietary suggestions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multi-agent collaboration: GPT-4o handles image recognition, while DeepSeek provides text-based insights.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;AI message storage: Momen has default tables in the database that log each conversation, ensuring debugging and auditing.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Customizable UI: Build the UI tailored to your needs.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Step-by-Step: Build the AI diet app
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Data
&lt;/h4&gt;

&lt;p&gt;This app requires 5 tables, all of which are default tables that are automatically created when you set up a new project and configure the AI. This means no additional tables need to be manually created.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4j002efkqrstmys776m2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4j002efkqrstmys776m2.png" alt=" " width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Account table: Stores user information. We need to add some fields to store their body data, like height, weight, date of birth, fitness goals etc.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The following four tables are automatically generated when configuring the AI:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Message Content: Stores the content of each message from the AI. In this template, it records the reasoning and output of DeepSeek.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Conversation: Tracks the status of each conversation, including the user, the AI model, input data, conversation status, and any error messages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Tool Usage: Typically records which tools the AI has invoked, but for this case, this table is not used.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Message: Tracks the token usage for each message in a conversation. You can view how many tokens were used by the user, the AI, or the system.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  AI Configuration
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Configuring GPT-4o (Image Processing)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Input: User-uploaded food images.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prompt Setup: Configured as a "food analyzer" to extract food type and estimated weight.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Output Format: JSON structured output for better agent collaboration.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F06s3d39yqmphigd6h5j2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F06s3d39yqmphigd6h5j2.png" alt=" " width="800" height="566"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once it's done. We can debug on the right side to see if it works.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwpeko8wz7zkmhup0xdgi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwpeko8wz7zkmhup0xdgi.png" alt=" " width="800" height="654"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Integrating DeepSeek (Diet Analysis)&lt;/strong&gt;&lt;br&gt;
Note: ⚠️ You must deploy your own DeepSeek model through a cloud provider (e.g., Azure, AWS) when before configuring DeepSeek.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Deploy your model: Head to the cloud providers, for example, Azure. Sign in, choose the AI foundry service. Search and deploy your own model. You'll find the endpoint and key after you deploy.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Set up in Momen&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Navigate to "Add Model" in Momen.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Copy the API endpoint and key from the cloud provider.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Paste the credentials into Momen’s model integration page.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Select the model when configuring the agent.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2bn4tadevpodlsuot6hx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2bn4tadevpodlsuot6hx.png" alt=" " width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn2h3ezxea9li8rkvfqkk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn2h3ezxea9li8rkvfqkk.png" alt=" " width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Input: User body data (from the Account table) and food details (from GPT-4o).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Output: Personalized diet suggestions based on streaming output.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmbh8nifsrt03y0x4djzw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmbh8nifsrt03y0x4djzw.png" alt=" " width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's an example of the prompt:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgiywvpemei2zqgy4qct6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgiywvpemei2zqgy4qct6.png" alt=" " width="800" height="495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  UI Design &amp;amp; Data Binding
&lt;/h4&gt;

&lt;p&gt;Once the AI configuration is complete, we move on to UI building. The app consists of three main pages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Sign Up/Sign In Page – User authentication&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Form Page – Collects user body data&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Roaster Page – The main interaction hub where AI agents analyze the user's food&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h5&gt;
  
  
  Sign up/ Sign in
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6p7zk00x49tf1dhv90fr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6p7zk00x49tf1dhv90fr.png" alt=" " width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This page allows users to create an account or log in.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Components:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A title at the top&lt;/p&gt;

&lt;p&gt;A tab view with two options: "Sign Up" and "Sign In"&lt;/p&gt;

&lt;p&gt;Two labels and input boxes under each tab (for email and password)&lt;/p&gt;

&lt;p&gt;A button to handle authentication&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Functionality:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The button is linked to user sign-up and login actions&lt;/p&gt;

&lt;p&gt;Once authenticated, the user is redirected to the Form Page&lt;/p&gt;

&lt;h5&gt;
  
  
  Form Page
&lt;/h5&gt;

&lt;p&gt;This page collects key body metrics required for dietary recommendations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F12tgdbj5czkyh0w4p3fr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F12tgdbj5czkyh0w4p3fr.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Components:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Input boxes for height, weight, date of birth, and fitness goals&lt;/p&gt;

&lt;p&gt;Labels corresponding to each field&lt;/p&gt;

&lt;p&gt;A button to submit the data&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Functionality:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The button updates the Account Table, storing the user’s body data&lt;/p&gt;

&lt;p&gt;After submission, the user is taken to the Roaster Page&lt;/p&gt;

&lt;h5&gt;
  
  
  Roaster
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1htcz1tnbpwz6jbankt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1htcz1tnbpwz6jbankt.png" alt=" " width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the core interface where AI agents analyze food and provide feedback.&lt;/p&gt;

&lt;p&gt;The Roaster Page has a central circular UI design, consisting of:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;A large circle in the center – Displays AI results and changes based on interaction.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multiple smaller circles surrounding it – Each displays a key user body metric.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Small circles - Displaying user body metric&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Surrounding the main interaction area are small circles, each showing an essential body metric. These values are dynamically pulled from the Account Table and displayed in real-time. If the user updates their body data, the circles automatically refresh.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Large center circle - AI interaction area&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This is the main interaction zone, where the AI agents analyze food images and provide suggestions. It's a conditional view with four cases: before upload, uploaded, roasting, roasted. The conditions will be the page state.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Before upload:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Components:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Image Picker: Allows users to upload a food image.&lt;/p&gt;

&lt;p&gt;Prompt Text: “Show me your food!”&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Action: Once an image is uploaded, the page state is updated (state = uploaded).&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;Uploaded:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Components:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Displays the selected image in the circle.&lt;/p&gt;

&lt;p&gt;A "Roast" button appears, allowing users to initiate AI analysis.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Action: Clicking "Roast" triggers:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Page state updates to "roasting" (state = roasting).&lt;/p&gt;

&lt;p&gt;"The Eye" (GPT-4o) is called, processing the image into structured text (JSON).&lt;/p&gt;

&lt;p&gt;If the image is invalid (not food), an error message is displayed.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Roasting:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Components: An animated loading effect to indicate AI processing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Action:&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;GPT-4o extracts structured data (food type &amp;amp; estimated weight).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If the image does not contain food, a toast notification appears:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If successful:&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Page state updates to "roasted" (state = roasted).&lt;/p&gt;

&lt;p&gt;The DeepSeek agent ("The Roaster") is triggered, processing the food data into dietary advice.&lt;/p&gt;

&lt;p&gt;The reasoning process is stored in the reason variable.&lt;/p&gt;

&lt;p&gt;The final AI suggestion is stored in the answer variable.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4v2wbqsysusceqr3s3n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4v2wbqsysusceqr3s3n.png" alt=" " width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Roasted:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Components:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Dietary recommendations displayed inside the central circle.&lt;/p&gt;

&lt;p&gt;A "Why?" button appears, revealing the AI reasoning process in a modal.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Actions:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The dietary advice is bound to the answer variable and displayed.&lt;/p&gt;

&lt;p&gt;Clicking “Why?” opens a modal showing the reasoning stored in the reason variable.&lt;/p&gt;

&lt;h3&gt;
  
  
  Preview &amp;amp; Publish
&lt;/h3&gt;

&lt;p&gt;Once everything is set up. Click "Mirror" to check UI and interactions. Finally, click "publish" to deploy your project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cost &amp;amp; Time Estimate
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Cost
&lt;/h3&gt;

&lt;p&gt;Since this project involves two AI agents working together, you'll need Momen’s &lt;a href="//momen.app/pricing"&gt;Basic plan or higher&lt;/a&gt;, starting at $33 per month. The Bring Your Own Model (BYOM) feature is available for free until May 30th 2025, allowing you to integrate your own deployed DeepSeek model at no additional cost. If you're building an AI app exclusively with DeepSeek, you can use Momen for free—no subscription required.&lt;/p&gt;

&lt;p&gt;However, keep in mind that deploying your own model requires a cloud provider, such as Azure, and any associated costs will be covered by you.&lt;/p&gt;

&lt;h3&gt;
  
  
  Time
&lt;/h3&gt;

&lt;p&gt;The entire build process, from setup to deployment, takes approximately 1.5 hours.&lt;/p&gt;

&lt;h2&gt;
  
  
  Template
&lt;/h2&gt;

&lt;p&gt;We've made this project into a template. You can explore and customize it here: &lt;a href="https://o2w08d4qv40yk.villa.momen.app" rel="noopener noreferrer"&gt;https://o2w08d4qv40yk.villa.momen.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The usage guide: &lt;a href="https://docs.momen.app/template/angry-dietitian" rel="noopener noreferrer"&gt;https://docs.momen.app/template/angry-dietitian&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This is just the starting point. You can expand your AI app by adding features like payment integration to monetize it. DeepSeek isn’t just for text generation—it can power AI apps tailored to your needs.&lt;/p&gt;

&lt;p&gt;If you're ready to build, bring your model to Momen and start creating—no coding required!&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

</description>
      <category>webdev</category>
      <category>deepseek</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to build an online store with Momen: No transaction fees, full customization</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Wed, 05 Mar 2025 02:32:44 +0000</pubDate>
      <link>https://forem.com/momen_hq/how-to-build-an-online-store-with-momen-no-transaction-fees-full-customization-528g</link>
      <guid>https://forem.com/momen_hq/how-to-build-an-online-store-with-momen-no-transaction-fees-full-customization-528g</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In 2025, the &lt;a href="https://ledgergurus.com/ecommerce-trends-for-2025/#:~:text=The%20ecommerce%20market%20is%20bouncing,16.4%25%20of%20total%20retail%20sales.&amp;amp;text=Holiday%20numbers%20back%20this%20up,%2Dyear%2C%20according%20to%20MasterCard." rel="noopener noreferrer"&gt;eCommerce is bouncing back&lt;/a&gt; even stronger. Customers now make decision based on the internet. Whether you are selling hadcraft goods, digital products or a new brand, having an online presence is crucial for the growth. In this blog, we’ll walk you through how to build an easy online store with Momen.&lt;/p&gt;

&lt;h3&gt;
  
  
  What Makes Momen a Better Choice
&lt;/h3&gt;

&lt;p&gt;Popular platforms like Shopify, Wix, and WooCommerce make it easy to start but come with serious downsides:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;High transaction fees: &lt;a href="https://www.nerdwallet.com/article/small-business/shopify-pricing" rel="noopener noreferrer"&gt;Shopify&lt;/a&gt;’s basic plan costs $29/month, but if you make $5,000 in sales from 100 customers, you’ll end up paying at least $204/month in platform fees and transaction charges.&lt;/li&gt;
&lt;li&gt;Limited &lt;a href="https://momen.app/blogs/a-journey-from-wordpress-to-momen-how-this-influencer-built-an-online-course-website/" rel="noopener noreferrer"&gt;customization&lt;/a&gt;: Many e-commerce builders lock you into pre-set themes and functionalities. You’ll need plugins or developers for custom features.&lt;/li&gt;
&lt;li&gt;Scaling Constraints: As your business grows, you may need more features — many of which come as expensive add-ons or higher-tier plans.
If you build with &lt;a href="http://momen.app/" rel="noopener noreferrer"&gt;Momen&lt;/a&gt;, you own your store, your data, and your business logic with no code — no unnecessary costs or platform restrictions. You can keep 100% of your revenue. Owning full control of your design and logic. And Momen’s built-in backend make sure it’s scalable from day 1.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Core Features of Your Online Store
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Core features
&lt;/h3&gt;

&lt;p&gt;In this online store we build, you can get the following core functions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Product management: Add, edit, and organize products dynamically.
Shopping cart &amp;amp; checkout: Let customers add/remove items and complete purchases with Stripe integration.&lt;/li&gt;
&lt;li&gt;User account system: Allow users to sign up, log in, and save their order history.&lt;/li&gt;
&lt;li&gt;Payment integration: Process payments directly via Stripe without needing extra coding.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How We’ll Build It with Momen
&lt;/h3&gt;

&lt;p&gt;The process of building this online store will be divided into data, UI and payment logic.&lt;/p&gt;

&lt;h5&gt;
  
  
  Setting Up Data Model
&lt;/h5&gt;

&lt;p&gt;The foundation of any app is its data model. For our store, we need four key tables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Account Table: Stores user information.&lt;/li&gt;
&lt;li&gt;Product Table: Holds product details like name, price, description, and images.&lt;/li&gt;
&lt;li&gt;Shopping Cart Table: Tracks selected items, quantities, and prices.&lt;/li&gt;
&lt;li&gt;Order Table: Stores order details and payment status.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frks5dqgchfcpfmxl77kd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frks5dqgchfcpfmxl77kd.png" alt=" " width="800" height="426"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Setting Up Data Relationships
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Products → Shopping Cart (1:N): A product can be in multiple carts.&lt;/li&gt;
&lt;li&gt;Accounts → Orders (1:N): A user can place multiple orders.&lt;/li&gt;
&lt;li&gt;Accounts → Shopping Cart (1:N): A user can have multiple cart records.&lt;/li&gt;
&lt;li&gt;Orders → Shopping Cart (1:N): A single order can include multiple cart items.
Once the data model is in place, we can add product data in the database. Then we can move to UI design.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  UI &amp;amp; Data Binding
&lt;/h4&gt;

&lt;h5&gt;
  
  
  Navigation &amp;amp; Login Page
&lt;/h5&gt;

&lt;p&gt;The login page consists of a navigation bar and a login/signup window.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Navigation Bar: A fixed bar containing the store name, cart icon, and login/logout buttons.&lt;/li&gt;
&lt;li&gt;Login/Signup Window: Uses a conditional view to toggle between login and registration forms.&lt;/li&gt;
&lt;li&gt;Data Binding: Inputs are bound to the Account Table to validate user credentials.
Once logged in, users are redirected to the product listing page.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa9wonwrrggkfvwpmnd5g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa9wonwrrggkfvwpmnd5g.png" alt=" " width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Product Listing Page
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Displaying Products: Uses a dynamic list bound to the Product Table.&lt;/li&gt;
&lt;li&gt;Product Components: Each item container includes an image, name, description, price, and an “Add to Cart” button.&lt;/li&gt;
&lt;li&gt;Conditional Button Logic: If a product is already in the cart, the button changes to indicate it’s been added.&lt;/li&gt;
&lt;li&gt;Action Handling: Clicking “Add to Cart” updates the Shopping Cart Table and redirects users to the cart page.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyxffiomwpv9cuf13wfwc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyxffiomwpv9cuf13wfwc.png" alt=" " width="800" height="446"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Shopping Cart Page
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Cart Items: Displays products added to the cart with quantity controls.&lt;/li&gt;
&lt;li&gt;Quantity Adjustments: Clicking “+” increases quantity and updates total price; clicking “-” removes items if quantity reaches zero.&lt;/li&gt;
&lt;li&gt;Data Filtering: Ensures only the logged-in user’s cart data is displayed.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fion6yhx4v4lynhsyfhos.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fion6yhx4v4lynhsyfhos.png" alt=" " width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Payment Processing
&lt;/h4&gt;

&lt;h5&gt;
  
  
  Checkout Button &amp;amp; Stripe Integration
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Activating Stripe: Set up API keys and connect payments to the Order Table.
Payment Workflow:&lt;/li&gt;
&lt;li&gt;User clicks Checkout.&lt;/li&gt;
&lt;li&gt;If the cart is empty, a warning appears.&lt;/li&gt;
&lt;li&gt;If items exist, an order is created and cart items are linked to it.&lt;/li&gt;
&lt;li&gt;Stripe processes payment.
On success, the order status updates, and the cart clears.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz7mv8awxn10vuauv0aw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz7mv8awxn10vuauv0aw.png" alt=" " width="800" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Final Preview &amp;amp; Testing
&lt;/h4&gt;

&lt;p&gt;With everything set up, you can click “Mirror” to test if the UI looks nice. And you can click “preview” to mock the real web environment to test the flow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Sign up/login.&lt;/li&gt;
&lt;li&gt;Browse and add products to the cart.&lt;/li&gt;
&lt;li&gt;Adjust quantities.&lt;/li&gt;
&lt;li&gt;Proceed to checkout and complete payment.&lt;/li&gt;
&lt;li&gt;Verify the database updates accordingly.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Cost &amp;amp; Time Estimate
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Time
&lt;/h3&gt;

&lt;p&gt;For a non-technical, building such an online store takes about 2–3 hours. This is a demo-level project which doesn’t contain inventory tracking or order management. You can expand features incrementally, like product detail pages, order tracking or even AI customer service as your business grows.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cost
&lt;/h3&gt;

&lt;p&gt;If you want to integrate with payment, you only need to pay for Momen’s Pro plan starting from $85 per month, no transaction fee needed. If you run out of your computing resources, pay as you needed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Preview
&lt;/h2&gt;

&lt;p&gt;If you want a more detailed building guide, we made a 40-minute step-by-step guide so you can build along with:&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/cyyJQCUyXlg"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This demo store is just the beginning. With Momen, you can scale your store into a &lt;a href="https://momen.app/blogs/million-sku-business-with-no-code/" rel="noopener noreferrer"&gt;full-fledged eCommerce platform&lt;/a&gt; — complete with on-page SEO, AI-powered recommendations, inventory tracking, and community features.&lt;/p&gt;

&lt;p&gt;🚀 Start building your online business today with Momen: https:/momen.app&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
