<?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: Andrew Baisden</title>
    <description>The latest articles on Forem by Andrew Baisden (@andrewbaisden).</description>
    <link>https://forem.com/andrewbaisden</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%2F333889%2F7efc6302-08b1-40f6-aa99-c6981971a011.png</url>
      <title>Forem: Andrew Baisden</title>
      <link>https://forem.com/andrewbaisden</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/andrewbaisden"/>
    <language>en</language>
    <item>
      <title>AI Agents That Actually Work, Building Reliable UI Automation with Amazon Nova Act</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Thu, 12 Mar 2026 16:49:25 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/ai-agents-that-actually-work-building-reliable-ui-automation-with-amazon-nova-act-390o</link>
      <guid>https://forem.com/andrewbaisden/ai-agents-that-actually-work-building-reliable-ui-automation-with-amazon-nova-act-390o</guid>
      <description>&lt;p&gt;AI agents are everywhere these days, but if you’ve tried to get them out of the demo and into production, then you’ve probably hit the same wall, which is production reality. A demo can work once; production has to work all the time, under shifting UIs, flaky network conditions and messy edge cases that are never included in the examples. Nowhere is that gap clearer than in browser and UI automation, where workflows remain painfully manual because traditional approaches are weak, break almost continuously as interfaces evolve, and are expensive to maintain.&lt;/p&gt;

&lt;p&gt;Even modern setups usually become fragile Selenium scripts that break when a selector changes, endless maintenance to get tests passing and UI updates turning automation into someone’s full-time job without most people noticing. The real opportunity is not a better demo, it’s something much more practical. Dependable agents that automate repetitive UI work at scale. That’s the gap Amazon is targeting with a product called Amazon Nova Act, which centres around #NormcoreAgents, the mission-critical automation that teams really need in prod.&lt;/p&gt;

&lt;p&gt;In this article, we are going to cover:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Why browser agents fail in production&lt;/li&gt;
&lt;li&gt;How Nova Act approaches dependable UI automation&lt;/li&gt;
&lt;li&gt;A real developer workflow from Playground to IDE and then production&lt;/li&gt;
&lt;li&gt;Practical use cases, including QA testing and business automation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This article is sponsored by Amazon.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is Amazon Nova Act?
&lt;/h2&gt;

&lt;p&gt;Amazon Nova Act is a service for creating and managing robust AI agents that automate UI workflows over a browser. Think of it as "use the computer", but production-grade.&lt;/p&gt;

&lt;p&gt;At a high level, Nova Act is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A developer-first way to create UI automation agents&lt;/li&gt;
&lt;li&gt;Trained and built for actual workflows (QA testing, data entry, extraction, checkout flows)&lt;/li&gt;
&lt;li&gt;For success at scale, not small occasional victories&lt;/li&gt;
&lt;li&gt;Powered by a custom Amazon Nova 2 Lite model&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And the important point is that Nova Act is not just a model. It’s a complete workflow from prototype to build/debug to deploy/operate, centred around the fact that UI automation is hard because reliability is hard.&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%2Fgp55d3hkso7bbys0foyf.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%2Fgp55d3hkso7bbys0foyf.png" alt="Amazon Nova Act Homepage" width="800" height="401"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Reliability Is The Hardest Problem In AI Agent Development
&lt;/h2&gt;

&lt;p&gt;If you have ever played around with agentic browser automation, I’m sure that you are familiar with the common failure modes such as flaky behaviour that succeeds once and fails on the next run, workflows that break as soon as a layout or button label changes, awful integration with logging and observability tooling, and the consistent challenge of turning a promising tech demo into something deployable and observable. What appears impressive in isolation is all too often exposed as small under real-world conditions.&lt;/p&gt;

&lt;p&gt;At the heart of this matter is a simple problem, which is that intelligence alone doesn’t ship. What actually ships is a system that’s debuggable, observable, repeatable, and safe to run in real workflows. Now, Nova Act’s positioning is something like this, where it can stop stitching random components together and hoping they behave, instead, build UI automation on a foundation designed explicitly for production safeguards.&lt;/p&gt;

&lt;h2&gt;
  
  
  Developer Workflow: From Playground to Production
&lt;/h2&gt;

&lt;p&gt;Nova Act’s builder experience is meant to feel like the workflow developers actually want:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Prove it quickly&lt;/li&gt;
&lt;li&gt;Move into an IDE&lt;/li&gt;
&lt;li&gt;Ship when ready&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%2Fjm2zq5md1f71rm4fenfx.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%2Fjm2zq5md1f71rm4fenfx.png" alt="Nova Act developer workflow: prototype automation in the Playground, refine it in your IDE, add reliability checks, and deploy agents into production." width="800" height="1200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Prototype In The Nova Act Playground
&lt;/h3&gt;

&lt;p&gt;The Playground is where you can go from idea to working workflow without bootstrapping a framework.&lt;/p&gt;

&lt;p&gt;A typical flow could look like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Enter the URL you want to automate&lt;/li&gt;
&lt;li&gt;Describe the workflow in natural language&lt;/li&gt;
&lt;li&gt;Run it in a live browser session&lt;/li&gt;
&lt;li&gt;Iterate until you have something reliable enough to refine&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%2F1yx9pvmcczc8qca0fzi5.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%2F1yx9pvmcczc8qca0fzi5.png" alt="Amazon Nova Act Playground" width="800" height="380"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example prompt you might try in the Playground (QA smoke test):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In this upcoming example, we can use the AI agent to browse the Amazon website. A workflow prompt is shown below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Go to https://www.amazon.com/
Navigate to the Amazon Basics page
Verify that the page loaded and that the "Electronics" button section is visible
Take a screenshot and return a short pass/fail summary
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And in the screenshot, we can see what that looks like in Amazon Act Playground right before we initiate the first action.&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%2Fru6ypt9whsecjy2v29kc.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%2Fru6ypt9whsecjy2v29kc.png" alt="Amazon Act Playground Shopping Start" width="800" height="632"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this screenshot, we can see how we can use Amazon Act Playground to browse the Amazon e-commerce website.&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%2F5sdp47gmsih3wbos61j5.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%2F5sdp47gmsih3wbos61j5.png" alt="Amazon Act Playground shopping on Amazon" width="800" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It's worth noting that the key here isn’t "wow, it clicked buttons." Instead, it’s supposed to be "can I get a workflow that behaves predictably and gives me useful output?" And that's the brilliance of using AI agents: their ability to complete tasks, giving us the ability to offload tasks, freeing up time to work on more pressing matters.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Export And Refine In Your IDE
&lt;/h3&gt;

&lt;p&gt;Once your Playground workflow is done, the intended path is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Export the generated Python script&lt;/li&gt;
&lt;li&gt;Create an API key on the Nova Act Dev Tools page&lt;/li&gt;
&lt;li&gt;Install the Nova Act IDE extension (VS Code, Cursor, or Kiro)&lt;/li&gt;
&lt;li&gt;Import the workflow into Builder Mode&lt;/li&gt;
&lt;li&gt;Run step-by-step with a live browser preview and logs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here you can see what the Download Python script option in Playground looks like:&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%2Ftzxiqqqog3cplcateiwh.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%2Ftzxiqqqog3cplcateiwh.png" alt="Export Python script option in Amazon Playground" width="800" height="248"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A &lt;code&gt;Shop_on_Amazon.py&lt;/code&gt; file was exported with this code, which is what our agent is using behind the scenes, as it follows our commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;nova_act&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;NovaAct&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;
&lt;span class="c1"&gt;# Browser args enables browser debugging on port 9222.
&lt;/span&gt;&lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;environ&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;NOVA_ACT_BROWSER_ARGS&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;--remote-debugging-port=9222&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="c1"&gt;# Get your API key from https://nova.amazon.com/act
# Set API Key using Set API Key command (CMD/Ctrl+Shift+P) or pass directly to constructor below.
# Initialize Nova Act with your starting page.
&lt;/span&gt;&lt;span class="n"&gt;nova&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;NovaAct&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;starting_page&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://www.amazon.com/&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;headless&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;tty&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;False&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;nova_act_api_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;&amp;lt;your_api_key&amp;gt;&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;  &lt;span class="c1"&gt;# Replace with your actual API key
&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;# Running nova.start will launch a new browser instance.
# Only one nova.start() call is needed per Nova Act session.
&lt;/span&gt;&lt;span class="n"&gt;nova&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="c1"&gt;# To learn about the difference between nova.act and nova.act_get visit
# https://github.com/aws/nova-act?tab=readme-ov-file#extracting-information-from-a-web-page
&lt;/span&gt;&lt;span class="n"&gt;nova&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;act_get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Navigate to the Amazon Basics page. Verify that the page loaded and that the &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Electronics&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt; button section is visible. Take a screenshot and return a short pass/fail summary. &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;# Leaving nova.stop() commented keeps NovaAct session running.
# To stop a NovaAct instance uncomment nova.stop() - note this also shuts down the browser instantiated by NovaAct so subsequent nova.act() calls will fail.
# nova.stop()
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The code is self-explanatory, thanks to the comments and essentially follows the workflow we made.&lt;/p&gt;

&lt;p&gt;This is the Amazon Nova Act Dev Tools page, which shows API key creation:&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%2Fikcjttfszrglqg4kgsrg.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%2Fikcjttfszrglqg4kgsrg.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1772556776/Amazon_Nova_Act_API_Keys_udb4ug.png" width="800" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And this is what the Nova Act IDE extension looks like when installing in VS Code/Cursor/Kiro:&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%2Fjq37dl5tsn1apcoz4dq4.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%2Fjq37dl5tsn1apcoz4dq4.png" alt="Amazon Nova Act VS Code Extension" width="800" height="503"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Security best practice: don’t leak your API key
&lt;/h4&gt;

&lt;p&gt;Amazon Nova’s docs emphasise a familiar rule, which is to never expose API keys client-side.&lt;/p&gt;

&lt;p&gt;Here’s the safe baseline for different OS and environments:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Mac/Linux&lt;/span&gt;
&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;NOVA_API_KEY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"your_key_here"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Windows PowerShell&lt;/span&gt;
&lt;span class="nv"&gt;$env&lt;/span&gt;:NOVA_API_KEY&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"your_key_here"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And in Python:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;

&lt;span class="n"&gt;api_key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getenv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;NOVA_API_KEY&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="nc"&gt;RuntimeError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Set NOVA_API_KEY in your environment&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Using the Amazon Nova Act VS Code Extension
&lt;/h4&gt;

&lt;p&gt;This is what the VS Code extension looks like once you have installed it. For authentication to work, you must either create an API Key or use IAM authentication; then you will have full access to the Builder Mode.&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%2F5l6tfvo2bf5eythridrk.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%2F5l6tfvo2bf5eythridrk.png" alt="Amazon Nova Act Builder Mode VS Code extension" width="800" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can mirror our Playground experience locally in our IDE using Amazon Nova, which is how most developers are likely to use the platform. We will use API Key Authentication to run our shop on Amazon Playground example locally.&lt;/p&gt;

&lt;p&gt;Just make sure that you obviously have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your development environment set up with an IDE&lt;/li&gt;
&lt;li&gt;Python installed on your computer&lt;/li&gt;
&lt;li&gt;The Amazon Nova extension is installed in your IDE&lt;/li&gt;
&lt;li&gt;An Amazon Nova account and API Key&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then, create a folder for the project on your computer, such as "Amazon Nova Demo". Only two files are needed now, a &lt;code&gt;Shop_on_Amazon.py&lt;/code&gt; file and an &lt;code&gt;.env&lt;/code&gt; file. The Python file will contain the code to run the build, and the environment file will store your Amazon Nova API key.&lt;/p&gt;

&lt;p&gt;See the code below. The files created should be put inside the Amazon Nova Demo folder:&lt;/p&gt;

&lt;p&gt;We modified and updated the &lt;code&gt;Shop_on_Amazon.py&lt;/code&gt; file from earlier:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;dotenv&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;load_dotenv&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;nova_act&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;NovaAct&lt;/span&gt;

&lt;span class="nf"&gt;load_dotenv&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="n"&gt;api_key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getenv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;NOVA_ACT_API_KEY&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="nc"&gt;ValueError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;NOVA_ACT_API_KEY not found&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;environ&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;NOVA_ACT_BROWSER_ARGS&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;--remote-debugging-port=9222&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

&lt;span class="n"&gt;nova&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;NovaAct&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;starting_page&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://www.amazon.com/&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;headless&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;False&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;   &lt;span class="c1"&gt;# better for interactive debugging in Builder Mode
&lt;/span&gt;    &lt;span class="n"&gt;tty&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;nova_act_api_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;api_key&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;nova&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;nova&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;act_get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
Navigate to the Amazon Basics page.
Verify that the page loaded and that the &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Electronics&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt; button section is visible.
Take a screenshot and return a short pass/fail summary.
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;nova&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stop&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This file runs better in build mode and imports our API key.&lt;/p&gt;

&lt;p&gt;Our &lt;code&gt;.env&lt;/code&gt; file contains only one key: our Amazon Nova API key.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;NOVA_ACT_API_KEY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"PUT_YOUR_AMAZON_NOVA_API_KEY_HERE"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we need to click on the button which lets us open a Python file it looks like an open folder, so select the &lt;code&gt;Shop_on_Amazon.py&lt;/code&gt; file and load it, and you should see the file loaded in the Build mode:&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%2Fsm5lk8dmoqlsg7ggug6h.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%2Fsm5lk8dmoqlsg7ggug6h.png" alt="Amazon Nova Act Build Mode loaded with Python Script" width="800" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now hit the "Run all cells" button to run the Python script. Running the script gave me a live view of the Amazon website inside of VS Code, and it also opened my Chrome browser at the same time as the agent ran through the process. Of course, this can be configured so you only have the live view or have the agent run in an external browser.&lt;/p&gt;

&lt;p&gt;This screenshot shows the build process right at the beginning as the Amazon website is opened:&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%2F36a1h4x7ajw8uk72opjj.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%2F36a1h4x7ajw8uk72opjj.png" alt="Shop on Amazon Build step start" width="800" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this screenshot, we can see the build going through the steps:&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%2F91uzmoekle3l6wptz85n.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%2F91uzmoekle3l6wptz85n.png" alt="Shop on Amazon Build step process" width="800" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The text with the purple background is for the captions, which can be turned on or off.&lt;/p&gt;

&lt;h4&gt;
  
  
  Example: What the exported script refinement often looks like
&lt;/h4&gt;

&lt;p&gt;Exact Nova Act SDK details vary by environment/version, and the extension can generate its own structure, so think of this snippet as illustrative. The idea is to turn natural language steps into something you can version, test, and maintain:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
Example structure for refining an exported Nova Act workflow script.

Goal:
- keep steps explicit
- add checkpoints (assertions)
- capture artifacts (screenshots/logs)
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;dataclasses&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;dataclass&lt;/span&gt;

&lt;span class="nd"&gt;@dataclass&lt;/span&gt;
&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;SmokeTestResult&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;passed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bool&lt;/span&gt;
    &lt;span class="n"&gt;reason&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;

&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;assert_visible&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="c1"&gt;# Replace with Nova Act / browser tool assertion helpers from the SDK/extension.
&lt;/span&gt;    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;is_visible&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="nc"&gt;AssertionError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Expected &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt; to be visible (&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;selector&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;)&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;run_smoke_test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;agent&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;agent&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt; represents your Nova Act runtime/driver from the generated script.
    Replace &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;agent.page&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt; access patterns with what your generated script provides.
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
    &lt;span class="n"&gt;page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;agent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;page&lt;/span&gt;

    &lt;span class="c1"&gt;# 1) Navigate
&lt;/span&gt;    &lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;goto&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://example.com&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;# 2) Log in (illustrative)
&lt;/span&gt;    &lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;input[name=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;email&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;]&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;agent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;secrets&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;EMAIL&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
    &lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;input[name=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;password&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;]&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;agent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;secrets&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;PASSWORD&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
    &lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;button[type=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;submit&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;]&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;# 3) Navigate to Pricing
&lt;/span&gt;    &lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;a[href=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;/pricing&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;]&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;# 4) Assertions (critical for QA)
&lt;/span&gt;    &lt;span class="nf"&gt;assert_visible&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;h1&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Pricing page header&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nf"&gt;assert_visible&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;button:has-text(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Get Started&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;)&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Get Started button&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;# 5) Capture artifact
&lt;/span&gt;    &lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;screenshot&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;artifacts/pricing-page.png&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nc"&gt;SmokeTestResult&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;passed&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;reason&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Pricing page loaded and key UI elements visible&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is important because assertions transform "it seemed to work" into "it definitely worked," whereas artifacts (gathering relevant screenshots, logs, etc.) allow failures to be actionable rather than mysterious and explicit checkpoints eliminate flakiness by specifying exactly what success looks like at each step in the workflow.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Deploy And Run Agents In Production
&lt;/h3&gt;

&lt;p&gt;Once your workflow is stable locally, Nova Act is able to deploy and operate it using AWS services and tooling. Before you can deploy the agent, you have to make sure that you have these prerequisites:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;An Amazon/AWS account&lt;/li&gt;
&lt;li&gt;The AWS CLI is installed on your computer&lt;/li&gt;
&lt;li&gt;Docker is installed and running&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Also, don't forget that Amazon Nova currently only works in the US, so use the AWS CLI to configure your region using this command: &lt;code&gt;aws configure set region us-east-1&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Now, in your IDE, use the Nova Act extension and go to the deploy tab as shown here:&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%2F3o7ls4kina8jel14udgq.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%2F3o7ls4kina8jel14udgq.png" alt="Nova Act deploy tab view" width="768" height="930"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Create an AWS Workflow Definition Name. I used "shop-amazon". You might see a warning in yellow about a workflow not being present. If you click on the button to Convert to Deployment Format it will create a workflow for you.&lt;/p&gt;

&lt;p&gt;Alternatively, you can run this command to create a workflow using the CLI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws nova-act create-workflow-definition &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--name&lt;/span&gt; shop-amazon &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--region&lt;/span&gt; us-east-1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And then confirm the workflow and region with this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws nova-act list-workflow-definitions &lt;span class="nt"&gt;--region&lt;/span&gt; us-east-1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before you hit the Deploy Your Workflow button, ensure that Docker is up and running on your computer. Assuming you did everything correctly, you should now be able to deploy your agent as shown here:&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%2Fy97vw2nn4i8w31vdlaja.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%2Fy97vw2nn4i8w31vdlaja.png" alt="Amazon Nova Deployment" width="735" height="932"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, when you go to Amazon Nova Act on your AWS account, you should see the workflow you created as I have here:&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%2Fezz3m9e1u885nuy8hdxy.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%2Fezz3m9e1u885nuy8hdxy.png" alt="Amazon Nova Act AWS workflow" width="800" height="224"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-World Use Cases: What You Can Build With Nova Act
&lt;/h2&gt;

&lt;p&gt;Nova Act is best when the job at hand is repetitive, browser-based, significant enough that automation is warranted, and annoying enough that humans shouldn’t waste their time clicking through it manually.&lt;/p&gt;

&lt;p&gt;This scenario is best outlined when seen in a few use cases. Three examples include:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Automated QA testing&lt;/li&gt;
&lt;li&gt;Automating repetitive business workflows&lt;/li&gt;
&lt;li&gt;Automating developer workflows&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Use case 1: Automated QA testing
&lt;/h3&gt;

&lt;p&gt;And this is probably the most immediately practical #NormcoreAgents situation. QA and UI testing are ideal for trusted browser automation because QA often becomes the bottleneck for shipping velocity; UI regressions are painful and often only detected late; more traditional scripts tend to be weak, having high upkeep costs while not detecting issues in production; API tests will fail to catch what real users experience (or don’t) within the interface. Teams need automation that actually represents the full end-to-end journey rather than only backend responses.&lt;/p&gt;

&lt;p&gt;Nova Act-style UI testing can fill those gaps with after-deploy automated smoke tests, checkout flow validation, login flow validation, and critical-path regression checks as they traverse environments. Instead of keeping weak selectors alive all over the dozens of scripts, teams can define high-value workflows that run consistently and provide a valuable pass/fail signal before problems reach users.&lt;/p&gt;

&lt;p&gt;Here we can see what that looks like in an Audible automated test example:&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%2F3l9bxwl4s5i8n2g1ppch.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%2F3l9bxwl4s5i8n2g1ppch.png" alt="Audible workflow run summary showing steps" width="800" height="634"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example: Audible Smoke test agent spec (human-readable)&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Run after each deploy (or nightly):

1) Open https://www.amazon.com/audible
2) Verify the Audible homepage loads:
   - Hero headline is visible ("Love books? You'll Love Audible." OR similar)
   - Primary CTA (e.g., "Explore Membership" or "Start free trial") is visible
3) Navigate to pricing:
   - Click "See all plans &amp;amp; pricing" OR scroll to pricing section
4) Verify pricing cards render:
   - "Standard" plan card exists
   - "Premium Plus" plan card exists
   - Each plan shows a "Try ... Free" CTA button
5) Validate pricing details:
   - Confirm trial text exists (e.g., "30-day trial")
   - Confirm post-trial pricing text exists
6) Test search functionality:
   - Use the top search bar
   - Search for "Harry Potter"
   - Verify search results load
   - Confirm at least one result contains "Harry Potter"
7) Click a result (optional deeper check):
   - Verify book detail page loads
   - Confirm title, author, and trial CTA are visible
8) Capture artifacts:
   - Screenshot: Homepage hero
   - Screenshot: Pricing section
   - Screenshot: Search results page
   - Screenshot: Book detail page
9) Return a structured pass/fail report
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It's also worth noting that your agent should not just return "failed", it should return something like this JSON data, which makes it more usable for CI pipelines, Slack alerts, GitHub checks and QA dashboards.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"workflow"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"audible-smoke-test"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"status"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"failed"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"failed_step"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"verify_pricing_cards"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"reason"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Premium Plus card not found"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"last_url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://www.amazon.com/audible"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"artifacts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"homepage"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"artifacts/homepage.png"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"pricing"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"artifacts/pricing.png"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"timestamp"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2026-03-03T19:05:22Z"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Use case 2: Automating repetitive business workflows
&lt;/h3&gt;

&lt;p&gt;Much real work still occurs inside browser tools where automation is clunky: either the system has no API, the API is limited/unreliable, or you’re forced through manual UI steps regardless (uploads, exports, approvals, ugly dashboards). That’s why even deeply technical teams still waste hours each week manually doing simple tasks, not because the tasks are difficult, but because they exist in the UI.&lt;/p&gt;

&lt;p&gt;Nova Act shines when the work is UI-centric and otherwise needs a human to click around: updating CRM records, reconciling tickets between systems, copying data from internal dashboards into other systems or pulling reports from third-party portals. Instead of writing one-off weak scripts, you can automate #NormcoreAgents that follow the same workflow every time, store artifacts if something changes between runs and escalate to a human only when it decides real judgement is needed.&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%2Flqzpoqe8bd88vpxlmdg4.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%2Flqzpoqe8bd88vpxlmdg4.png" alt="Example Google Sheets monthly client income tracker workflow" width="800" height="627"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Agent workflow: Google Sheets monthly client income tracker (business-focused, human-readable)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This example creates a brand-new spreadsheet and sets up a simple but useful Monthly Client Income Tracker for one month, including basic totals and a clean structure. It uses a Google Sheet.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Run on the 1st of each month (or on-demand):

1) Open https://docs.google.com/spreadsheets/u/0/?pli=1
2) Create a new blank spreadsheet
3) Rename the file:
   "Client Income Tracker — &amp;lt;Month YYYY&amp;gt;" (e.g., "Client Income Tracker — March 2026")

4) Set up the header row in Sheet1 (row 1):
   Date | Client | Project | Description | Invoice # | Status | Currency | Amount | Payment Method | Paid Date | Notes

5) Apply formatting:
   - Freeze row 1
   - Bold header row
   - Turn on filter for header row
   - Set Amount column to currency format
   - Add data validation for Status: Draft, Sent, Paid, Overdue
   - Add data validation for Currency: GBP, USD, EUR

6) Create a second sheet named "Summary"
7) In "Summary", generate monthly rollups:
   - Total Invoiced (sum of Amount where Status is Sent or Paid)
   - Total Paid (sum of Amount where Status is Paid)
   - Outstanding (Total Invoiced - Total Paid)
   - Optional: Total by Client table (pivot-like summary)

8) Capture artifacts:
   - Screenshot: spreadsheet created + file name visible
   - Screenshot: Sheet1 headers + formatting
   - Screenshot: Summary tab with totals visible

9) Return a pass/fail report with:
   - Link to the created spreadsheet (URL)
   - What was created (sheets + columns + validations)
   - Any issues encountered (e.g., permissions, popups)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Use case 3: Automating developer workflows
&lt;/h3&gt;

&lt;p&gt;This is where the developer excitement angle really flies. A robust UI automation agent can automate several routine checks that developers are forced to do day-to-day: post-deploy smoke testing, checking feature flags or settings in admin panels, validating critical pages after a frontend change or performing consistent bug reporting with screenshots and reproducible steps.&lt;/p&gt;

&lt;p&gt;Even if you don’t go all the way to automating your entire workflow, having an agent that runs the boring checks automatically is already a massive reduction of manual work. It eliminates the need for developers to manually click through the same pages over and over again, placing that repetitive validation work in the hands of an agent, which can share clear results, saving hours each week while giving engineers more time to build and debug actual features.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Agent workflow: Post-deploy frontend validation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In many teams, developers manually verify a few critical things after every deployment: the homepage loads, key pages render correctly, feature flags are enabled, and nothing obvious is broken. An agent can reliably run those checks and produce a structured report with screenshots, like with this example workflow.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Run after each deployment:

1) Open the production application URL
2) Verify the homepage loads successfully
   - Page title is present
   - Main navigation renders
   - No obvious error messages appear

3) Navigate to key pages
   - /dashboard
   - /settings
   - /pricing

4) Validate page integrity
   - Confirm important UI components render
   - Check that expected headings or CTAs exist
   - Verify navigation links work

5) Check feature flags or admin settings
   - Navigate to the admin/settings panel
   - Confirm the latest feature flag is enabled
   - Verify the new feature toggle appears in the UI

6) Capture artifacts
   - Screenshot: homepage
   - Screenshot: dashboard page
   - Screenshot: feature flag/settings page
   - Screenshot: pricing page

7) Detect errors
   - Look for console error indicators
   - Check for visible error banners or “500” pages

8) Generate a structured report
   - Pass/fail status
   - Failed step (if any)
   - URLs visited
   - Attached screenshots
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Human-in-the-loop: keeping humans in control
&lt;/h2&gt;

&lt;p&gt;A reason teams shy away from running UI agents in production is very much to do with the obvious: some decisions should not be automated blindly. And that’s where Human-in-the-Loop (HITL) comes in. Instead of making the agent guess, when it hits something out of the ordinary or sensitive, the workflow can hold and escalate that step to a human who can review and decide how to proceed.&lt;/p&gt;

&lt;p&gt;Nova Act’s HITL approach enables agents to keep performing routine automation and offload decision-making moments like authentication flows, CAPTCHA, critical approvals, and sensitive actions such as payments and account modifications. The idea is, as ever, simple: Automation should be confident when it can be confident, and smart enough to ask for help when it can't.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Nova Act Fits Modern AI Agent Architectures
&lt;/h2&gt;

&lt;p&gt;Modern agent systems typically implement composed architectures where different parts of the system take care of concrete aspects instead of building everything into a single tool. Nova Act itself provides a high-level model where each Act is an isolated piece of UI automation code that can be reused across different pipelines and needs; it’s a specialised capability (good at being safe) that sits nicely in the developer's experience, from trial to production.&lt;/p&gt;

&lt;p&gt;Instead of forcing teams to choose between a quick demo or a fully engineered system, Nova Act aims to provide a path that looks like prototype fast, then engineer properly, then ship.&lt;/p&gt;

&lt;p&gt;Some of the main features of this method are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One component handling orchestration&lt;/li&gt;
&lt;li&gt;Purpose-built tools for specialised tasks&lt;/li&gt;
&lt;li&gt;Strong observability and debugging capabilities&lt;/li&gt;
&lt;li&gt;Patterns for safely executing production workflows&lt;/li&gt;
&lt;li&gt;Seamless integration into the developer workflow (Playground to IDE)&lt;/li&gt;
&lt;li&gt;Interoperability with other tools (e.g. Python functions, external integration)&lt;/li&gt;
&lt;li&gt;A focus on production working, not clever reasoning&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Getting Started With Amazon Nova Act
&lt;/h2&gt;

&lt;p&gt;Onboarding is not too difficult when you visit the &lt;a href="https://fandf.co/4s55Pgb" rel="noopener noreferrer"&gt;Amazon Nova Act&lt;/a&gt; website. It's fairly straightforward after following the onboarding flow as outlined below:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Visit the Nova Act playground and prototype a workflow in natural language (Agent, Voice Agent, UI Agent)&lt;/li&gt;
&lt;li&gt;Export the generated Python script&lt;/li&gt;
&lt;li&gt;Create your API key and set it via environment variables&lt;/li&gt;
&lt;li&gt;Install the IDE extension (VS Code, Cursor, or Kiro)&lt;/li&gt;
&lt;li&gt;Import the script into Builder Mode, run/debug step-by-step&lt;/li&gt;
&lt;li&gt;When ready, deploy and run in production&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Give Nova Act a try in the playground and share your feedback on social media. You can find more information on the &lt;a href="https://fandf.co/4bsnR6i" rel="noopener noreferrer"&gt;What is Nova Act&lt;/a&gt; page on AWS and the &lt;a href="https://fandf.co/4bsnR6i" rel="noopener noreferrer"&gt;Getting started with Nova Act&lt;/a&gt; guide.&lt;/p&gt;

&lt;p&gt;To learn more, just refer to the &lt;a href="https://fandf.co/4s55Pgb" rel="noopener noreferrer"&gt;Amazon Nova Act Documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gotchas to know up front:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Nova Act is currently ONLY available in the &lt;strong&gt;AWS Region US East (N. Virginia)&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;You must have a &lt;strong&gt;US-based Amazon account&lt;/strong&gt; to access&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1773150764%2FAmazon_Nova_Act_Example_teadp5.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1773150764%2FAmazon_Nova_Act_Example_teadp5.png" alt="Amazon Nova Act Workflow Example" width="800" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Bigger Picture: From Automation Tools To Autonomous Workflows
&lt;/h2&gt;

&lt;p&gt;We are seeing a renaissance happen across software automation: evolving from weak scripts to intelligent agents, one-off automations to repeatable workflows, and cool demos to workhorse systems, where devs are actually deploying. The real unlock here is being robust; potentially, once agents are working reliably in production, they cease to be a novelty and start to become infrastructure. The sort that quietly saves hundreds of hours for teams while improving product quality. That’s the idea behind #NormcoreAgents: not flashy magic assistants, but solid teammates who take care of the annoying tasks that keep real products functioning.&lt;/p&gt;

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

&lt;p&gt;Amazon Nova Act targets one of the hardest problems in agent tooling today: how to actually build UI automation that holds up in production. The challenge isn’t getting a demo to work; lots of tools can do that. The real value is in supporting the full lifecycle of reliable automation, quickly prototyping an agent in the Playground, iterating on and debugging that workflow from your IDE, deploying and operating those workflows until they’re ready for production use.&lt;/p&gt;

&lt;p&gt;The use cases are right this second useful: automated QA testing; repetitive business workflows, developer productivity automations that contract out hours of guide work each week. If you're adventurous, play with Nova Act in Playground and create a simple #NormcoreAgent that does something you already do manually but saves your time.&lt;/p&gt;

&lt;p&gt;A big thank you to Amazon for sponsoring this article and making it possible to benefit the developer community.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stay up to date with AI, tech, productivity, and personal growth
&lt;/h2&gt;

&lt;p&gt;If you enjoyed these articles, connect and follow me across &lt;a href="https://linktr.ee/andrewbaisden" rel="noopener noreferrer"&gt;social media&lt;/a&gt;, where I share content related to all of these topics 🔥&lt;/p&gt;

&lt;p&gt;I also have a &lt;a href="https://thelevelupmindset.substack.com/?utm_campaign=profile_chips" rel="noopener noreferrer"&gt;newsletter&lt;/a&gt; where I share my thoughts and knowledge on AI, tech, productivity, and personal growth.&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%2Fqks7sfcd4f17fxr8j6ku.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%2Fqks7sfcd4f17fxr8j6ku.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1765374046/header-2025_g0r0so.png" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>automation</category>
      <category>aws</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I Evaluated Enterprise Auth for a SaaS App and Here’s My Honest Take on WorkOS AuthKit + Radar</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Thu, 15 Jan 2026 17:02:24 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/i-evaluated-enterprise-auth-for-a-saas-app-and-heres-my-honest-take-on-workos-authkit-radar-e22</link>
      <guid>https://forem.com/andrewbaisden/i-evaluated-enterprise-auth-for-a-saas-app-and-heres-my-honest-take-on-workos-authkit-radar-e22</guid>
      <description>&lt;p&gt;Every SaaS product eventually encounters the same problems.&lt;/p&gt;

&lt;p&gt;Early on, authentication is a checkbox:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"Users can sign in"&lt;/li&gt;
&lt;li&gt;"Teams can invite people"&lt;/li&gt;
&lt;li&gt;"Admins can reset passwords"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then enterprise leads show up. Next thing you know, you’re dealing with questions about SAML, SCIM, just-in-time provisioning, role-based access and security, all of which you would rather not turn into roadblocks for product development. This is the point at which most teams realise that the "good enough" auth stack they put together is now a burden.&lt;/p&gt;

&lt;p&gt;I tried WorkOS AuthKit and Radar, looking through that lens:&lt;/p&gt;

&lt;p&gt;Not "Can I ship login fast?” but “Can this get me from Series A to real enterprise contracts without rewrites?”&lt;/p&gt;

&lt;p&gt;In this post, I explain my thoughts and why, as I find out just how powerful WorkOS is for implementing modern enterprise auth in applications.&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%2F1u6oddn496x2c3p0s7wu.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%2F1u6oddn496x2c3p0s7wu.png" alt="WorkOS Product Homepage" width="800" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This article is sponsored by WorkOS. All opinions are my own, based on hands-on evaluation and real-world SaaS decision-making.&lt;/p&gt;

&lt;h2&gt;
  
  
  The real problem WorkOS is solving (and it’s not login UI)
&lt;/h2&gt;

&lt;p&gt;Most modern auth tools are optimised for developer satisfaction at day zero. WorkOS is optimised for company survival on day 900.&lt;/p&gt;

&lt;p&gt;The core idea is simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Keep enterprise identity complexity behind a clean API, so it doesn’t leak into or complicate the rest of your product code.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let's break this down to see what that looks like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AuthKit handles how users authenticate&lt;/li&gt;
&lt;li&gt;Radar handles who should be blocked before they become a problem&lt;/li&gt;
&lt;li&gt;Admin Portal handles who your support team doesn’t want to talk to at 2 am&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%2Fvtn5pf7phzos586kbv51.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%2Fvtn5pf7phzos586kbv51.png" alt="WorkOS Authkit" width="800" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Individually, these exist elsewhere and together, they form something closer to an enterprise onboarding system, not just auth.&lt;/p&gt;

&lt;h2&gt;
  
  
  AuthKit is opinionated where it matters, and flexible where it counts
&lt;/h2&gt;

&lt;p&gt;AuthKit is essentially a pre-built, customisable authentication experience which has been created around WorkOS primitives and powered by Radix UI. In my testing, what stood out to me was the fact that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You are not trapped in the "startup aesthetic": It is possible to use a different theme and customise without fighting default settings&lt;/li&gt;
&lt;li&gt;It is agnostic: You can deploy everywhere, with server-rendered apps, Modern SPAs or Hybrid Stacks&lt;/li&gt;
&lt;li&gt;You can design for identity features that you don’t want to reimplement: MFA, magic links, RBAC, passwordless, JIT provisioning; it’s already a baked-in part of the model.&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%2Ffdx8eo7o8a2n4dzhvwy3.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%2Ffdx8eo7o8a2n4dzhvwy3.png" alt="WorkOS Authkit" width="800" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It's not competing to win a prize on originality; it’s trying to prevent future refactors, and yes, NextJS integration is excellent.&lt;/p&gt;

&lt;h2&gt;
  
  
  Radar is security that doesn’t wait for abuse to happen
&lt;/h2&gt;

&lt;p&gt;Many teams see fraud and bot protection as a generic add-on, but Radar turns them on their heads. Unlike bolted-on reCAPTCHA or retrofitted rate limits, Radar integrates into the authentication layer to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Detect automated abuse&lt;/li&gt;
&lt;li&gt;Block credential stuffing&lt;/li&gt;
&lt;li&gt;Reduce fake account creation&lt;/li&gt;
&lt;li&gt;Defend enterprise login flows before they can be exploited&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%2Fmi86vkfpcxyg02kvbokl.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%2Fmi86vkfpcxyg02kvbokl.png" alt="Radar blocking a suspicious auth attempt" width="800" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What I liked here is the placement. Radar doesn’t live in "security tooling land." It lives where identity decisions already happen. And in my opinion, that’s the right architectural choice.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Admin Portal quietly does the most valuable work
&lt;/h2&gt;

&lt;p&gt;This is the part that most devs don’t take into account, until they’ve been burned. The Admin Portal provides customer IT teams with the ability to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Configure SSO&lt;/li&gt;
&lt;li&gt;Manage directory connections&lt;/li&gt;
&lt;li&gt;Onboard customer without engineering assistance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This directly reduces:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Support tickets&lt;/li&gt;
&lt;li&gt;Custom onboarding calls&lt;/li&gt;
&lt;li&gt;"Can you hop on Zoom with our IT team?" requests&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%2Fyqkpcttqdmt4bkqhjzrd.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%2Fyqkpcttqdmt4bkqhjzrd.png" alt="WorkOS Admin screen" width="800" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you’ve ever been the engineer brought into enterprise onboarding calls, you instantly get the value here.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where WorkOS fits, and where it doesn’t?
&lt;/h2&gt;

&lt;p&gt;This is the most important section, because it gives us a grasp on how well WorkOS can be integrated into your own workflow.&lt;/p&gt;

&lt;h3&gt;
  
  
  WorkOS works well if:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;You are building a B2B SaaS with enterprise goals&lt;/li&gt;
&lt;li&gt;SSO, SCIM, and compliance are already being asked on sales calls&lt;/li&gt;
&lt;li&gt;You want identity to be infrastructure, not a product-surface&lt;/li&gt;
&lt;li&gt;You are thinking in terms of long-term stability and not short-term convenience&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  WorkOS is less suitable if:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;You’re working on a consumer app or side project&lt;/li&gt;
&lt;li&gt;You desperately need deep auth customisation for UX tweaking&lt;/li&gt;
&lt;li&gt;You don’t want to pay for enterprise-grade features in the future&lt;/li&gt;
&lt;li&gt;You depend heavily on a non-NextJS stack today (support is getting better, but you get the idea)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It is not a one-size-fits-all tool, and that’s perfectly fine.&lt;/p&gt;

&lt;h2&gt;
  
  
  How does WorkOS compare to other competitors?
&lt;/h2&gt;

&lt;p&gt;This isn’t a feature-by-feature breakdown. It is what those tools feel like when you move beyond Minimum Viable Product (MVP) and start interacting with real customers, real security concerns, and actually scaling.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Auth0&lt;/strong&gt;: Battle-tested and powerful, with solid enterprise features; however, also more heavyweight, complex and expensive as you grow. You’re paying for flexibility, whether you want it or not.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Clerk&lt;/strong&gt;: Fantastic developer experience and lightning fast to ship early. Good choice for startups, not a priority for enterprise onboarding (SSO/SCIM/IT-led setup).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Kinde&lt;/strong&gt;: Clerk in spirit, clean DX, quick wins, good defaults. The perfect fit when speed is better than long-term enterprise solutions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stytch&lt;/strong&gt;: Pretty powerful and modular, with nice APIs. It can be like Lego blocks, where you assemble it yourself, as opposed to a more thorough enterprise onboarding system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Descope&lt;/strong&gt;: Robust no-code / low-code auth workflows and flexibility. It is powerful, but also opinionated, in a way that might not be great for teams who prefer Auth to stay out of the way.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ory&lt;/strong&gt;: Open-source, and a platform worth checking out, as it is very flexible. Great, if you actually want full control and aren’t afraid of having to maintain complexity in infrastructure and long-term support.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Amazon Cognito&lt;/strong&gt;: Plenty of scalability and built into AWS. Very developer-oriented with lots of complex configurations and setups.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Firebase&lt;/strong&gt;: Good for shipping a product quickly. Enterprise identity (SSO, directories, IT-managed onboarding) can be tricky, though.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Supabase Auth&lt;/strong&gt;: Amazing DX, and it has an open-source feel to it. Similar to Firebase, awesome at the startup level, but enterprise requirements would drive you to a custom solution.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Frontegg&lt;/strong&gt;: A decent amount of enterprise focus, many things are already built in. Might be heavy and product-defining (not infrastructure you quietly rely on).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Better Auth&lt;/strong&gt;: More approachable and developer-centric. Perfect for people who want to have a framework-agnostic solution and don’t yet need enterprise-grade identity workflows.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where WorkOS comes in
&lt;/h3&gt;

&lt;p&gt;It might not be the absolute quickest way to have a demo login, but it’s one of the cleanest paths from "startup auth" to enterprise-ready identity without rewriting half your stack down the road.&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%2F9mtdx58qgg54ypa4tzom.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%2F9mtdx58qgg54ypa4tzom.png" alt="WorkOS Auth onboarding" width="800" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;WorkOS covers a lot of bases and does it very well, which makes it a good all-around provider.&lt;/p&gt;

&lt;h2&gt;
  
  
  The trade-offs you should actually think about
&lt;/h2&gt;

&lt;p&gt;No tool is free of compromise.&lt;/p&gt;

&lt;p&gt;What really surprised (me in a good way) is how well AuthKit and Radar seem to work together. They don’t appear like a set of loosely linked features, but more like parts of one system, engineered to address real enterprise identity issues. Much of the detailed control you would normally have to deal with around SSO, provisioning, and abuse protection is still there, but it’s purposefully buried behind default settings and a clean UI that never makes you feel like you’re staring into a black box.&lt;/p&gt;

&lt;p&gt;What didn’t work quite as well is largely a matter of scope and timing. Stack support beyond NextJS is still a little bit constrained, something that will be important to teams running less popular configurations. The free tier is great for exploration, but doesn’t really show off what WorkOS can do; most of the value only becomes clear when you’re really trying to think through enterprise use cases.&lt;/p&gt;

&lt;p&gt;Finally, integrating with WorkOS is as much a mental shift as a technical one: you're basically choosing to continuously look at your product's future from an enterprise ready lens. If you’re one of those hoping to stay small forever, then this will likely all seem like overkill. For people who do hope to grow, it is much more like insurance.&lt;/p&gt;

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

&lt;p&gt;WorkOS AuthKit and Radar will not instantly make your product feel magical. They will make your sales pipeline less fragile, your security stronger, and your engineering roadmap quieter.&lt;/p&gt;

&lt;p&gt;If you already have enterprise goals, even if they’re barely there, it’s worth assessing now instead of putting them off and giving WorkOS a try.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://fandf.co/4qboEOh" rel="noopener noreferrer"&gt;Explore AuthKit&lt;/a&gt;&lt;br&gt;
&lt;a href="https://fandf.co/4p5QSZ5" rel="noopener noreferrer"&gt;Explore Radar&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Stay up to date with AI, tech, productivity, and personal growth
&lt;/h2&gt;

&lt;p&gt;If you enjoyed these articles, connect and follow me across &lt;a href="https://linktr.ee/andrewbaisden" rel="noopener noreferrer"&gt;social media&lt;/a&gt;, where I share content related to all of these topics 🔥&lt;/p&gt;

&lt;p&gt;I also have a &lt;a href="https://thelevelupmindset.substack.com/?utm_campaign=profile_chips" rel="noopener noreferrer"&gt;newsletter&lt;/a&gt; where I share my thoughts and knowledge on AI, tech, productivity, and personal growth.&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%2Fqks7sfcd4f17fxr8j6ku.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%2Fqks7sfcd4f17fxr8j6ku.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1765374046/header-2025_g0r0so.png" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>sass</category>
      <category>security</category>
      <category>react</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How I Automated My Workflow Using Zapier and Why You Should Too</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Thu, 11 Dec 2025 15:17:43 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/how-i-automated-my-workflow-using-zapier-and-why-you-should-too-1g4d</link>
      <guid>https://forem.com/andrewbaisden/how-i-automated-my-workflow-using-zapier-and-why-you-should-too-1g4d</guid>
      <description>&lt;p&gt;The beauty of automation isn’t just in the time-saving; however, it’s about creating systems that work efficiently behind the scenes to support your work that you can constantly push forward in building your actual projects. And here in this article, I’m going to share a real Zapier workflow that I built for something I wanted to automate, tracking content across Google Sheets and Notion.&lt;/p&gt;

&lt;p&gt;You will even understand how it all works: why decisions matter, what you can learn from the behaviour of Zapier triggers and polling, or row detection. If you are interested in automation or productivity, or if you are just trying to create a smarter workflow for yourself, I thought this breakdown might give you some more cool evidence of what's happening behind the scenes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;We need to set up a few accounts before we can start. Most people already have a Google account and ChatGPT. So all that's left is creating an account for Notion if you don't have one already.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A &lt;a href="https://www.google.com/" rel="noopener noreferrer"&gt;Google&lt;/a&gt; account&lt;/li&gt;
&lt;li&gt;A &lt;a href="https://www.notion.com/" rel="noopener noreferrer"&gt;Notion&lt;/a&gt; account&lt;/li&gt;
&lt;li&gt;A &lt;a href="https://chatgpt.com/" rel="noopener noreferrer"&gt;ChatGPT&lt;/a&gt; account&lt;/li&gt;
&lt;li&gt;An &lt;a href="https://platform.openai.com/docs/overview" rel="noopener noreferrer"&gt;OpenAI&lt;/a&gt; API key&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Many tutorials show you how to create an &lt;a href="https://platform.openai.com/docs/quickstart##" rel="noopener noreferrer"&gt;OpenAI&lt;/a&gt; API Key; just be aware that billing is required to use the API Key with any app you build. Fortunately, it's not that expensive, and you only need to top up something like £10/$10 to get started, and for our usage, that's more than enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  What We Will Build
&lt;/h2&gt;

&lt;p&gt;We are going to build an automation content pipeline for generating content ideas.&lt;/p&gt;

&lt;p&gt;Our Zapier Zap will automate our content pipeline by taking new ideas from one of our Google spreadsheets, followed by turning them into posts inside our Notion database, so we don't need to do any manual copying.&lt;/p&gt;

&lt;p&gt;This is what our final Zap workflow will look like once it has been completed:&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%2Fsh55dqyyta9t5wptdpfh.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%2Fsh55dqyyta9t5wptdpfh.png" alt="Zap content pipeline workflow" width="800" height="825"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Our automation handles 3 major tasks as outlined below:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Detects new ideas we add to our Google Sheet
&lt;/h3&gt;

&lt;p&gt;Whenever we add a new row (a new content idea), Zapier sees it instantly.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Send that new idea to our Notion database
&lt;/h3&gt;

&lt;p&gt;It creates a brand-new Notion entry with our fields:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Name&lt;/li&gt;
&lt;li&gt;Tags&lt;/li&gt;
&lt;li&gt;Outline&lt;/li&gt;
&lt;li&gt;Raw Idea&lt;/li&gt;
&lt;li&gt;Created From&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Updates the status in your spreadsheet
&lt;/h3&gt;

&lt;p&gt;After the idea is successfully added to Notion, Zapier marks the row (“Processed”) so we know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Which ideas have synced&lt;/li&gt;
&lt;li&gt;Which ones still need action&lt;/li&gt;
&lt;li&gt;What’s safe to edit or publish next&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This prevents duplicates and keeps both systems in sync.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting Up a Zapier Account
&lt;/h2&gt;

&lt;p&gt;The first step is to visit the &lt;a href="https://zapier.com/" rel="noopener noreferrer"&gt;Zapier&lt;/a&gt; website and create a free account by clicking on the sign-up button.&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%2F1ubvanw1zbz6gxyci1a5.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%2F1ubvanw1zbz6gxyci1a5.png" alt="Zapier Website Homepage" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can either sign up with an email of your choice or use your Google account to sign up.&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%2Fcql9uscem7v58a3r4y47.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%2Fcql9uscem7v58a3r4y47.png" alt="Zapier websitye sign up page" width="800" height="465"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You should now see the Zapier dashboard screen as shown here:&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%2F5ui5kt7ufap641rgdv3s.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%2F5ui5kt7ufap641rgdv3s.png" alt="Zapier dashboard screen" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are many ways to build an automation on Zapier. In this tutorial, we will start from scratch and create a Zap. So click on the Zap (automated workflows) button to begin.&lt;/p&gt;

&lt;p&gt;The create Zap workflow automation screen should now be visible:&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%2F78tqohxftroh46r68fid.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%2F78tqohxftroh46r68fid.png" alt="Create Zap automation workflow screen" width="800" height="534"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the next section, we shall go through a build setup for our content pipeline.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building Our Content Automation Pipeline
&lt;/h2&gt;

&lt;p&gt;We can create our Zap in 4 steps! Let's get started with step 1 and go through them all.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1. Trigger - New Spreadsheet Row
&lt;/h3&gt;

&lt;p&gt;Google Sheets is going to be our event trigger. Anytime a new row is added to our Google Sheet, the workflow will update with the new data. So firstly, create a Google Sheet called "Idea Inbox" and then give it these column headings:&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%2Fv3eqgpu1jgo010gz1qwb.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%2Fv3eqgpu1jgo010gz1qwb.png" alt="Google Sheet Idea Inbox" width="800" height="155"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A: idea&lt;br&gt;
B: status&lt;br&gt;
C: notion_url&lt;/p&gt;

&lt;p&gt;Now, inside Zapier, click on the Trigger button, and you should see a pop-up menu with extensions:&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%2Fbyi063yrrqvt6ztp4pud.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%2Fbyi063yrrqvt6ztp4pud.png" alt="Zapier Extensions" width="800" height="707"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Select Google Sheets and on the Setup screen, add this event:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Trigger event&lt;/strong&gt;: New Spreadsheet Row&lt;/p&gt;

&lt;p&gt;Make sure that your Google Account is connected if it's not already.&lt;/p&gt;

&lt;p&gt;On the Configure screen, add these values:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Spreadsheet&lt;/strong&gt;: Idea Inbox&lt;br&gt;
&lt;strong&gt;Worksheet&lt;/strong&gt;: Sheet1&lt;/p&gt;

&lt;p&gt;If you changed the names, then update accordingly.&lt;/p&gt;

&lt;p&gt;On the test screen, test the trigger to make sure that it works. You need to create a row with some data in your spreadsheet first; otherwise, the test will fail. You can use this test data or create your own:&lt;/p&gt;

&lt;p&gt;idea: Build a to-do app&lt;br&gt;
status: pending&lt;/p&gt;

&lt;p&gt;You don't have to put anything in the notion_url cell, as our Zap is not connected to Notion yet.&lt;/p&gt;

&lt;p&gt;Congratulations, that's step 1 completed, now onto step 2.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2. Action - Conversation
&lt;/h3&gt;

&lt;p&gt;In this step, we now need to connect to ChatGPT so that we can use the API and LLM for our conversations.&lt;/p&gt;

&lt;p&gt;Like before, click on the action button, but this time find ChatGPT. Add this action event on the setup screen, and of course, make sure that your ChatGPT account is connected:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Action event&lt;/strong&gt;: Conversation&lt;/p&gt;

&lt;p&gt;Now use this configuration here for our Conversation on the Configure screen. I'm using the current latest model; it could have changed depending on when you read this, so select whatever model you want.&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%2Fwbwedwdof8rtku7t45m3.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%2Fwbwedwdof8rtku7t45m3.png" alt="ChatGPT Zap configuration" width="800" height="1471"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's the User Message:&lt;/p&gt;

&lt;p&gt;Turn the following raw idea into a clear, structured Notion page outline. Include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Title&lt;/li&gt;
&lt;li&gt;Description&lt;/li&gt;
&lt;li&gt;Problem it solves&lt;/li&gt;
&lt;li&gt;Proposed features or sections&lt;/li&gt;
&lt;li&gt;Potential use cases&lt;/li&gt;
&lt;li&gt;A short action plan for building or writing it&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Raw idea:&lt;/p&gt;

&lt;p&gt;Now, for the Raw idea, we have to connect our Google Sheet, and to do that, we must use a forward slash like this "/", which will open a context menu as seen here. Then you can select the idea column:&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%2F2iay26lg0j7h8dyuea0c.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%2F2iay26lg0j7h8dyuea0c.png" alt="Zapier prompt menu" width="800" height="657"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;All the other values can remain as default. On the Test screen, go ahead and test the Action. If you see output data, then it worked!&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%2Fyl57ic5f1ut338ay49m0.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%2Fyl57ic5f1ut338ay49m0.png" alt="ChatGPT Output Data" width="662" height="896"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ok, don't publish yet, we have to do step 3 next, which is connecting to Notion.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3. Action - Create Data Source Item
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Notion database setup
&lt;/h4&gt;

&lt;p&gt;Before we start, let's quickly create a database in Notion and also connect our Notion account to Zapier if it has not been done already. Create a Notion page like this one:&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%2Flg45k77m5a9qcjsp05la.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%2Flg45k77m5a9qcjsp05la.png" alt="Notion Database Idea Vault" width="800" height="157"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Name&lt;/strong&gt;: Leave as default&lt;br&gt;
&lt;strong&gt;Tags&lt;/strong&gt;: Multi-select&lt;br&gt;
&lt;strong&gt;Outline&lt;/strong&gt;: Text&lt;br&gt;
&lt;strong&gt;Raw Idea&lt;/strong&gt;: Text&lt;br&gt;
&lt;strong&gt;Created From&lt;/strong&gt;: Text&lt;/p&gt;

&lt;p&gt;You might also need the Notion Database ID for Zapier, alongside the Zapier Notion extension, which is definitely needed for the database page:&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%2Fmsxiv0vrngvi8vgivdo5.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%2Fmsxiv0vrngvi8vgivdo5.png" alt="Notion Zapier Extension" width="680" height="671"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you connect Notion to Zapier, ensure that you connect to the page you created.&lt;/p&gt;

&lt;p&gt;There is a chance that you might encounter a scenario where Zapier can connect to your Notion account, but Notion is not permitting Zapier to access your database/page. In this type of situation, you have to check the sharing permissions for your Notion account and the page.&lt;/p&gt;

&lt;h4&gt;
  
  
  Zapier workflow setup
&lt;/h4&gt;

&lt;p&gt;Click on the cross in the workflow to add another event, and this time find Notion. On the Setup screen, add Create Data Source Item as the Action event.&lt;/p&gt;

&lt;p&gt;Now go to the Configure screen and add this information:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data Source&lt;/strong&gt;: Idea Vault&lt;br&gt;
&lt;strong&gt;Template Mode&lt;/strong&gt;: No template&lt;br&gt;
&lt;strong&gt;Name&lt;/strong&gt;: Use "/" to bring up the context menu and find the "idea" column for the Google Sheets extension&lt;br&gt;
&lt;strong&gt;Outline&lt;/strong&gt;: Use "/" to bring up the context menu and find "Output Text" for the ChatGPT extension&lt;br&gt;
&lt;strong&gt;Created From&lt;/strong&gt;: Automated Idea Generator&lt;br&gt;
&lt;strong&gt;Raw Idea&lt;/strong&gt;: Use "/" to bring up the context menu and find the "idea" column for the Google Sheets extension&lt;br&gt;
&lt;strong&gt;Tags&lt;/strong&gt;: &lt;strong&gt;You can leave it empty&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Content&lt;/strong&gt;: &lt;strong&gt;You can leave it empty&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Content Format&lt;/strong&gt;: Plain Text&lt;/p&gt;

&lt;p&gt;Run a Test like usual, and this time you should see the data in our Notion database:&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%2Fvxnisfcwjiztxj8crkc2.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%2Fvxnisfcwjiztxj8crkc2.png" alt="Notion build a to do app idea" width="800" height="701"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We are almost done; only one step remains.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 4. Trigger - Update Spreadsheet Row
&lt;/h3&gt;

&lt;p&gt;To complete our Zap, we just have one last thing to do. Our spreadsheet needs to be updated every time we make changes, and the status has to change to "Processed". The notion_url for our idea in the database should be added to the spreadsheet automatically.&lt;/p&gt;

&lt;p&gt;Start by creating another trigger in the workflow and add Google Sheets again. This time in the Setup, make the Action event Update Spreadsheet Row.&lt;/p&gt;

&lt;p&gt;On the configure screen, if you see a "Possible Zap loop detected" warning, you can ignore it. It's just a warning, and our workflow trigger will be different this time, so it's fine.&lt;/p&gt;

&lt;p&gt;Now add these values to the form on Configure:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drive&lt;/strong&gt;: &lt;strong&gt;Leave empty&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Spreadsheet&lt;/strong&gt;: Idea Inbox&lt;br&gt;
&lt;strong&gt;Worksheet&lt;/strong&gt;: Sheet1&lt;br&gt;
&lt;strong&gt;Row&lt;/strong&gt;: Click on the 3-dot menu on the right and select Custom. Use "/" to bring up the context menu and find the "Row ID" column for the Google Sheets extension&lt;br&gt;
&lt;strong&gt;idea&lt;/strong&gt;: Use "/" to bring up the context menu and find the "idea" column for the Google Sheets extension&lt;br&gt;
&lt;strong&gt;Status&lt;/strong&gt;: processed&lt;br&gt;
&lt;strong&gt;notion_url&lt;/strong&gt;: Use "/" to bring up the context menu and find the "URL" column for the Notion extension&lt;/p&gt;

&lt;p&gt;That's it, the Zap should be ready to publish by clicking the publish button! You can go ahead and give your Zap a name so it's not untitled anymore. On the main dashboard for your Zaps, you can see their Status and choose to toggle them on and off.&lt;/p&gt;

&lt;p&gt;Test your automated workflow by creating an idea in your Google Sheet. Zapier will run through the workflow and then put the data inside your Notion database!&lt;/p&gt;

&lt;h2&gt;
  
  
  Zapier Behind the Scenes: Triggers, Polling, and Row Detection
&lt;/h2&gt;

&lt;p&gt;Once you get going automating workflows with Zapier, it’s good to know what’s happening behind the scenes. Your Zap is good, and your tests appear to work fine, but there are a couple of things going on behind the scenes that explain why deleted rows don’t re-fire, why it matters how quickly we poll, and why the tests took such unequal amounts of time.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why do deleted rows not re-trigger the Zap
&lt;/h3&gt;

&lt;p&gt;Zapier watches for new rows being added to your spreadsheet, not rows being changed, removed, or overwritten. After some time, Zapier finds a certain ID, which is in memory; it will never treat it as "new" regardless of deleting it from the list. It’s more to stop loops and triggers from being triggered multiple times, but it also means that if you delete the row, then those won’t come back into your automation.&lt;/p&gt;

&lt;h3&gt;
  
  
  How polling frequency affects workflow speed
&lt;/h3&gt;

&lt;p&gt;Zapier is not actively watching your data in real time. It polls on a schedule, which means it checks in. Free and lower-tier plans take much longer; higher plans are checked more frequently. Quicker polling will result in your workflow being more reactive as opposed to having slower polling, which may lead to longer delays between triggers.&lt;/p&gt;

&lt;p&gt;And this is why it can take a while for data to show up in Notion after we add it to the Google Sheet. For a production-level experience, a paid plan would offer a far better experience. For our simple testing, though, it's ok.&lt;/p&gt;

&lt;h3&gt;
  
  
  How Zapier detects new rows
&lt;/h3&gt;

&lt;p&gt;Zapier doesn’t scan the entire spreadsheet every time. It simply looks for rows with IDs it hasn’t seen before.&lt;/p&gt;

&lt;p&gt;When it finds one:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It captures the row data&lt;/li&gt;
&lt;li&gt;Passes it to the next step&lt;/li&gt;
&lt;li&gt;Stores that row ID so it won’t trigger again&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This makes Zaps lightweight and efficient, but also means your workflow relies on predictable row creation, not editing or reordering existing ones.&lt;/p&gt;

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

&lt;p&gt;The power of automation is gained when you know not just what works, but why it works the way it does. Polling frequency, triggers, and detection rules in Zapier might be invisible, but they impact everything from the speed of your workflows to which rows are skipped or ignored.&lt;/p&gt;

&lt;p&gt;Once you get how the stuff works, you can create automations that are consistent, predictable and go along with what you are trying to achieve. Whether you are creating a content funnel, workflow productivity system or your first automated workflow process, the strategies I covered here will improve your thinking about the tooling you use and how those tools can work for you instead of the other way around.&lt;/p&gt;




&lt;h2&gt;
  
  
  Stay up to date with AI, tech, productivity, and personal growth
&lt;/h2&gt;

&lt;p&gt;If you enjoyed these articles, connect and follow me across &lt;a href="https://linktr.ee/andrewbaisden" rel="noopener noreferrer"&gt;social media&lt;/a&gt;, where I share content related to all of these topics 🔥&lt;/p&gt;

&lt;p&gt;I also have a &lt;a href="https://thelevelupmindset.substack.com/?utm_campaign=profile_chips" rel="noopener noreferrer"&gt;newsletter&lt;/a&gt; where I share my thoughts and knowledge on AI, tech, productivity, and personal growth.&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%2Fqks7sfcd4f17fxr8j6ku.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%2Fqks7sfcd4f17fxr8j6ku.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1765374046/header-2025_g0r0so.png" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>webdev</category>
      <category>career</category>
    </item>
    <item>
      <title>Choosing the Right Debugging and Session Replay Tool - Multiplayer vs LogRocket, Sentry, Datadog, and FullStory</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Tue, 25 Nov 2025 13:22:41 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/choosing-the-right-debugging-and-session-replay-tool-multiplayer-vs-logrocket-sentry-datadog-577f</link>
      <guid>https://forem.com/andrewbaisden/choosing-the-right-debugging-and-session-replay-tool-multiplayer-vs-logrocket-sentry-datadog-577f</guid>
      <description>&lt;p&gt;When people report bugs or performance problems, developers need more than logs and metrics; they need context. That’s where debugging and session replay tools enter the picture. These platforms log users' interactions, console logs and network activity, giving teams a window into what really happened before the error occurred.&lt;/p&gt;

&lt;p&gt;Some popular tools like LogRocket, Sentry, Datadog and FullStory have already established themselves as essential in modern product teams. They give companies the ability to issue track, and this results in better user experiences and the alignment of engineering with design.&lt;/p&gt;

&lt;p&gt;But a new player in the space, Multiplayer, is betting on developer-first debugging and visibility, which is based around live collaboration, rich context and without any vendor lock-in.&lt;/p&gt;

&lt;p&gt;This article will compare Multiplayer to LogRocket, Sentry, Datadog, and FullStory, breaking down their main features into an easy-to-digest pros and cons read through in order for you to choose the right one for your team.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Multiplayer?
&lt;/h2&gt;

&lt;p&gt;Multiplayer is an all-in-one debugging and session replay platform for developers. It brings together full stack session replays, and collaborative tools in a single place, offering a seamless integration within your current workflow. Multiplayer was founded by Steph and Thomas Johnson in 2023, and its product was in beta back in February 2024. They finally opened their platform to the public in the same year and have been enjoying growth ever since.&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%2F0lbpin1ofl3zervmbk5o.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%2F0lbpin1ofl3zervmbk5o.png" alt="Multiplayer platform - Full stack session recordings" width="800" height="687"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Unlike traditional monitoring tools, Multiplayer doesn’t just tell you what went wrong; it helps teams reproduce, discuss and fix issues faster. Also you don’t need to worry about any vendor lock-in; and it is possible to export your data and have it sent to you if you ask the Multiplayer team.&lt;/p&gt;

&lt;p&gt;It's worth mentioning that with other session replay tools you need to rely on their backend instrumentation to add traces, logs, etc. to your session replays (if they even, support that!). Like for example if you're using Sentry, you also need to instrument Sentry in your backend.&lt;/p&gt;

&lt;p&gt;Multiplayer is built on OpenTelemetry (OTel) which is an open source observability framework for providing IT teams with standardized protocols and tools which can collect and route telemetry data. This basically means that you can use any of your existing observability tools, with no need to switch (or, you can switch, whenever you want, to whatever observability stack you want).&lt;/p&gt;

&lt;p&gt;Some of the standout features include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Live cross-team collaboration: Share debug sessions with teammates in real-time, like Google Docs for debugging. It's not just shared visibility, but also the ability to annotate recordings, so engineers, designers and PMs can look at the same replay data without losing any context&lt;/li&gt;
&lt;li&gt;Full-stack data capturing: Collect full-stack data from UX and console errors, to backend traces, logs and request/response errors&lt;/li&gt;
&lt;li&gt;Multiple recording modes: Multiplayer offers 3 recording modes, while other tools have one or two at most. On-demand mode allows you to manually start and stop recordings, while Continuous mode lets you record in the background while you work (both available via browser extension, in-app widget, or SDK). Conditional recording allows you to silently collect session replays of users visiting your app, based on customizable parameters you set in the UI or through the SDK.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  AI-ready Session Replays
&lt;/h3&gt;

&lt;p&gt;Another feature worth mentioning is AI-ready session replays. Modern debugging is not just about what happened; it’s about making that context directly available where you are working. Multiplayer's AI-ready session replay feature does exactly that. It features native support for the VS Code Extension and the MCP server, so Multiplayer can bring full-stack session recordings directly to your IDE and AI assistants. This means that they can be armed with complete context to reason, suggest fixes, or automate away repetitive tasks in an entirely new league of features.&lt;/p&gt;

&lt;p&gt;From inside VS Code, you can browse through user sessions, review traces and actions as well as network data, and instantly navigate to relevant code paths, all without ever leaving the editor. The AI copilots can have the same access to these recordings and can immediately know what caused a bug, how the system behaved, and what potential changes are necessary to fix it without having to switch tabs or do guessing.&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%2Fh321jfrtka7fbqv48kk7.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%2Fh321jfrtka7fbqv48kk7.png" alt="Multiplayer VS Code Extension" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Multiplayer even extends it with the MCP server, as every session is designed for machine learning, user action, log and trace, request and response headers, and annotations are available for your AI IDE or assistant. Things such as cursor position, Claude Code’s commands for classes and methods completion, Copilot’s suggestions, Windsurf files, among other things. That means your AI tools can serve up precise debugging plans, code fixes, and feature dev proposals all from your live Session Context.&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%2Fj7o8uh8lj73vivrbjl9z.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%2Fj7o8uh8lj73vivrbjl9z.png" alt="Multiplayer MCP server" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In essence, Multiplayer is intelligent asset creation from your replays, each session able to tutor, explain, or contribute something new. By connecting human context with AI reasoning, it turns debugging from an individual manual task into a collaborative, context-aware process that improves over time.&lt;/p&gt;

&lt;p&gt;In other words, Multiplayer takes debugging from something you do alone into a social, high-visibility event.&lt;/p&gt;

&lt;h2&gt;
  
  
  Multiplayer vs LogRocket
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What LogRocket Does Well
&lt;/h3&gt;

&lt;p&gt;LogRocket is among the most popular session replay tools. It captures DOM mutations, network requests, and console logs, providing visibility into what exactly the user is interacting with. It is generally used for frontend issue tracking, UI analysis, and product analytics.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where Multiplayer Stands Out
&lt;/h3&gt;

&lt;p&gt;LogRocket is incredible for visual replays, but Multiplayer is purpose-built for debugging complex technical issues and cross-team collaboration. It’s designed for full-stack visibility so you can easily jump directly from a replay to your stack trace, all in a single interface.&lt;/p&gt;

&lt;p&gt;Whereas LogRocket is built on top of third-party integrations like Sentry for logs and traces, which only show you sampled data to begin with, not endpoints or payloads. Multiplayer is full-stack out of the box, including in each session logs, traces, and headers by default.&lt;/p&gt;

&lt;p&gt;LogRocket has a rich library of integrations indeed because it doesn't natively support many features or data points. For example, while Multiplayer includes user feedback in session replays by default, with LogRocket, you’d only be able to view this information by adding the replay links in a third-party customer support tool.&lt;/p&gt;

&lt;p&gt;In conclusion, Multiplayer eliminates the legacy data lock-in and fragmentation of outdated platforms and provides teams with a fully integrated, developer-first debugging experience.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ideal Use Case
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;LogRocket: UX teams and PMs who want to study user behaviour and performance metrics&lt;/li&gt;
&lt;li&gt;Multiplayer: Support and Engineering teams who need fast, actionable debugging context and real-time collaboration&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Summary Table
&lt;/h3&gt;

&lt;p&gt;Taking a look at the summary table, we can see how both of them compare across some feature sets.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Feature&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;LogRocket&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Multiplayer&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Session Replays&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Collaboration&lt;/td&gt;
&lt;td&gt;Limited&lt;/td&gt;
&lt;td&gt;Advanced&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Full-stack Data&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vendor Lock-in&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Developer Focus&lt;/td&gt;
&lt;td&gt;Limited&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Multiplayer vs Sentry
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What Sentry Does Well
&lt;/h3&gt;

&lt;p&gt;Sentry is an error and performance monitoring tool. It does a great job in getting exceptions, traces and stack from backend and frontend applications. It’s most powerful for alerting, crash tracking and performance analytics.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where Multiplayer Stands Out
&lt;/h3&gt;

&lt;p&gt;Sentry is great at telling you when something is broken. Multiplayer however, shows you how it broke. With full stack replays and collaborative debugging tools, Multiplayer fills in the gap of visibility that fits in between what Sentry reports and what developers need to actually reproduce and resolve issues more quickly.&lt;/p&gt;

&lt;p&gt;Unlike Sentry, which is primarily an error-monitoring tool that has since added session replays as a feature, Multiplayer was built from the beginning to cater for support workflows and cross-team collaboration. Multiple recording modes and versatile install options allow you to have more freedom in both what and how you record.&lt;/p&gt;

&lt;p&gt;Multiplayer also records all the things in a session, not just errors and stack traces, but also user feedback, (un-sampled) traces, as well as request and response content, including full headers.&lt;/p&gt;

&lt;p&gt;And beyond visibility, Multiplayer makes debugging a shared activity. Teams can annotate replays, share notes and collaborate in real-time with the injection of built-in notebooks and comments, which Sentry just does not offer.&lt;/p&gt;

&lt;p&gt;In other words, Sentry tells you what went wrong, whereas Multiplayer helps you understand why and how to fix it, with your team.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ideal Use Case
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Sentry: Teams who want robust error tracking and alerts across backend and frontend&lt;/li&gt;
&lt;li&gt;Multiplayer: Teams who want session replays, and context-aware collaboration and editing tools&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Summary Table
&lt;/h3&gt;

&lt;p&gt;Again the summary table illustrates how they compare feature by feature.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Feature&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Sentry&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Multiplayer&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Error Monitoring&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Session Replays&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Advanced&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Collaboration&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;td&gt;Advanced&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Backend Tracing&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Per session, un-sampled&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Frontend Debugging&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Multiplayer vs Datadog
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What Datadog Does Well
&lt;/h3&gt;

&lt;p&gt;Datadog is a giant in observability as well as infrastructure monitoring, APM, logs, traces and more. It’s great for large scale production systems which require the visibility to access distributed environments.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where Multiplayer Stands Out
&lt;/h3&gt;

&lt;p&gt;Datadog is made for tracking systems, stats and infra monitoring. Multiplayer instead is focused on full-stack sessions and the human side behind troubleshooting technical support issues. It allows engineers to understand exactly what happened for each user bug (from the user actions to the correlated traces and logs), without spending hours searching for this specific information among dashboards and logs.&lt;/p&gt;

&lt;p&gt;In reality, Multiplayer isn’t a replacement but a complement to Datadog: the latter is still great for high-level observability; however, Multiplayer significantly increases efficiency in certain workflows such as debugging and repro-ing issues, and collaborating on support across teams. It integrates smoothly with your stack so you can have end-to-end visibility without having to manually capture context for each issue.&lt;/p&gt;

&lt;p&gt;Although Datadog RUM provides frontend monitoring, building holistic observability would require you to embrace the whole of their ecosystem, APM, logs and infrastructure modules, with potential vendor lock-in. And even then, these replays are typically incomplete: they lack user feedback, request and response content and headers, etc. creating the need to chain multiple tools together. Datadog is also SaaS-only, excluding teams that require data to be self-hosted due to privacy laws, residency or complex regulatory requirements.&lt;/p&gt;

&lt;p&gt;Multiplayer, on the other hand, gives you full backend-agnostic visibility right from the start. It retains everything in a session, like user feedback, un-sampled traces, full request and response data, headers, all of it nicely organised for machine learning consumption. As it's powered by OpenTelemetry, it plugs into whatever observability platform you already have and shares full session context directly with your IDE or AI assistant for quicker, more accurate fixes. It runs in any environment, be that production, staging or development and from cloud to on-premises, from serverless to hybrid, with the option for SaaS or self-host.&lt;/p&gt;

&lt;p&gt;In other words, Datadog is for system health, and Multiplayer is for session clarity, with the whole narrative from crash to resolution.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ideal Use Case
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Datadog: Ops and DevOps teams monitoring cloud infrastructure and application performance&lt;/li&gt;
&lt;li&gt;Multiplayer: Support and Engineering teams diagnosing browser-specific issues and UX user behaviours&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Summary Table
&lt;/h3&gt;

&lt;p&gt;Looking through the feature summary table we can see the difference between them and how they compare.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Feature&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Datadog&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Multiplayer&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Infrastructure Monitoring&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Backend Tracing&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Per session, un-sampled&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Session Replay&lt;/td&gt;
&lt;td&gt;Basic (add-on pricing)&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Collaboration&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Advanced&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Frontend Debugging&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Multiplayer vs FullStory
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What FullStory Does Well
&lt;/h3&gt;

&lt;p&gt;FullStory is well known for its high fidelity session replays and product analytics. It’s great for reading user journeys, where friction occurs and conversion funnels. It is popular among marketing and UX teams who want data-based insights.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where Multiplayer Stands Out
&lt;/h3&gt;

&lt;p&gt;Multiplayer isn’t focused on marketing metrics or analysis of user behaviour (i.e. engagement graphs or heat maps); it was designed to solve real-tech problems. It cares about the things that developers need: console logs, call stacks, backend logs, requests/response content and headers, collaborative annotations.&lt;/p&gt;

&lt;p&gt;While FullStory seems to have a lot of detailed user analytics, it doesn’t provide meaningful backend correlation like for example, you can’t tie the session to real logs, traces or request/response content. Even LogRocket offers richer technical visibility with third-party integrations. Multiplayer brings your frontend and backend data together natively.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ideal Use Case
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;FullStory: Product and UX teams optimising user flows and engagement&lt;/li&gt;
&lt;li&gt;Multiplayer: Support and Engineering teams solving bugs and user issues collaboratively&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Summary Table
&lt;/h3&gt;

&lt;p&gt;Comparing the two helps us understand where each of them excel.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Feature&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;FullStory&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Multiplayer&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Product Analytics&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Session Replay&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Full-stack Data&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Collaboration&lt;/td&gt;
&lt;td&gt;Limited&lt;/td&gt;
&lt;td&gt;Advanced&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Developer Focus&lt;/td&gt;
&lt;td&gt;Limited&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Feature Comparison Snapshot
&lt;/h2&gt;

&lt;p&gt;Taking everything we have learned into account its now more obvious to see where each tool stands and in what areas they are most relevant in as you can see here in our final feature comparison snapshot table.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Feature&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Multiplayer&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;LogRocket&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Sentry&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Datadog&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;FullStory&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Session replay&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Add on&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Full Stack Data&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Error Monitoring&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Collaboration Tools&lt;/td&gt;
&lt;td&gt;Advanced&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Developer-first Design&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Product Analytics&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vendor Lock-in&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Multiple recording models&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Which Tool Should You Choose?
&lt;/h2&gt;

&lt;p&gt;Each tool has its own advantages and disadvantages and choosing one for your application ultimately comes down to preference.&lt;/p&gt;

&lt;p&gt;When making a decision we have learned that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://trymultiplayer.link/andrew-baisden" rel="noopener noreferrer"&gt;Multiplayer&lt;/a&gt;: Excellent for engineering and support teams who wish to conduct rapid, collaborative debugging with full visibility and no data lock-in&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://logrocket.com/" rel="noopener noreferrer"&gt;LogRocket&lt;/a&gt;: Great for frontend UX teams who require detailed replays and product performance metrics&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://sentry.io/welcome/" rel="noopener noreferrer"&gt;Sentry&lt;/a&gt;: Good at error tracking and alerts for your applications on the backend, mobile, game consoles and frontend&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.datadoghq.com/" rel="noopener noreferrer"&gt;Datadog&lt;/a&gt;: Fantastic for infrastructure and operations teams that manage very large, high-scale systems&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.fullstory.com/?fs_product=AN" rel="noopener noreferrer"&gt;FullStory&lt;/a&gt;: Ideal for product and marketing teams who need to dive deep on user behaviour &amp;amp; engagement&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's worth noting that every platform mention with the exception of FullStory offers a free plan including a trial period. Prices vary but there is the option to choose between monthly and annual billing. They also offer various packages all with different features as you would expect such as free, pro, teams, enterprise etc... Costs change all the time so please go to the individual websites to see the latest prices for each subscription.&lt;/p&gt;

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

&lt;p&gt;Debugging and visibility tools are critical to keeping the things we build running smoothly, and as we all know easier to use products are good for everyone. However not all of them serve the same purpose.&lt;/p&gt;

&lt;p&gt;If your team is looking for a modern, developer-centric approach that combines replays, debugging context, and real-time collaboration then Multiplayer is a very strong contender. It closes the gap between classic monitoring and getting your hands dirty with debugging, enabling teams to visualise, understand, and get around issues more quickly than ever before.&lt;/p&gt;

&lt;p&gt;Take a look at &lt;a href="https://trymultiplayer.link/andrew-baisden" rel="noopener noreferrer"&gt;Multiplayer&lt;/a&gt; which is an excellent modern alternative for debugging and session replays.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>productivity</category>
      <category>programming</category>
    </item>
    <item>
      <title>My AI Agent Team - 7 AI Tools For Getting Things Done</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Thu, 06 Nov 2025 17:43:54 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/my-ai-agent-team-7-ai-tools-for-getting-things-done-4551</link>
      <guid>https://forem.com/andrewbaisden/my-ai-agent-team-7-ai-tools-for-getting-things-done-4551</guid>
      <description>&lt;p&gt;At this point, everybody has one favourite AI app they use for work.&lt;/p&gt;

&lt;p&gt;I have taken it a bit further. This year, I assembled (no pun intended) my own AI agent dream team, a group featuring seven of the best AI models around. Each has its own special characteristic, personality and speciality.&lt;/p&gt;

&lt;p&gt;A lot of the time, I even use the same prompt in all of them just to see what different answers they show me. It’s like a group of experts debating ideas, in real-time, everyone with an opinion and a style.&lt;/p&gt;

&lt;p&gt;And because all of these models are at or near the top in LLM leaderboards, I know that it’s giving me some of the best reasoning, knowledge and insight out there at the moment. Below is the full lineup of my team of AI agents, how I utilise them, what they excel at and why you might want to build some yourself.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. ChatGPT The All-Around Powerhouse
&lt;/h2&gt;

&lt;p&gt;ChatGPT is my all-purpose assistant. It’s excellent for the coders, thinkers and content writers, planning daily activities or creating images. Whether I’m writing code or brainstorming ideas, ChatGPT gets the job done.&lt;/p&gt;

&lt;p&gt;The recent models also have more of a talkative personality, reason better and can handle longer contexts. I use it as my daily driver for most tasks like productivity, general tasks and coding. On mobile, it’s my favourite for fast research and idea dumps when I’m on the go. It’s the way your reliable co-worker always comes through because it's fast, smart and well thought out. It's also very good at generating images.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Claude The Calm Strategist
&lt;/h2&gt;

&lt;p&gt;Claude can act as a second brain. It’s great for structured reasoning, long-form writing and big-picture thinking. Even though ChatGPT is great for problem-solving and quick tasks, Claude sometimes shines when I need to take a step back and dig deeper, like when analysing docs, decoding complex concepts or brainstorming projects.&lt;/p&gt;

&lt;p&gt;It’s also still one of the best coding LLMs out right now, especially when it comes to producing clean and readable code. If I’m focusing on an article, a tech review or a deep work session, Claude is a good choice.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Qwen The Researcher
&lt;/h2&gt;

&lt;p&gt;Qwen is one of the up-and-coming stars in my AI rotation. It's a great tool for data collection, analysis and research. It can hunt down citations, detail studies and sort through niche technical topics pretty well.&lt;/p&gt;

&lt;p&gt;It’s also good at coding, maybe not as slick as ChatGPT or Claude, but fast and flexible. I use Qwen when I want an alternative or want to see a different perspective on something.&lt;/p&gt;

&lt;p&gt;ChatGPT and Claude often take the lead; Qwen is a great alternative for some tasks or when the others are busy.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Grok The Real-Time News Expert
&lt;/h2&gt;

&lt;p&gt;Grok, developed by xAI, reads directly from Twitter/X. Basically, for me, it’s the AI news engine that helps keep me up to date on tech, AI and world events, all in real time.&lt;/p&gt;

&lt;p&gt;I use it to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Track trending topics&lt;/li&gt;
&lt;li&gt;Receive instant inspiration while browsing&lt;/li&gt;
&lt;li&gt;Summarise what’s happening in tech, news, and everything else&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s also great for live research and discovery because it is plugged into the conversations going on online. If I want to know what’s hot or what the devs are talking about today, Grok is the one.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Gemini The Polished Problem-Solver
&lt;/h2&gt;

&lt;p&gt;Gemini seems like a natural multitasker. I find that it is a great tool for structured problem-solving, summarisation and quick fact questions.&lt;/p&gt;

&lt;p&gt;It’s not always as wild and inventive as ChatGPT or Claude, but it’s solidly reliable, and of course, so deep in Google’s ecosystem, which makes it ideal for when I’m researching notes in Google Docs or Drive, or even browsing YouTube videos.&lt;/p&gt;

&lt;p&gt;I use Gemini all the time when I’m looking for a second opinion on something technical or factual. I guess you could say it's my "grounded" agent, which is less opinionated and more balanced. Image creation is right up there with the best platforms, too.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. DeepSeek The Document Analyst
&lt;/h2&gt;

&lt;p&gt;DeepSeek is one of my favourite tools for when you need something more like an ask-heavy research task. It's pretty impressive because you can upload and then analyse large numbers of files.&lt;/p&gt;

&lt;p&gt;I use it when I’m doing document insight studies or comparing any large reports or technical papers. When I need to sort through a complicated dataset or a research paper, DeepSeek is my data scientist because it can handle multiple attachments more so than other LLMs and all for free. &lt;/p&gt;

&lt;h2&gt;
  
  
  7. Perplexity The AI Search Engine
&lt;/h2&gt;

&lt;p&gt;I turn to the A.I., based search engine Perplexity for web searches all the time these days. It’s like Google on steroids because it goes deeper, is sourced, and explains things well.&lt;/p&gt;

&lt;p&gt;I use it when I need to look something up quickly or verify facts. It’s great for brainstorming too, as I can search for something like "best JavaScript frameworks", and it will condense everything and even create a summary in a table.&lt;/p&gt;

&lt;p&gt;It’s less like talking to a chatbot and more like talking to a research assistant who can think critically. Perplexity is also baked into the Comet Browser, so I can use it natively in my primary browser all the time.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Use Them Together
&lt;/h2&gt;

&lt;p&gt;Here’s the fun part: I don’t use these tools separately; I treat them like an AI team.&lt;/p&gt;

&lt;p&gt;When I’m exploring a topic, I will most times use the same prompt in multiple model tools like for example, asking all of them:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"What are the key trends shaping AI development in 2025?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Each one responds differently, like they are individuals in a team:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ChatGPT might give a broad, structured overview&lt;/li&gt;
&lt;li&gt;Claude offers a calm, reasoned breakdown&lt;/li&gt;
&lt;li&gt;Qwen pulls in research-heavy details&lt;/li&gt;
&lt;li&gt;Grok gives me the latest trending context&lt;/li&gt;
&lt;li&gt;Gemini adds factual precision&lt;/li&gt;
&lt;li&gt;DeepSeek analyses data sources&lt;/li&gt;
&lt;li&gt;Perplexity wraps it all up with verified references&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s like having a debate between world-class experts, and I get to listen to all sides before forming my own conclusion. I even have the same setup on my phone because I have the mobile apps for all of them, so I can repeat the same process on the go. It truly feels like having a team of AI agents or team members everywhere you go.&lt;/p&gt;

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

&lt;p&gt;This year, a single AI model is no longer enough. We have a huge choice of LLMs and each has its own strengths, personality and bias, and that’s why I use many of them together. Viewing them as a panel of experts makes for fast, easy and deep learning and information gathering.&lt;/p&gt;

&lt;p&gt;And because all of these models are trying to be at the top of the global LLM leaderboards, I know I’m getting best-in-class reasoning and the most up-to-date insights.&lt;/p&gt;

&lt;p&gt;AI isn’t changing the way we work; it’s improving the way we think. And you know what that really and truly is, a lot of people's most productive upgrade in many years.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>opensource</category>
      <category>watercooler</category>
    </item>
    <item>
      <title>How AI Browsers Are the New Hotness and What This Means for Us</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Wed, 05 Nov 2025 16:56:09 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/how-ai-browsers-are-the-new-hotness-and-what-this-means-for-us-38dp</link>
      <guid>https://forem.com/andrewbaisden/how-ai-browsers-are-the-new-hotness-and-what-this-means-for-us-38dp</guid>
      <description>&lt;p&gt;AI is everywhere these days, and it looks like our web browsers will be the new battlefield. What we are witnessing in the world of web development and browsing is, at least, an interesting time. What was once a browser and some useful extras is quickly becoming something much deeper, and I guess you could call it a fully native AI ecosystem. Browsers are no longer just about display and navigation; nope, they are being reimagined as aides, collaborators, and even productivity powerhouses.&lt;/p&gt;

&lt;p&gt;I have been playing around with some of the new AI browsers, and I have pretty much settled on one as my primary (for now). I used to browse on Brave Browser, but now I mostly use Comet by Perplexity AI. I’m also testing out ChatGPT Atlas, and others such as Zen Browser and Dia Browser.&lt;/p&gt;

&lt;p&gt;In this article, I will walk you through:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Why AI browsers are becoming a major shift&lt;/li&gt;
&lt;li&gt;My hands-on experience with the main players&lt;/li&gt;
&lt;li&gt;What strengths they bring, and what risks we should be aware of&lt;/li&gt;
&lt;li&gt;What this means for developers, power-users and the "regular" browser user&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why AI Browsers Are Becoming Something Big
&lt;/h2&gt;

&lt;p&gt;The era of the Chrome browser with a static display, tabs, and navigation has been disrupted by tools that understand context, help you do things and speak to you like agents. &lt;/p&gt;

&lt;p&gt;Here are some of the developments worth following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Built-in AI personal assistants that summarise pages, highlight data, and compare open tabs. For example, Comet allows you to highlight any text and ask a question about it.&lt;/li&gt;
&lt;li&gt;Browsers that are designed for workflows, not just websites. They can assist you in sending emails, organising tabs, and even making purchases and all powered by AI.&lt;/li&gt;
&lt;li&gt;A new race of big tech actors creating "agentic browsers" (as opposed to just browsers with AI features). And Comet is "the AI browser Google wants."&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s not just a question of "which browser do I use" but also, "of which known browser agent am I part".&lt;/p&gt;

&lt;p&gt;On Twitter/X, a developer called Dominik Kundel created a viral post where he said, "With ChatGPT Atlas, every coding app is now a vibe coding app". And he showed a video demo.&lt;/p&gt;

&lt;p&gt;You can see it here:&lt;/p&gt;

&lt;p&gt;

&lt;iframe class="tweet-embed" id="tweet-1980720031303716917-648" src="https://platform.twitter.com/embed/Tweet.html?id=1980720031303716917"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1980720031303716917-648');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1980720031303716917&amp;amp;theme=dark"
  }





&lt;/p&gt;

&lt;h2&gt;
  
  
  My Hands-On Experience with the Main Players
&lt;/h2&gt;

&lt;p&gt;Here’s how things have gone in real use and what I tried, what I switched to, and what I’m watching next.&lt;/p&gt;

&lt;h3&gt;
  
  
  Comet (Perplexity AI)
&lt;/h3&gt;

&lt;p&gt;After years on Brave, I migrated to Comet. What drew me in was the fact that Comet starts as an AI browser (on top of Chromium) with extension and interface backward compatibility. It includes deep integration of Perplexity’s AI assistant, so not just a sidebar but context-aware interaction. In use, I found it pretty slick; you can highlight data and have the browser summarise multiple tabs or request it to go find insights across all open tabs.&lt;/p&gt;

&lt;p&gt;Despite all of this, I believe that there are real risks which people have noted. For example, security analysis at Brave reveals that indirect prompt injection attacks (based on screenshots or hidden content) can seize control of agentic browsers like Comet.&lt;/p&gt;

&lt;p&gt;They made a Twitter/X thread on it, which you can read here:&lt;/p&gt;

&lt;p&gt;

&lt;iframe class="tweet-embed" id="tweet-1980667345317286293-444" src="https://platform.twitter.com/embed/Tweet.html?id=1980667345317286293"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1980667345317286293-444');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1980667345317286293&amp;amp;theme=dark"
  }





&lt;/p&gt;

&lt;h3&gt;
  
  
  ChatGPT Atlas (OpenAI)
&lt;/h3&gt;

&lt;p&gt;This is OpenAI's entry into the AI browser space, released 21 October 2025. I have been experimenting with it. Obviously, it uses the OpenAI model ecosystem, with deep integration with ChatGPT workflows, and a big brand backing.&lt;/p&gt;

&lt;p&gt;At this stage, I find that it's fresh, but not as mature as Comet on a day-to-day use basis, but it could be promising. I feel like if it had been released before Comet or even on the same day, it would have eaten into its market share.&lt;/p&gt;

&lt;h3&gt;
  
  
  Other Browsers like Zen and Dia
&lt;/h3&gt;

&lt;p&gt;Zen Browser is another worth mentioning. It has been out for a while and has a decent following. Zen was even a top open source project on GitHub in 2025, which you can read about here: &lt;/p&gt;

&lt;p&gt;

&lt;iframe class="tweet-embed" id="tweet-1983296724920926681-630" src="https://platform.twitter.com/embed/Tweet.html?id=1983296724920926681"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1983296724920926681-630');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1983296724920926681&amp;amp;theme=dark"
  }





&lt;/p&gt;

&lt;p&gt;Dia Browser and others are also appearing. It’s still early days, but these are the signs that the browser market is shifting. Dia is essentially a successor to the Arc Browser, which was abandoned over a lack of community uptake and a high learning curve, plus technical debt. The switch to Dia was because it seemed like a good strategic move toward the future state of browsers, and also to address some issues in Arc.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Strengths Do You Get, And What Needs Caution
&lt;/h2&gt;

&lt;p&gt;Here’s a breakdown of what’s important and what you should keep your eyes on.&lt;/p&gt;

&lt;p&gt;AI-first browsers are changing the way we work with the web. They are not just looking over your shoulder at specific tabs and URLs; they know what content you are viewing, so you can ask questions, summarise pages, and even compare info from different tabs. This context-enhanced approach provides a speed-up for workflows by automatically handling repetitive browsing functions of search, analysis and reason across sources. It also combines everything into one environment, so no toggling between your browser, an A.I. tool and a bunch of extensions. For Developers and power users, adopting early means they can influence the development of this evolving ecosystem and give them a competitive edge as the technologies reach a level of maturity.&lt;/p&gt;

&lt;p&gt;But agentic, AI-powered browsers carry new risks. Security and privacy also begin to get tricky, as sneaky prompt injections tucked away in images or webpages can influence how an assistant reacts, something that’s been demonstrated by a recent Brave study. These systems also process far more contextual information, giving some people more reasons to worry about the data which is stored, accessed and the transparency of the terms. And although the potential is huge, the ecosystem is also young, with some instability and performance bottlenecks. So basically, deeper integration with certain AI models and vendors could result in lock-in, making it more difficult to remain long-term independent and flexible.&lt;/p&gt;

&lt;h2&gt;
  
  
  What This Means for Developers and Power Users
&lt;/h2&gt;

&lt;p&gt;For developers like those on Dev.to, Medium, freeCodeCamp and social media, this change has a big upside:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;New tooling mode&lt;/strong&gt;: The browser is a part of your dev flow, not only to browse docs and GitHub, but reason + summarise + multi-tab cross-analyse&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;New extension/agent opportunities&lt;/strong&gt;: If you create tools, agents or browser extensions, this is also a great field because it affects the design space when you build AI-native browser tools.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mistakes of the past&lt;/strong&gt;: We will do things in our browser history, instant summarisation, tab reasoning, maybe even multi-tab context features. Your applications might want to treat smarter clients.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The importance of a security-first mindset only increases&lt;/strong&gt;: As we embed more AI agents into browsers, new routes for exploitation change. Developers must be ready for new attacks, especially if they are developing web apps being consumed by agentic clients.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Adoption and migrating concerns&lt;/strong&gt;: In case you lead teams or recommend tooling, monitoring maturity and trade-offs of these browsers make sense before whole adoption.&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;AI browsers are more than hype; they are the real and huge shift in how we browse, search and interact with the web. For me, moving from Brave to Comet made a difference to my workflow, history-aware browsing and time to get things done. I’m also keeping a close eye on Atlas and the other AI browsers in development.&lt;/p&gt;

&lt;p&gt;Regardless, as amazing a development as that is, it's also one that brings with it more responsibility. We should be aware of the security implications, data privacy and the new threat models which emerge when dealing with agentic browsing.&lt;/p&gt;

&lt;p&gt;For developers or power users, this is a great time to play with new generations of browsers. They might end up influencing not just what you see on the web, but how developers and workers work online.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>opensource</category>
      <category>productivity</category>
    </item>
    <item>
      <title>How Verdent Deck Supercharged My Workflow - Building Apps with Multiple AI Agents in Parallel</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Tue, 04 Nov 2025 11:31:19 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/how-verdent-deck-supercharged-my-workflow-building-apps-with-multiple-ai-agents-in-parallel-3o5g</link>
      <guid>https://forem.com/andrewbaisden/how-verdent-deck-supercharged-my-workflow-building-apps-with-multiple-ai-agents-in-parallel-3o5g</guid>
      <description>&lt;p&gt;AI coding tools have made a lot of progress over the years, as we have all seen. They have gone from simple autocomplete and snippet generators to something much closer to a teammate. A teammate who knows your codebase, understands your architecture and can actually contribute to it in a good way. &lt;/p&gt;

&lt;p&gt;A few months back, I got early access to Verdent AI before its official release. It was still in beta at the time, and I was excited to give it a shot, especially since Verdent’s offering was unique:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The leading all-in-one coding agent for top-tier AI models — integrated, orchestrated, and fully unleashed. Achieved the highest SWE-bench Verified results among real production-level agents, including Claude-Code and Codex.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It almost sounded too good to be true. However, after trying Verdent Deck, I noticed that Verdent is not just another "AI code generator." Verdent is a platform specifically designed for real-world development, the kind that uses different branches, isolates features, and keeps your codebase perfectly polished, like version control.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes Verdent Different?
&lt;/h2&gt;

&lt;p&gt;Verdent takes a new approach to AI-assisted coding. Instead of relying on a single model, it combines multiple AI agents, each specialising in different strengths. Think of it as merging the versatility of Claude-class creativity with the precision of Codex-class reasoning.&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%2Fz0of1ducoifv3tcj0dlo.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%2Fz0of1ducoifv3tcj0dlo.png" alt="Verdent Deck AI Reasoning" width="800" height="311"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Verdent is a totally new take on AI-assisted coding. Instead of relying on a single model, it uses several AI agents, each developed in its own specialisation. It’s as if we have combined Claude-class versatility and Codex-class precision. &lt;/p&gt;

&lt;p&gt;The power of Verdent is in the agent's power to combine without overpowering. Verdent utilises git worktrees to develop exclusive branches designed for every AI-driven change. In practice, it means that there are no merge conflicts, no erased commits, and no ruined main branch. It is like operating a squad of AI devs in independent sandboxes, each safely adding content at the right time.&lt;/p&gt;

&lt;p&gt;There are two main products:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Verdent for VS Code&lt;/strong&gt; – A coding assistant that lives directly inside your editor, which is perfect for devs who prefer tight control.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Verdent Deck&lt;/strong&gt; – A visual dashboard that lets you orchestrate multiple projects and agents at the same time, complete with task views, diffs, and documentation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After using Verdent Deck, it completely changed how I approached multitasking and experimentation in my projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Beta Experience with Verdent Deck
&lt;/h2&gt;

&lt;p&gt;When I first joined the beta in August 2025, Verdent already felt pretty well polished for an early release.&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%2Fz60mdqyqq6v9rqw1ny1u.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%2Fz60mdqyqq6v9rqw1ny1u.png" alt="Verdent Deck Dashboard" width="800" height="441"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Setup was fast, I hooked up my local projects and, after a few moments, Verdent detected my repo setup and active branches. It then loaded up what it refers to as "Decks", which are sandboxed workspaces where I could designate AI tasks or feature builds. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I could stack tasks instead of waiting for one to finish&lt;/li&gt;
&lt;li&gt;I could run multiple apps or features in parallel, each in its own isolated branch&lt;/li&gt;
&lt;li&gt;I could switch contexts easily thanks to git worktrees integration&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The first impressions instantly worked for me. As someone who frequently has multiple different experiments or projects going on at the same time, this was a huge time-saver. No need to constantly switch contexts, no left behind broken parts, just clean, parallel progress.&lt;/p&gt;

&lt;h2&gt;
  
  
  Vibe-Coding with AI
&lt;/h2&gt;

&lt;p&gt;I liked that Verdent Deck allows vibe coding. I was constantly in that flow state of experimentation, pursuing creative ideas wherever they led, all while keeping things organised. Trial and error became quick, cheap, and transparent. During the beta, I used Verdent Deck to spin up several tiny projects just to see what it could handle. &lt;/p&gt;

&lt;p&gt;I built simple prototypes, tweaked features, and pushed updates, all while watching Verdent’s agents run multiple parts of the stack. &lt;/p&gt;

&lt;p&gt;Each task came with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A diff view showing exactly what Verdent changed&lt;/li&gt;
&lt;li&gt;Inline reasoning explaining why it made each modification&lt;/li&gt;
&lt;li&gt;Automatically updated docs for every function or component touched&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The final example might not seem all that, but it proved a critical part of the power of multiple parallel backgrounds. Especially when you are juggling complex responsibilities, consistent documentation is crucial. Verdent wasn’t just coding; it was documenting its work as a teammate.&lt;/p&gt;

&lt;p&gt;Here are some of the projects I worked on:&lt;/p&gt;

&lt;p&gt;A personal CRM App:&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%2F45rg97i9ug0fa2vcrqum.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%2F45rg97i9ug0fa2vcrqum.png" alt="Personal CRM App" width="800" height="361"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A journal app:&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%2F0pjm5zwh3vzn054peag1.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%2F0pjm5zwh3vzn054peag1.png" alt="Journal App" width="800" height="2086"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A radar app:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1762195523%2Fbsg-dradis-radar_vchga2.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1762195523%2Fbsg-dradis-radar_vchga2.png" alt="Radar App" width="800" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  From Beta to Full Launch
&lt;/h2&gt;

&lt;p&gt;Fast-forward to today, and Verdent is out of beta, and it’s grown a lot since I first tried 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%2Fwd4xgonxs2cqoheoi78z.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%2Fwd4xgonxs2cqoheoi78z.png" alt="Verdent Deck Model Selectors" width="800" height="497"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The production version is faster and more stable, and feels more connected. Diff reviews are suddenly a much better experience, the dashboards are sleek, and the smart AI agents collaborate even more smoothly. You might barely notice it, but Verdent’s orchestration system now supports real-time cross-validation between agents. &lt;/p&gt;

&lt;p&gt;When the AI suggests a change, another one can validate its logic before it’s set in the code. It’s as if we have implemented a built-in code review system where several AI's check each other. For developers, it means fewer regressions, fewer subtle logic errors, and a higher level of trust in the code you send.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Verdent Feels Like a Real Teammate
&lt;/h2&gt;

&lt;p&gt;Some AI tools have stopped at "here’s some code." Verdent goes further because every change Verdent Deck proposes has a diff reasoning, and optionally, documentation updates, so you always know what and why something has changed. It is not just a matter of timing; it is a matter of confidence and situational awareness. &lt;/p&gt;

&lt;p&gt;When you use Verdent Deck, it is like having a small dev team. Each agent is clever, independent, and smart enough and never breaks the main branch. Also, the code you receive is clean and ready for production, and you can expand the infrastructure and system logic. For people and small groups, this is a great advantage.&lt;/p&gt;

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

&lt;p&gt;From the beta test period to working with the full release, my experiences with Verdent have convinced me that this is the future of AI building. Verdent Deck is more than an assistant. It is an AI building experience that tackles complexity, parallelises work, and encourages discipline while staying out of your way. &lt;/p&gt;

&lt;p&gt;If you have ever wished that AI code tools could manage multiple projects, multiple agents, and zero conflicts, take a look at Verdent. My work on this platform feels like working with a team instead of with a tool.&lt;/p&gt;

&lt;p&gt;Check it out: &lt;a href="https://verdent.ai" rel="noopener noreferrer"&gt;verdent.ai&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%2F63fxttcu0zk933x2zxq5.jpg" 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%2F63fxttcu0zk933x2zxq5.jpg" alt="Verdent Deck AI" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>opensource</category>
      <category>productivity</category>
    </item>
    <item>
      <title>9 Productivity Hacks - AI Tools That I'm Using in 2025</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Mon, 03 Nov 2025 18:06:47 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/9-productivity-hacks-ai-tools-that-im-using-in-2025-2nj4</link>
      <guid>https://forem.com/andrewbaisden/9-productivity-hacks-ai-tools-that-im-using-in-2025-2nj4</guid>
      <description>&lt;p&gt;In 2025, AI tools have made my workflow soooo much more productive by speeding up a lot of mundane tasks. Each day, they feel like an extension of my work and creative thoughts. Whether I am coding, researching or just trying to keep up to date with this never-ending stream of AI news, which keeps us all entertained and busy. &lt;/p&gt;

&lt;p&gt;To keep my productivity on track and stay ahead, these 9 AI tools are the ones I use the most, almost every day:&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;1. Comet Browser - The AI Browser for Learning Fast&lt;/strong&gt;
&lt;/h2&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%2F4ei7im15omf0usuqqkt3.jpg" 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%2F4ei7im15omf0usuqqkt3.jpg" alt="Comet Browser" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I was part of a select early group invited to try Perplexity's agents with the Comet browser. I was pretty impressed by how good the AI assistant was, as well as its ad-blocking features. When it was finally released to the public, Comet Browser quickly became my main browser. &lt;/p&gt;

&lt;p&gt;It is built by Perplexity, which means that Perplexity Search is built in, so I can use my favourite AI search engine 24/7. However, the killer feature is that I can summarise YouTube videos and take out the key insights using Comet. This is an amazing feature because it allows you to speed watch videos, getting all the information you need, so sort of like binging a Netflix series, although you're not really watching, you're getting all the information, saving you from having to watch the whole video unless you want to.&lt;/p&gt;

&lt;p&gt;It can feel like a cheat code if you just so happen to have a long watch list of saved videos; you no longer need to spend many hours watching something which might not be highly relevant. With Comet, I can summarise, gain insights, watch another video, and that is it. &lt;/p&gt;

&lt;p&gt;So, if I am reading a book or researching a topic, I can open a dozen YouTube videos all at once, summarise them, and move on. There is no need for writing down notes or pausing the video, just quick learning. The AI assistant works everywhere, but if I need a standard search, I can switch back to Google at any moment. Of course, the AI assistant can do a lot more than that. I just scratched the surface. The key takeaway here is speed! Fast task completion all the time.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://www.perplexity.ai/comet" rel="noopener noreferrer"&gt;https://www.perplexity.ai/comet&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;2. Cursor - Coding with an AI Teammate&lt;/strong&gt;
&lt;/h2&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%2F0afo86xb9dc6725w0xjb.jpg" 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%2F0afo86xb9dc6725w0xjb.jpg" alt="Cursor IDE" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With Cursor, I have finally found my new favourite editor when deep in code. The AI-assisted IDE, which is specifically built for developers, features the Cursor Tab, which is like gold. It is a context-aware, multi-line code suggestion UI that just somehow makes sense. &lt;/p&gt;

&lt;p&gt;Write, refactor, explore a massive codebase, or whatever you throw at Cursor, it simply gets it. Also, Cursor integrates with Codex CLI, which means GPT-5, so I always have its power right in the editor. The newest version, 2.0, of Cursor makes it the number one IDE right now, in my view. Their &lt;a href="https://cursor.com/blog/2-0" rel="noopener noreferrer"&gt;blog&lt;/a&gt; is the best place to read about it and get updates on all new features. It is, probably, the closest thing you can find to a coding partner who is program-aware and knows your entire project.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://cursor.com/" rel="noopener noreferrer"&gt;https://cursor.com/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;3. Zed - The Rust-Powered Speed Machine&lt;/strong&gt;
&lt;/h2&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%2Fq7k9i2nxmrc7bb2yl4t8.jpg" 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%2Fq7k9i2nxmrc7bb2yl4t8.jpg" alt="Zed IDE" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Zed is yet another AI code editor that I return to a lot. It’s built using Rust, so it’s extremely quick and lightweight. Even the largest projects open quickly. Zed also works with Codex CLI for GPT-5 powered coding, much like Cursor. &lt;/p&gt;

&lt;p&gt;However, when I simply want a pure, focused coding experience, quick edits, or coding with no lag, I return to Zed. If Cursor is like coding alongside a friend, Zed feels like speeding around in a race car on your own. Both are excellent options, and it depends on your mood or desire when deciding which one to use.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://zed.dev/" rel="noopener noreferrer"&gt;https://zed.dev/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;4. Warp Terminal - AI Meets the Command Line&lt;/strong&gt;
&lt;/h2&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%2Fk8t9wuvkvjjrfy7m8i43.jpg" 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%2Fk8t9wuvkvjjrfy7m8i43.jpg" alt="Warp Terminal" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Using Warp felt like a leap forward when it comes to working on the command line. With its in-built AI agents and suggestions, instead of typing "how to do X in bash" to Google, I now ask Warp itself. &lt;/p&gt;

&lt;p&gt;Want a git command? Docker error? Warp’s got you covered. It also explains what commands are, so you learn a ton while working! You use it as a mini IDE as it manages workflows, commands, and scripts all in one location. When you have used it, switching back to a regular terminal can feel like a downgrade, although there are caveats and exceptions.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://www.warp.dev/" rel="noopener noreferrer"&gt;https://www.warp.dev/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;5. Codex CLI - GPT-5 in Your Terminal&lt;/strong&gt;
&lt;/h2&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%2Fmzyua3rqv1o7vz4vqhc0.jpg" 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%2Fmzyua3rqv1o7vz4vqhc0.jpg" alt="Codex CLI" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Codex CLI is another great tool in coding-inspired AI. Codex CLI is built for agentic workflows, allowing you to talk to GPT-5 directly through your terminal or editor extensions. Again, I use it both inside Cursor and Zed, and it’s just as practical as having a helpful assistant around: generating files, trying to reason about your code, automating some repetitive workloads. &lt;/p&gt;

&lt;p&gt;It’s fast and flexible, its wait time and API calls are usually not that long, and you can pair or use only your so-called ML model to keep everything quick and straightforward. If you enjoy command-line tools and some automation, then Codex is top-tier right up there with Claude Code.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://developers.openai.com/codex/cli/" rel="noopener noreferrer"&gt;https://developers.openai.com/codex/cli/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;6. Grok - The AI Engine of X (Twitter)&lt;/strong&gt;
&lt;/h2&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%2Fuq6ppwzbkv3vy3nrecv3.jpg" 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%2Fuq6ppwzbkv3vy3nrecv3.jpg" alt="Grok" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Grok by xAI is virtually an AI sidekick for Twitter/X. I use it to keep up to date with the latest developments in tech, AI, and other trending topics; it is like a real-time AI data analyst ready to help whenever you need it.&lt;/p&gt;

&lt;p&gt;It is even useful in brainstorming, generating images, and is probably the best at following real-time news. If I spot a trending topic and need more information, all I do is ask Grok for the latest data, and I get it right away. Grok is like a creator or dev living on X, ensuring that you always receive the latest information.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://grok.com/" rel="noopener noreferrer"&gt;https://grok.com/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;7. ChatGPT - The All-Rounder&lt;/strong&gt;
&lt;/h2&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%2Fffz5k55a8o4n2bljlynz.jpg" 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%2Fffz5k55a8o4n2bljlynz.jpg" alt="ChatGPT" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You probably figured this one out. ChatGPT once again is a big part of my productivity stack. I use it for research and brainstorming, code generation, and writing. It is the most efficient way to experiment with new things, troubleshoot code, or just relax. &lt;/p&gt;

&lt;p&gt;Additionally, with the ChatGPT Atlas browser, it’s becoming a real all-in-one workspace, combining chat, the web, code, and image generation all in one location. The real strength of ChatGPT is how it integrates into your job, whether you are collaborative, technical, or a combination of the two.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://chatgpt.com/" rel="noopener noreferrer"&gt;https://chatgpt.com/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;8. Claude - The Calm, Contextual Thinker&lt;/strong&gt;
&lt;/h2&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%2Fpivdgyau2bhvstkkkzx2.jpg" 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%2Fpivdgyau2bhvstkkkzx2.jpg" alt="Claude" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;ChatGPT is my all-around assistant; Claude is just as capable in a lot of areas and easily earns a spot on my list. For writing, deep research, or reasoning over long documents or technical content, Claude excels. &lt;/p&gt;

&lt;p&gt;Claude Code is right up there alongside Codex, and Sonnet 4.5 is still a very capable coding model.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://claude.ai/" rel="noopener noreferrer"&gt;https://claude.ai/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;9. NotebookLM - Learning and Researching at Speed&lt;/strong&gt;
&lt;/h2&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%2Fjmla1fj722qp5i7hg9bk.jpg" 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%2Fjmla1fj722qp5i7hg9bk.jpg" alt="NotebookLM" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For fast learning, I have a secret weapon. NotebookLM, which Google built, enables me to digest and connect information from various documents. As a result, I use it to study new technologies, analyse data, or brainstorm article ideas. &lt;/p&gt;

&lt;p&gt;It is a form of having a personal tutor who can reference PDFs, make notes, and cross-reference web sources all in a few seconds. NotebookLM saves me a whole bunch of time, much like Comet, as I can summarise large swaths of information and, in this case, turn it into a podcast to listen to at my convenience.&lt;/p&gt;

&lt;p&gt;Try it now at &lt;a href="https://notebooklm.google/" rel="noopener noreferrer"&gt;https://notebooklm.google/&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;AI tools are no longer optional as they are crucial to how I and many other people do work. You might notice that every single tool takes care of a distinct piece of the puzzle; learning quicker, coding smarter, researching deeper, or just staying updated without the unnecessary noise. &lt;/p&gt;

&lt;p&gt;In 2025, the largest productivity hack isn’t going to be more hours; it will involve using the right AI tools to make your work easier.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>webdev</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Anima Playground vs. Figma Make - Choosing the Right Vibe-Coding Tool</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Thu, 24 Jul 2025 11:09:36 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/anima-playground-vs-figma-make-choosing-the-right-vibe-coding-tool-3dhb</link>
      <guid>https://forem.com/andrewbaisden/anima-playground-vs-figma-make-choosing-the-right-vibe-coding-tool-3dhb</guid>
      <description>&lt;p&gt;Converting a design into code used to be a lengthy process with lots of back and forth between design and development teams. The handoff process could create bottlenecks and slow down product creation, as the whole process was very manual and sometimes required trial and error and lots of thinking to see if it was viable and practical to build out a new feature or component. These days, the process is considerably less intensive and even more improved because of the sheer magnitude of vibe coding tools available on the market.&lt;/p&gt;

&lt;p&gt;Vibe coding has revolutionised the way designers and developers work because now artificial intelligence can understand both your design and code files, making it a pretty straightforward process to generate working applications. Struggling over complex designs is now a thing of the past because AI is capable of turning static designs into working functional code.&lt;/p&gt;

&lt;p&gt;In today's article, we are going to look at two of the leading design-to-code vibe coding platforms, which are Anima Playground and Figma Make. Both of them are designed to convert a Figma design into a fully coded application. Anima Playground is a fantastic external platform which has a Figma extension, whereas Figma Make is built into Figma.&lt;/p&gt;

&lt;p&gt;This is a worthwhile practical comparison because choosing the wrong tool can result in a less-than-optimal workflow that requires a lot of hands-on work, which can cause unnecessary frustration. In this project, we will put both tools through the paces as we compare the same Figma design by using the same vibe-coded prompts. This will allow us to see how each platform handles everything, starting with the basic design and then converting it to a more complex interactive application. By the end of this article, it should be more obvious how these two platforms compare, making it easier to make an informed decision on which to use.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Are Vibe-Coding Tools?
&lt;/h2&gt;

&lt;p&gt;Vibe coding tools are essentially AI powered platforms that can understand design decisions and thinking processes through natural language prompts. This means that they are capable of transforming static designs into functional applications and no traditional coding is required. In traditional workflows a developer would manually build out a design by hand using code. AI powered workflows on the other hand use conversational language such as "make this section interactive" or "add a loading animation to this section". The AI would then analyse the visual as well as the users' prompt to generate the required code and this basically bridges the gap between the design and technical implementation.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Are Anima Playground and Figma Make?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Anima Playground
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.animaapp.com/" rel="noopener noreferrer"&gt;Anima Playground&lt;/a&gt; is a design-to-code platform which is a powerful tool for converting Figma designs into full functional apps. Anima allows users to import any Figma design and then use natural language prompts for adding the interaction, logic and more advanced functionality. The platform has been in Beta for a while and, is capable of generating clean and production-ready code for the popular JavaScript framework React.&lt;/p&gt;

&lt;h3&gt;
  
  
  Figma Make
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.figma.com/make/" rel="noopener noreferrer"&gt;Figma Make&lt;/a&gt; is basically Figma's official AI-powered design to code solution which is built into the Figma ecosystem as part of their AI implementation. The tool can convert static designs and Figma designs into code which is a great way for designers to create quick prototypes which can be handed off to developers. As of writing Figma Make is still in early Beta and is not available on the free Starter plan. It's only accessible via the Full seat paid plan.&lt;/p&gt;

&lt;h2&gt;
  
  
  Working On Our Figma Project
&lt;/h2&gt;

&lt;p&gt;The design which we will be working on in this project is for a Movie Database website like IMDB.&lt;/p&gt;

&lt;p&gt;You can take a look at the design below:&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%2Fcoyp5lzsu5yxnxhhmbyj.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%2Fcoyp5lzsu5yxnxhhmbyj.png" alt="Movie Database Application" width="800" height="568"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The design is fairly simple, and uses Auto Layout and components to make the layout easier to manage. It's not that complex, so it should be pretty easy to vibe code.&lt;/p&gt;

&lt;p&gt;Ok, before we start vibe coding, the first step will be to quickly run through the setup for both Anima Playground and Figma Make so we can see how they convert a Figma design into code.&lt;/p&gt;

&lt;h3&gt;
  
  
  Anima Design To Code Workflow
&lt;/h3&gt;

&lt;p&gt;The first step is to install the &lt;a href="https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-css-tailwind-mui-devmode-inspect-react-html-vue-css" rel="noopener noreferrer"&gt;Anima - Figma to Code React Dev Mode&lt;/a&gt; plugin for Figma. Once that is done you need to switch to Dev Mode and then you should see the Anima Plugin somewhere on the right. Clicking on the button will start the design-to-code conversion process.&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%2Ff3eymsyztjdnr36g1idk.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%2Ff3eymsyztjdnr36g1idk.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1752600432/anima-plugin-dev-mode_elriee.png" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After the conversion process has been completed, you should see an Open Playground button in the right sidebar. Clicking it should take you to the Anima platform, which should open in a web browser window.&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%2Fnv7bnruxs2882ma0kt2b.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%2Fnv7bnruxs2882ma0kt2b.png" alt="Anima - Figma to Code Open in Playground" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Anima Platform will start to convert the design to code as you can see here:&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%2Fw1thqk0vr83659zjsfo5.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%2Fw1thqk0vr83659zjsfo5.png" alt="Anima platform converting the design to code" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You should now see the completed design created using Vite if the server does not start automatically you can use the usual run command to start the server which is &lt;code&gt;npm run dev&lt;/code&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752601324%2Fanima-04_bdo0jt.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752601324%2Fanima-04_bdo0jt.png" alt="Anima platform Figma design in code" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see the code more or less matches the design which is not too bad for a first attempt. There are a few areas which could do with a bit of spacing but those are minor fixes and we haven't even started to write any prompts yet so its a good first start. Its worth mentioning that it's not currently responsive and none of the logic or functionality works yet, which is ok because the first step is design anyway.&lt;/p&gt;

&lt;p&gt;And here is a snapshot of what the codebase looks like:&lt;/p&gt;

&lt;p&gt;Anima is using the Vite framework to build a React 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%2Fxuhva9je2km6ts19qx8c.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%2Fxuhva9je2km6ts19qx8c.png" alt="Anima Codebase" width="800" height="420"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here we can see the app in action:&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%2Fea07i6u4u0qtgli8e2zk.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%2Fea07i6u4u0qtgli8e2zk.gif" alt="Anima live app" width="720" height="373"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Figma Make Design To Code Workflow
&lt;/h3&gt;

&lt;p&gt;The Figma Make setup is slightly different because its built into Figma. It's still in early Beta so the setup might change a little bit in the future. To begin with open a New file in Figma and click on the Make button which is at the end on the right as shown here:&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%2F8lz92ivxe8cw0g918hk5.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%2F8lz92ivxe8cw0g918hk5.png" alt="Figma Make selection screen" width="800" height="204"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You might see a getting started screen, especially if this is your first time using the tool:&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%2Ftcbqekb4ijnbfc17nrge.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%2Ftcbqekb4ijnbfc17nrge.png" alt="Figma Make getting started screen" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You should now see the Figma Make interface screen.&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752601809%2Ffigma-make-03_yfpsrb.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752601809%2Ffigma-make-03_yfpsrb.png" alt="Figma Make interface screen" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the bottom left-hand corner there is a prompt box for writing your commands and attaching media. You need to go to your Figma design file for your website or application, select it and then copy it. This can be done by right-clicking the menu and selecting copy or using the usual keyboard shortcuts for copying. Take the copied file data and paste it into the prompt box and it should attach as an image. Alternatively, you could export the design as an image and then attach it manually.&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%2Fxibppfqbj253rg60ikbq.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%2Fxibppfqbj253rg60ikbq.png" alt="Figma Make prompt box" width="764" height="546"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lastly, we just have to tell Figma Make to convert the design into a website. I used this prompt command to do so: &lt;strong&gt;Build a website based on this design&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;And this was the website Figma Make created after 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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752602233%2Ffigma-make-05_xoehow.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752602233%2Ffigma-make-05_xoehow.png" alt="Figma Make design to code" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Figma Make did an ok job of converting the design however the hero image is clearly broken and the movie list is partly inside of its container. Also Figma Make hallucinated and added a second row of movies which was not part of the original design. Its not all bad news though because the website is almost fully responsive right from the start and surprisingly the search box and the checklist on the left work. So that's pretty impressive despite the design not being quite accurate.&lt;/p&gt;

&lt;p&gt;And here is a snapshot of what the codebase looks like:&lt;/p&gt;

&lt;p&gt;Figma Make appears to be using some custom Next.js code to create a React codebase.&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%2F2wfhr5pn0fk0c4sqqes6.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%2F2wfhr5pn0fk0c4sqqes6.png" alt="Figma make codebase" width="800" height="569"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here we can see the app in action:&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%2Fw3mfvfdmidwpjs7cuwsa.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%2Fw3mfvfdmidwpjs7cuwsa.gif" alt="Figma Make live app" width="720" height="397"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Head-to-Head Comparison
&lt;/h2&gt;

&lt;p&gt;Now let's do a head-to-head and with some vibe coding tests, to see how both platforms compare when we make changes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Test 1: Adding a new section
&lt;/h3&gt;

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

&lt;p&gt;Build a streaming network section at the bottom in a new row, using these logos and add a short description of each streaming network and how much content is available on the platform.&lt;/p&gt;

&lt;h4&gt;
  
  
  Anima Playground Results
&lt;/h4&gt;

&lt;p&gt;The first image shows the initial prompt with the logos attached for Netflix, Amazon Prime Video and Disney+:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752667672%2Fanima-06_rurxbh.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752667672%2Fanima-06_rurxbh.png" alt="Anima Playground adding a new section" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The second image shows the completed design after 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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752667673%2Fanima-07_tfkpxf.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752667673%2Fanima-07_tfkpxf.png" alt="Anima Playground streaming networks section added" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make Results
&lt;/h4&gt;

&lt;p&gt;The first image has our prompt like before, with the logos for Netflix, Amazon Prime Video and Disney+:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668124%2Ffigma-make-07_vpvoq6.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668124%2Ffigma-make-07_vpvoq6.png" alt="Figma Make adding a new section prompt" width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The second image shows the updated design with the new section:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668121%2Ffigma-make-08_zdyxhw.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668121%2Ffigma-make-08_zdyxhw.png" alt="Figma Make new section" width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Verdict
&lt;/h4&gt;

&lt;p&gt;Winner: Anima 🏆&lt;/p&gt;

&lt;p&gt;Anima wins this first round because it's possible to attach multiple images as part of the prompt. I'm not sure what the limit is, but I was able to attach at least 6 images. This is important because I wanted to add more than 3 streaming networks, but was limited to 3 with Figma Make, so I had to settle for this design. I suppose I could have added more logos with a second prompt, but regardless, it would have shown that Anima is slightly more capable in this area. Both designs do look good, though, and follow the prompt, although the Anima design is slightly better overall because the content is not outside of the container.&lt;/p&gt;

&lt;h3&gt;
  
  
  Test 2: Changing the style
&lt;/h3&gt;

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

&lt;p&gt;Change the font type of the website to Roboto Condensed and the background colour to #0A0606&lt;/p&gt;

&lt;h4&gt;
  
  
  Anima Playground Results
&lt;/h4&gt;

&lt;p&gt;In this image we can see how the website has been updated with a different background colour and font style:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668633%2Fanima-08_kmpim2.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668633%2Fanima-08_kmpim2.png" alt="Anima Platform website new styling" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make Results
&lt;/h4&gt;

&lt;p&gt;This is how our website looks in Figma Make after the new updates:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668728%2Ffigma-make-09_akwudz.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668728%2Ffigma-make-09_akwudz.png" alt="Figma Make new website styling" width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Verdict
&lt;/h4&gt;

&lt;p&gt;Winner: Draw 🤝&lt;/p&gt;

&lt;p&gt;It's a draw, although I should mention that Anima Playground changed the background colour for the header, and Figma Make left it the same. Whether the header background can be considered part of the overall background for the website is subjective I guess.&lt;/p&gt;

&lt;h3&gt;
  
  
  Test 3: Modifying the layout
&lt;/h3&gt;

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

&lt;p&gt;Turn the 5-column grid section with the movies into a 4-column grid and add two new rows of movies underneath.&lt;/p&gt;

&lt;h4&gt;
  
  
  Anima Playground Results
&lt;/h4&gt;

&lt;p&gt;This is how our website looks after the update:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668966%2Fanima-09_sugpqu.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752668966%2Fanima-09_sugpqu.png" alt="Anima Platform website new grid layout and content" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make Results
&lt;/h4&gt;

&lt;p&gt;And this is how our website looks in Figma Make after the update:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669071%2Ffigma-make-10_taic9h.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669071%2Ffigma-make-10_taic9h.png" alt="Figma Make website new grid layout and content" width="800" height="431"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Verdict
&lt;/h4&gt;

&lt;p&gt;Winner: Anima 🏆&lt;/p&gt;

&lt;p&gt;Anima gets the win here because it more closely followed the original prompt. They both had a slightly different approach to this prompt. Anima Playground is duplicating the content and creating new rows, which is fine because the design is correct and follows the prompt.&lt;/p&gt;

&lt;p&gt;Figma Make created too many rows because it was hallucinating at the start when it created more content than needed, which was not part of the original design. So it has created two rows for every one row I requested. It did manage to find images for the new content though and they are sized well although not all of the movies have images.&lt;/p&gt;

&lt;h3&gt;
  
  
  Test 4: Updating the CTA section
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Prompts Used
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Prompt 1&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Update the text in the Superman hero section at the top to this:&lt;/p&gt;

&lt;p&gt;"Superman is faced with the profound challenge of reconciling two vastly different parts of himself—his alien heritage as the last son of Krypton and his human upbringing as Clark Kent, a mild-mannered reporter raised in the heartland of Kansas. While he strives to embody the timeless ideals of truth, justice, and the best of humanity, he finds himself increasingly at odds with a modern world that regards these values as naïve or antiquated. As society grows more cynical and divided, Superman must navigate the tension between who he is, where he comes from, and what he stands for—ultimately questioning whether there’s still a place for a hero who believes in hope, compassion, and doing what’s right, no matter the cost."&lt;/p&gt;

&lt;p&gt;Make the buttons in the hero section rectangles with flat edges instead of rounded corners, and move all of the content to the right-hand side of the hero image.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prompt 2&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Replace the hero image with this one attached&lt;/p&gt;

&lt;h4&gt;
  
  
  Anima Playground Results
&lt;/h4&gt;

&lt;p&gt;I actually had to use two prompts because the first time Anima did not make the changes for some reason:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669684%2Fanima-10_lcppis.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669684%2Fanima-10_lcppis.png" alt="Anima website hero update prompt" width="800" height="417"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After making Anima aware that the changes were not visible, it noticed the error and fixed them in the second attempt:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669701%2Fanima-11_fxki3d.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669701%2Fanima-11_fxki3d.png" alt="Anima website second hero update prompt" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the final prompt, I got Anima to change the image in the hero:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669684%2Fanima-12_j3fphh.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752669684%2Fanima-12_j3fphh.png" alt="Anima website hero image update prompt" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make Results
&lt;/h4&gt;

&lt;p&gt;Here is how our hero image looks after the first 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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752670050%2Ffigma-make-11_kaqza5.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752670050%2Ffigma-make-11_kaqza5.png" alt="Figma Make website hero update prompt" width="800" height="430"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And this is what it looks like after the second 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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752670047%2Ffigma-make-12_oarmj1.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752670047%2Ffigma-make-12_oarmj1.png" alt="Figma Make website hero image update prompt" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Verdict
&lt;/h4&gt;

&lt;p&gt;Winner: Anima 🏆&lt;/p&gt;

&lt;p&gt;So first, Anima slightly changed the design with some hallucination and added buttons for Watch Now and Add to Watchlist. I do think it's an improvement because moving the content to the right meant that it was now covering Superman's face which is why I had a second prompt to change the image. Anima seperated the image and the content which was a good fix, I might have made eventually.&lt;/p&gt;

&lt;p&gt;Figma Make followed the prompt more accurately this time, but the hero image is still broken, whereas it's been fine in Anima since the beginning. Both were successful in changing the hero image, though.&lt;/p&gt;

&lt;p&gt;In the final round, I will just give the edge to Anima because it's clear to see that the website is much cleaner and closer to a final design. Sure, there might be duplicated content, but Anima did follow the prompt, whereas Figma Make hallucinated more and focused more on functionality instead of getting the code to match the design, which is the first step. More work and vibe coding would be required to get the coded design to the same level as Anima.&lt;/p&gt;

&lt;p&gt;Figma Make did do a good job with my prompt for the hero section, though, but it does not change the fact that the hero section and overall design look more broken when compared to Anima.&lt;/p&gt;

&lt;p&gt;We can see the final design for both platforms below:&lt;/p&gt;

&lt;p&gt;The website created in Anima looks the best visually, in my opinion. The design is much cleaner and none of the elements appear to be broken.&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%2Fabhsdtv2uacynf0bfa1o.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%2Fabhsdtv2uacynf0bfa1o.png" alt="Anima Platform final design" width="800" height="735"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The website created in Figma Make has a broken hero image, hallucinated content and missing images for some movie titles. The header has a different background colour to the one in the Anima build. This is a bit subjective because I did say change the background colour but it can be debated that this included the header too. The content is still broken and falls out of the containers when the page scrolls.&lt;/p&gt;

&lt;p&gt;Despite these errors Figma Make did manage to make the website responsive and the functionality was working for the list and search bar. However, this initial phase of building was for the design; the functionality would have come next, so it still loses a few points because more vibe coding would be needed to resolve the broken design.&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752678084%2Ffigma-make-final_nvajql.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1752678084%2Ffigma-make-final_nvajql.png" alt="Figma Make final design" width="800" height="485"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So the final score is:&lt;/p&gt;

&lt;p&gt;Anima: 🏆🏆🏆🏆&lt;br&gt;
Figma Make: 🏆&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Differences Revealed
&lt;/h2&gt;

&lt;p&gt;Ok let's see how both tools compare overall as we break it down into the areas of code quality, page accuracy, editability and handoff readiness.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code Quality
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Anima
&lt;/h4&gt;

&lt;p&gt;Anima Playground tends to generate clean, readable and semantic code which is usable. The code is created using the Vite framework, and the codebase is written in React with good component driven design. This is very good for scalability and production.&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make
&lt;/h4&gt;

&lt;p&gt;Figma Make seems to output a lot of bloated code with many divs and spans, which is not very readable. The codebase seems to be using a custom build of Next.js because I noticed the &lt;code&gt;'use client'&lt;/code&gt; directive.&lt;/p&gt;

&lt;h3&gt;
  
  
  Page Accuracy
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Anima
&lt;/h4&gt;

&lt;p&gt;Anima did a much better job at capturing everything on the screen and there was far less hallucination, especially with the initial design to build phase.&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make
&lt;/h4&gt;

&lt;p&gt;Figma Make can sometimes miss content on longer pages, especially if it's below the fold. There was also more hallucination, and it was unable to match the initial design as the page was broken at the hero section.&lt;/p&gt;

&lt;h3&gt;
  
  
  Editability
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Anima
&lt;/h4&gt;

&lt;p&gt;Anima Playground felt more usable, especially when making changes which were easier and the results were usually instant.&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make
&lt;/h4&gt;

&lt;p&gt;Figma Make felt more like a black box due to having more hallucinations so more work is required to get the desired result.&lt;/p&gt;

&lt;h3&gt;
  
  
  Handoff Readiness
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Anima
&lt;/h4&gt;

&lt;p&gt;Playground can output production-ready code which has structure, assets and styling so it is much better for development purposes.&lt;/p&gt;

&lt;h4&gt;
  
  
  Figma Make
&lt;/h4&gt;

&lt;p&gt;The output from Figma Make would require more hands-on work to get it up to a production-ready standard.&lt;/p&gt;

&lt;h2&gt;
  
  
  Practical Considerations
&lt;/h2&gt;

&lt;p&gt;As of writing, &lt;a href="https://www.animaapp.com/pricing" rel="noopener noreferrer"&gt;Anima&lt;/a&gt; has a free option as well as Pro, Business and Enterprise plans. &lt;a href="https://www.figma.com/pricing/" rel="noopener noreferrer"&gt;Figma Make&lt;/a&gt; is currently in beta and not available on the free starter plan. If you want to use Figma Make, you will have to pay for the Full seat plan. Either way you need to purchase at the very least a Figma Dev seat plan so that you can use the Dev Mode, which is required for using most Figma plugins anyway.&lt;/p&gt;

&lt;p&gt;In terms of workflow integration both tools are a fairly good choice because they can convert designs to code and fairly well. Performance is slightly better in Anima because Figma Make has been in Beta for a shorter time whereas the Anima Platform is more stable.&lt;/p&gt;

&lt;p&gt;Anima Playground is also available on the web alongside the Figma plugin whereas Figma Make must be used inside of the Figma platform.&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%2Fgr0e4fk9rihpw5yhf5t2.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%2Fgr0e4fk9rihpw5yhf5t2.png" alt="Anima Playground web app" width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If I had to use one of these tools for a real-life project, I would choose Anima because the platform has been around for longer and is far more stable and feature-rich. Like being able to push your codebase to a GIT repository and the fact that the codebase is more production-ready. I also like the fact that you can attach a lot more images alongside your prompts, which means it would take fewer actions to get work done.&lt;/p&gt;

&lt;p&gt;My overall thoughts on my experience after using both platforms are that productivity can be significantly increased when using Vibe coding tools, and this is good because it means more work can be accomplished in a much shorter time frame. Both the design and codebase are easily accessible, so designers and programmers can continue doing what they do best without having to change context.&lt;/p&gt;

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

&lt;p&gt;The design to code vibe coding space is hot and Anima and Figma Make are two great platforms to use. At this point in time Anima Playground feels like a more polished product as it has been in the beta phase longer and the tool just does a much better job of following prompts and getting a codebase to match a Figma design.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.animaapp.com/" rel="noopener noreferrer"&gt;Anima Playground&lt;/a&gt; is right up there as one of the best vibe coding platforms and easily competes with some of the other names, like &lt;a href="https://bolt.new/" rel="noopener noreferrer"&gt;Bolt.new&lt;/a&gt;, &lt;a href="https://lovable.dev/" rel="noopener noreferrer"&gt;Lovable&lt;/a&gt;, &lt;a href="https://replit.com/" rel="noopener noreferrer"&gt;Replit&lt;/a&gt; and &lt;a href="https://v0.dev/" rel="noopener noreferrer"&gt;v0 by Vercel&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>ai</category>
      <category>react</category>
    </item>
    <item>
      <title>Designing and Building an Application with Anima, Figma, and React</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Mon, 17 Mar 2025 12:29:38 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/designing-and-building-an-application-with-anima-figma-and-react-2nek</link>
      <guid>https://forem.com/andrewbaisden/designing-and-building-an-application-with-anima-figma-and-react-2nek</guid>
      <description>&lt;p&gt;The tech industry moves at a rapid pace with new tools arriving all the time. I was fortunate enough to have the opportunity to try out a cool new tool by Anima, the design-to-code platform. In this guide, I'll document my journey from designing a Habit Tracker in Figma to deploying it online using Anima, React, and Netlify. We'll cover the full workflow—design, build, and deployment—showcasing how Anima converts Figma designs into a React project.&lt;/p&gt;

&lt;p&gt;This is what the original Figma design looks like:&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%2Fnn40oh4xdb79lgwdjh3h.jpg" 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%2Fnn40oh4xdb79lgwdjh3h.jpg" alt="Habit Tracker App Figma Design" width="800" height="666"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And this is what the final design looked like in Anima:&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%2F76nen5h6hgbwekdsogb1.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%2F76nen5h6hgbwekdsogb1.png" alt="Habit Tracker App Anima Build" width="800" height="737"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, they almost look identical. It's worth mentioning that I decided to make some changes, improvements and refinements to the original design, when going through the build process with Anima. Like adding a button to check off habits when they are completed, which was missing before. I could have used more prompts to improve the final build significantly, but this is already enough to showcase how good Anima is at converting a design into React code.&lt;/p&gt;

&lt;p&gt;You can find the codebase and a live demo of the app online here &lt;a href="https://github.com/andrewbaisden/habit-tracker-app" rel="noopener noreferrer"&gt;https://github.com/andrewbaisden/habit-tracker-app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So if you are a designer aiming to boost your prototype skills. Or a developer looking for an efficient way to build a modern application this tutorial will show you how using a tool like Anima can level up your game.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Anima?
&lt;/h2&gt;

&lt;p&gt;Anima is an AI-powered platform which is capable of doing design-to-code, and is available as a plugin for Figma. This basically means that you can create a design. And then turn that design into code automatically using artificial intelligence. This can be a very effective way to convert designs and prototypes into programming code which a developer can use straight away. &lt;/p&gt;

&lt;p&gt;For example a designer could design some components in Figma. These design components can then automatically be converted into code which a developer can integrate into their application straightaway. This can drastically reduce the time that is required to design and build new features. Anima is a very effective coding assistant. Developers can build features faster. Designers can be sure that their design is being built accurately.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building a Habit Track App with Anima
&lt;/h2&gt;

&lt;p&gt;The technical stack is as follows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://www.figma.com/" rel="noopener noreferrer"&gt;Figma&lt;/a&gt; (Design tool)&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.animaapp.com/" rel="noopener noreferrer"&gt;Anima&lt;/a&gt; (AI-powered design-to-code platform and Figma plugin)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Anima builds a React project using &lt;a href="https://vite.dev/" rel="noopener noreferrer"&gt;Vite&lt;/a&gt;. This was my first experience of using Anima so I will document and go through most of the prompts which I used for building this app. I think this is also a good introduction and proof of concept of how "prompt engineering" or "chain prompting" can be and how effective it is at building applications from an existing design.&lt;/p&gt;

&lt;h3&gt;
  
  
  Converting a design into code
&lt;/h3&gt;

&lt;p&gt;I will now go through the process of building an application using Anima for the first time. I had no prior experience so everything is real and unscripted. The mistakes I made and what I learned and how I finally learned how to use the platform. To begin with, I designed the Habit Tracker App myself using Figma which took a day or so and then I used the Anima plugin to convert the design into React code. &lt;/p&gt;

&lt;p&gt;Converting the design into code required zero user prompts as Anima was able to do it all seamlessly. I did use two user prompts to make some refinements at the start though. In total it took me around 17 user prompts to get to what I believed was a good Minimum Viable Product (MVP). This inlcuded adding features, bug fixes, refinements and much more. It could have taken fewer or more prompts it all depends on your choices.&lt;/p&gt;

&lt;p&gt;Before we begin I should mention that Figma needs to be in Dev Mode, not Design Mode which is the default. The Anima plugin requires Dev Mode to convert the design into code. Dev Mode requires a paid Figma Professional Team account. You can use the menu bar at the bottom of your Figma design file to switch to Dev Mode and then you should be able to use the Anima plugin to convert your design into code as you can see here. By the way when you are designing your application in Figma its best practice to use components as it makes building much more straightforward and falls in line with component driven development that we are all used to in any JavaScript framework project like React:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738428411%2Ffigma-design-file_wisj3n.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738428411%2Ffigma-design-file_wisj3n.png" alt="Figma and Anima plugin " width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I created one big component for all of the smaller components in the app, and Anima generated a React codebase which included TypeScript and Tailwind CSS files for the whole app. The code was generated in the right sidebar window in Figma, and took less than 1 minute. There were also two buttons at the bottom of the sidebar, one for opening in the playground and one to download selection.&lt;/p&gt;

&lt;p&gt;I chose to open in the playground and the React project and codebase opened in a new web browser window on the Anima platform as you can see here. On the left is the text box that gives us the power to write prompts to iterate over the build, make changes etc...&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738429324%2Fanima_codebase_znqkad.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738429324%2Fanima_codebase_znqkad.png" alt="Anima Codebase" width="800" height="414"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Anima built the project and codebase for the app and then created a running server which showed the app working in the browser and it did this all in one go which was impressive! Usually this would take a developer a few hours or days to setup the project arcitecture, build all of the seperate components, design the page, do testing etc... But Anima managed to accomplish the building part of this task in seconds! &lt;/p&gt;

&lt;p&gt;However I did notice that the status component was missing the picture for a user's image. I also noticed that the Repeat frequency selection list was missing from the habit component. Considering that Anima had managed to get this far without any user prompts was already a fantastic sight to see. My design was not perfect from the start I could have cleaned up the components but it was nice to know that Anima was still able to build the app to this extent. I imagine that most designs could be built with Anima with ease. I knew that the Anima plugin could generate the code for any component so this gave me the perfect opportunity to see how well it could adapt and fix missing elements in the design. &lt;/p&gt;

&lt;p&gt;So I used the Anima plugin to generate only the code for the missing components which inluded the TypeScript and Tailwind CSS files. Then I copied and pasted the code for the Repeat frequency component, into the prompt window on the left hand side of the Anina pltaform, with my prompt description of what I needed to be done. Anima rebuilt the app with the new changes and sucesffuly updated with the missing components!&lt;/p&gt;

&lt;p&gt;These were the two prompts I used to resolve those issues:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 1&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%2Fwzcre7rklsvuk1ivvq5m.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%2Fwzcre7rklsvuk1ivvq5m.png" alt="Anima prompt 1" width="800" height="477"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 2&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%2Frah1l6ltvuapkz1pjnf9.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%2Frah1l6ltvuapkz1pjnf9.png" alt="Anima prompt 2" width="800" height="758"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And this is what the design looked like after these prompts:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738429994%2Fapp_after_prompt_2_hmksfi.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738429994%2Fapp_after_prompt_2_hmksfi.png" alt="Habit tracker dashboard app" width="800" height="434"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I'm not too bothered about the image being broken at this stage because I could give Anima a link to the image online. Also I know that manually downloading the image and adding it to the project will probably fix the broken image issue. What important at this stage is just getting the code to match the design. &lt;/p&gt;

&lt;p&gt;Having knowledge of both design and development is highly beneficial when working with the Anima plugin. Knowing the right technical lingo to use as a designer and developer when writing prompts can be very helpful. The original design does not have white borders around the components, whereas the one created with Anima does. I could change it but I think it looks okay for now, so I decided to leave it and focus on other areas. &lt;/p&gt;

&lt;p&gt;The initial basic design is at a very good point after two prompts and I have only spent a few minutes working on this project. Anima definitly makes a developers job much easier and faster, it could have taken a few hours or a day to get this far without using Anima. So my starting goal has already been accomplised thanks to Anima, the design has succesfully being converted into a React codebase. &lt;/p&gt;

&lt;p&gt;So that was pretty easy right? The onboarding went fairly smoothly and did not require that much technical setup. Lets quickly go over the steps it took to convert a design into code using Anima:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Design your app in Figma&lt;/li&gt;
&lt;li&gt;Switch your Figma file into Dev Mode&lt;/li&gt;
&lt;li&gt;Use the Anima plugin to convert the design into code&lt;/li&gt;
&lt;li&gt;Open the codebase in the Anima Playground&lt;/li&gt;
&lt;li&gt;Wait for the app to compile, build and run in the browser&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In the next section I will take things much further by using chain prompting to add new features and fix bugs which is exactly the type of work that a team would be doing when working on a project of this type. With each individual given various Jira tickets to work on. With Anima all of this can be achieved with little hassle.&lt;/p&gt;

&lt;h2&gt;
  
  
  Using chain prompting as a prompt engineer
&lt;/h2&gt;

&lt;p&gt;Prompt engineering is essentially the process of writing instructions as a way to get the best results when working with an AI model or tool in this case, Anima. Ok so we have a starting point with the design, the next phase we will be adding functionailty, fixing bugs and improving the design. The next issues to work on was making the checkmarks green like in the design, ensuring that the progress bars in the profile component had colours and doing some alignment fixes for the habits. The following prompts fixed those issues:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 3&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%2F7p3uyjrw1qbudfiwe1ac.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%2F7p3uyjrw1qbudfiwe1ac.png" alt="Anima prompt 3" width="800" height="686"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 4&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%2Fxe2jj870kfxrnh0j36yl.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%2Fxe2jj870kfxrnh0j36yl.png" alt="Anima prompt 4" width="800" height="745"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 5&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%2Fftycin2sd4ox8z6k3tbo.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%2Fftycin2sd4ox8z6k3tbo.png" alt="Anima prompt 5" width="800" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The design then looked like this after the changes:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738430858%2Fapp_after_prompt_5_efi70v.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738430858%2Fapp_after_prompt_5_efi70v.png" alt="Habit tracker app dashboard" width="800" height="374"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, the calendar is now too big for its container. The next 4 prompts fixed those issues and also better aligned the red cross delete button:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 6&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%2Fubrmu4n6r2zrc2iut2fs.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%2Fubrmu4n6r2zrc2iut2fs.png" alt="Anima prompt 6" width="800" height="850"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 7&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%2F69og70pxib3rvtzyk6ye.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%2F69og70pxib3rvtzyk6ye.png" alt="Anima prompt 7" width="800" height="822"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 8&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%2F6zs47r6iufvwlffk4x2o.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%2F6zs47r6iufvwlffk4x2o.png" alt="Anima prompt 8" width="800" height="891"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After prompt eight, the delete button was put outside the row component with the habit data, which was incorrect because I wanted it inside the white border. However, the positioning is acceptable for now because I do not think that it ruins the design and might be ideal because it is not in the same space as the calendar widget.&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738432994%2Fapp_after_prompt_8_qfvw5u.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738432994%2Fapp_after_prompt_8_qfvw5u.png" alt="Habit tracker dashboard app" width="800" height="433"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Working on this app has made me aware that prompt engineering is likely to become a legitimate skill if it has not already. Getting designers and developers to iterate a design or some project code with various prompts. It can create a very good starting point or even get you close to the final design. For areas where the AI fails to get the desired result, you can manually take over and do the design or work on the codebase as normal. The key bonus here is that the AI did a significant amount of the work, and you only needed to work on a few fixes to get the desired result. That's a lot of time saved. What used to take days or weeks can now be done in a few hours.&lt;/p&gt;

&lt;p&gt;With the design phase more or less completed to an acceptable standard, I decided that it was time to write the business logic for adding and removing habits, which is a major feature of this app. The following prompts accomplished this task:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 9&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%2F6wp2lf0ii5k8zea6jfbu.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%2F6wp2lf0ii5k8zea6jfbu.png" alt="Anima prompt 9" width="800" height="715"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 10&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%2Fh00zez2058labwtyxzjt.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%2Fh00zez2058labwtyxzjt.png" alt="Anima prompt 10" width="800" height="641"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 11&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%2Fxpc1btimx94qgpcdw7x6.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%2Fxpc1btimx94qgpcdw7x6.png" alt="Anima prompt 11" width="800" height="852"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The application now made it to this stage after these new changes:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738433547%2Fapp_after_prompt_11_cji7u6.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738433547%2Fapp_after_prompt_11_cji7u6.png" alt="Habit dashboard app" width="800" height="276"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, Anima successfully implemented streak management functionality. I wanted to add logic for tracking streaks because it was hardcoded. Anima went a step further and added working streak management and was clever enough to add a check button next to the delete cross button.&lt;/p&gt;

&lt;p&gt;Streaks also now start at zero and you can add and remove habits. The application is coming along well, there is just one big feature left to resolve. Getting the habit calendar to work, the streak counters and also the profile section which has gamification. The upcoming prompts got all of these features working:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 12&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%2F403tym2utqyqfgv4uc1l.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%2F403tym2utqyqfgv4uc1l.png" alt="App prompt 12" width="800" height="1007"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 13&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%2F1g8lr9jvm1asi75qvw77.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%2F1g8lr9jvm1asi75qvw77.png" alt="App prompt 13" width="800" height="320"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 14&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%2Fsndulfj8pm02fru73irv.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%2Fsndulfj8pm02fru73irv.png" alt="App prompt 14" width="800" height="285"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 15&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%2F02giav4i0yutrgy83xil.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%2F02giav4i0yutrgy83xil.png" alt="App prompt 15" width="800" height="1195"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After these prompts, the habit tracker app reached this phase:&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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738433978%2Fapp_after_prompt_15_bqomvm.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%2Fres.cloudinary.com%2Fd74fh3kw%2Fimage%2Fupload%2Fv1738433978%2Fapp_after_prompt_15_bqomvm.png" alt="Habit tracker app" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The app is looking good and has basic functionality. Earlier in one of the builds I did notice a bug, though. You could toggle the completed habit check button on and off, and it kept updating the streak, which I guess was okay,  because the app currently had no way to track real times or dates. I was thinking that the day-tracking circles in the habit should probably reset after 7 days to reflect a whole week instead of filling up and then staying the same. These bugs seem to be resolved now, though.&lt;/p&gt;

&lt;p&gt;After Anima Prompt 12, the logic seems to be working for the counter, and the days, although other than physically waiting for the day to change, the only other way to see if it is truly working that I can think of right now would be to write some logic and maybe build a component for test purposes to simulate day changes for the app so I can see it in action. Prompt engineering with iteration and refinement is a good example of how humans can work with AI. &lt;/p&gt;

&lt;p&gt;Okay, lastly, I want the title in the profile component to change depending on what level the user is at. And to also add to the gamification structure. I used two prompts to achieve this goal:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 16&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%2Fr8zbmzvlncjzkbhp5phx.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%2Fr8zbmzvlncjzkbhp5phx.png" alt="Anima prompt 16" width="800" height="1185"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anima Prompt 17&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%2Flo1wlp4s6ndk1gr5usw1.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%2Flo1wlp4s6ndk1gr5usw1.png" alt="Anima prompt 17" width="800" height="208"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I could continue iterating forever, making improvements, changes and adding new features, but I think in its current state, it's good enough for a basic Minimum Viable Product (MVP). There are lots of feature improvements and likely bug fixes.&lt;/p&gt;

&lt;p&gt;Some improvements that could be made to the app with further prompts include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Making it fully responsive&lt;/li&gt;
&lt;li&gt;Adding error handling&lt;/li&gt;
&lt;li&gt;Persistence state/data for the habits like a database or local storage&lt;/li&gt;
&lt;li&gt;Improving the gamification&lt;/li&gt;
&lt;li&gt;The ability to edit and update habit names&lt;/li&gt;
&lt;li&gt;Multiplayer&lt;/li&gt;
&lt;li&gt;Being able to change a profile picture or a profile picture that changes based on level&lt;/li&gt;
&lt;li&gt;A leaderboard to compare with other users&lt;/li&gt;
&lt;li&gt;Charts and statistics data&lt;/li&gt;
&lt;li&gt;Export, import and backup data&lt;/li&gt;
&lt;li&gt;More pages/screens for additional features&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The list goes on, and with each new feature, it turns from a simple app into a SaaS/PaaS, but regardless, this has been a good introduction to using Anima for app building.&lt;/p&gt;

&lt;p&gt;The final step is deployment to Netlify which is quite easy and if your an experienced developer you have no doubt deployed many apps there already. If its your first time this guide on &lt;a href="https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/" rel="noopener noreferrer"&gt;A Step-by-Step Guide: Deploying on Netlify&lt;/a&gt; should be very helpful.&lt;/p&gt;

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

&lt;p&gt;In this tutorial, we walked through the process of building an application using Anima. We used prompt engineering to create an application which was fully functional and required little manual intervention from a developer. Anima was able to build the design straight from a Figma file in a very short space of time with fairly high accuracy. If anything, this should hopefully convince many developers to improve their design skills and learn how to use Figma because this will definitely help them to have more diverse skills and get more job opportunities.&lt;/p&gt;

&lt;p&gt;AI continues to surprise and show off its capabilities, and Anima is right up there with the best design-to-code and app-building platforms out there now. With new LLMs like DeepSeek R1, o3-mini, Gemini 2.0 Flash, Grok 3 and the reliable Claude 3.5 Sonnet, which has been consistently reliable for coding. We truly live in a great time where dreams can be realised much faster.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stay up to date with tech, programming, productivity, and AI
&lt;/h2&gt;

&lt;p&gt;If you enjoyed these articles, connect and follow me across &lt;a href="https://limey.io/andrewbaisden" rel="noopener noreferrer"&gt;social media&lt;/a&gt;, where I share content related to all of these topics 🔥&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%2Fo99w5145ucio7ohxyimm.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%2Fo99w5145ucio7ohxyimm.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1736534789/header-2025-v1_vehh5c.png" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>react</category>
      <category>ai</category>
    </item>
    <item>
      <title>12 cool open-source projects worth checking out in 2025</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Sat, 08 Mar 2025 15:27:13 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/12-cool-open-source-projects-worth-checking-out-in-2025-46ie</link>
      <guid>https://forem.com/andrewbaisden/12-cool-open-source-projects-worth-checking-out-in-2025-46ie</guid>
      <description>&lt;p&gt;Open-source projects not only inspire us to create our best work but also give us the capability to build things seamlessly, which would otherwise be much more challenging on our own. Innovative tools are emerging to address the most demanding challenges facing developers and businesses today. As online worlds become increasingly advanced, the right technological solutions can mean the difference between simple survival and real long-term success.&lt;/p&gt;

&lt;p&gt;In this article, we will review a curated list of 12 cool open-source projects and highlight the incredible tools they offer. These tools revolutionise workflows and redefine the way teams create, analyse, and optimise their digital products. From AI platforms to advanced security systems, these tools offer strategic advantages that can dramatically reduce project timelines and uncover more sophisticated levels of operational efficiency.&lt;/p&gt;

&lt;p&gt;Our carefully selected lineup provides insights into tools that enable:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open-Source Innovation and Flexibility&lt;/li&gt;
&lt;li&gt;Data Intelligence and Analytics&lt;/li&gt;
&lt;li&gt;Security and Transparency&lt;/li&gt;
&lt;li&gt;Workflow Automation and Efficiency&lt;/li&gt;
&lt;li&gt;Cross-Disciplinary Collaboration&lt;/li&gt;
&lt;li&gt;Scalable and Adaptive Infrastructure&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, start-ups looking to prototype quickly or established businesses looking to maximise can make the best use of these tools, which are at the forefront of technological innovation. They can be a great addition to any project that you are working on.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. LangChain
&lt;/h2&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%2Ffgjdneth7qihgf8i3kh5.jpg" 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%2Ffgjdneth7qihgf8i3kh5.jpg" alt="LangChain" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A framework designed to simplify the development of applications powered by language models, leading to the creation of complex, multi-step workflows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://langchain.com" rel="noopener noreferrer"&gt;LangChain&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. CrewAI
&lt;/h2&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%2Flxtovjth3vpvmk85jwo4.jpg" 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%2Flxtovjth3vpvmk85jwo4.jpg" alt="CrewAI" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;CrewAI is an open-source Python environment that manages role-playing autonomous AI agents to bring about collaborative intelligence to tackle complex tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.crewai.com/" rel="noopener noreferrer"&gt;CrewAI&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Agno
&lt;/h2&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%2Fs5tynd45kwl8vuhsu7rt.jpg" 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%2Fs5tynd45kwl8vuhsu7rt.jpg" alt="Agno" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Agno is an AI agent platform with pre-packaged tools and capabilities, allowing developers to develop AI assistants utilising their preferred large language models quickly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.agno.com/" rel="noopener noreferrer"&gt;Agno&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. AutoGen
&lt;/h2&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%2Fy0ehqzh666cudulonthq.jpg" 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%2Fy0ehqzh666cudulonthq.jpg" alt="AutoGen" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;AutoGen, designed by Microsoft, is an open-source system that develops multi-agent systems with conversation agents to implement sophisticated problem-solving and workflow automation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.microsoft.com/en-us/research/project/autogen//" rel="noopener noreferrer"&gt;AutoGen&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. PostHog
&lt;/h2&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%2Fyjt3nzoeb428izlf7bv4.jpg" 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%2Fyjt3nzoeb428izlf7bv4.jpg" alt="PostHog" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;PostHog is an open-source product analytics platform that helps companies understand user behaviour through event tracking, feature flags, and session recording.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://posthog.com" rel="noopener noreferrer"&gt;PostHog&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Astro
&lt;/h2&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%2Fc0adpejk17f44rtqpchy.jpg" 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%2Fc0adpejk17f44rtqpchy.jpg" alt="Astro" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Astro is a modern static site generator that allows developers to build fast, content-rich websites with minimal configuration, supporting multiple frontend frameworks via dynamic islands.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://astro.build" rel="noopener noreferrer"&gt;Astro&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  7. DuckDB
&lt;/h2&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%2Faomssedqgbsgp0fpc6my.jpg" 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%2Faomssedqgbsgp0fpc6my.jpg" alt="DuckDB" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;DuckDB is an in-process SQL OLAP database management system optimised for analytical query workloads designed to support efficient data analysis.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://duckdb.org" rel="noopener noreferrer"&gt;DuckDB&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Supabase
&lt;/h2&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%2Fyz0ozbdigt1wcv236g2o.jpg" 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%2Fyz0ozbdigt1wcv236g2o.jpg" alt="Supabase" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An open-source backend-as-a-service platform that provides developers with a suite of tools to build scalable applications, including a real-time database and authentication services.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://supabase.io" rel="noopener noreferrer"&gt;Supabase&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Sigstore
&lt;/h2&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%2Fbclnen4elvur69otci4e.jpg" 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%2Fbclnen4elvur69otci4e.jpg" alt="Sigstore" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A public good service that offers digital signing and verification of software artefacts, enhancing security and trust in software supply chains.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://sigstore.dev" rel="noopener noreferrer"&gt;Sigstore&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  10. OpenTelemetry
&lt;/h2&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%2Fbd0ryn1uom5pjwla1lxj.jpg" 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%2Fbd0ryn1uom5pjwla1lxj.jpg" alt="OpenTelemetry" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An open-source project that provides standardised APIs, libraries, agents, and instrumentation to enable observability in software systems through metrics, traces, and logs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://opentelemetry.io" rel="noopener noreferrer"&gt;OpenTelemetry&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  11. Penpot
&lt;/h2&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%2Fcvb9y9lq492dnxnlzfw3.jpg" 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%2Fcvb9y9lq492dnxnlzfw3.jpg" alt="Penpot" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Penpot is an open-source design and prototyping platform aimed at creating collaboration between designers and developers with SVG-based assets.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://penpot.app" rel="noopener noreferrer"&gt;Penpot&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  12. DocuSeal
&lt;/h2&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%2F223x8c2lh7wiv7ypi2w7.jpg" 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%2F223x8c2lh7wiv7ypi2w7.jpg" alt="DocuSeal" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A fast, feature-rich tool for online document signing that works everywhere is available. It also has many different integrations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.docuseal.com" rel="noopener noreferrer"&gt;DocuSeal&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;In short, the software highlighted herein is some of the most advanced and powerful options available for businesses and developers to leverage today. From AI-driven automation platforms to powerful analytics and database systems, these solutions deliver the flexibility and efficiency necessary to solve a number of challenges. By integrating these into your workflow, you can automate development, increase security, optimise user experiences, and ultimately drive growth. With technology changing on a daily basis, staying on top of such tools can allow you to be one step ahead of the curve and develop the next generation of apps with relative ease.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stay up to date with tech, programming, productivity, and AI
&lt;/h2&gt;

&lt;p&gt;If you enjoyed these articles, connect and follow me across &lt;a href="https://limey.io/andrewbaisden" rel="noopener noreferrer"&gt;social media&lt;/a&gt;, where I share content related to all of these topics 🔥&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%2Fo99w5145ucio7ohxyimm.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%2Fo99w5145ucio7ohxyimm.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1736534789/header-2025-v1_vehh5c.png" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>ai</category>
    </item>
    <item>
      <title>16 AI-powered tools for building your next project</title>
      <dc:creator>Andrew Baisden</dc:creator>
      <pubDate>Fri, 07 Mar 2025 13:30:16 +0000</pubDate>
      <link>https://forem.com/andrewbaisden/16-ai-powered-tools-for-building-your-next-project-24l5</link>
      <guid>https://forem.com/andrewbaisden/16-ai-powered-tools-for-building-your-next-project-24l5</guid>
      <description>&lt;p&gt;Developing applications has never been simpler because of the growth of AI-based and no-code/low-code development platforms. Developers trying to speed up the process of building or beginners with zero coding skills can now use these types of platforms as they give us the ability to build a minimum viable product (MVP) quickly. They are beneficial, as they provide easy-to-use solutions for building web applications, mobile applications, and automation workflows. The bar to coding has been reduced significantly because now we can use AI-assisted coding software like GitHub Copilot and IDEs such as Windsurf and Cursor, as well as the usual no-code coders like Bubble and Softr.&lt;/p&gt;

&lt;p&gt;In this article, I will cover some of the most widely used options available to developers. These options provide us with some of the most effective tools for turning ideas into reality with as little hassle as possible.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI &amp;amp; No-Code/Low-Code Development Tools
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Windsurf
&lt;/h3&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%2F7fyon6b1mlzucqz2jkhw.jpg" 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%2F7fyon6b1mlzucqz2jkhw.jpg" alt="Windsurf" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An AI-powered collaborative development platform of the future that simplifies application building, testing, and deployment. Windsurf is an IDE which brings real-time collaboration together with intelligent code suggestions, enabling developers to work seamlessly, either in the same room or across the globe.&lt;/p&gt;

&lt;p&gt;Windsurf has built-in AI suggestions, auto-debugging, and one-click cloud deployment, which reduces friction in the development process, making ideas production-ready applications with greater ease. Ideal for groups wanting to streamline productivity and fast-track software deployment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://codeium.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Windsurf&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Cursor
&lt;/h3&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%2F5903gh9ioyh75ubdw5y7.jpg" 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%2F5903gh9ioyh75ubdw5y7.jpg" alt="Cursor" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An AI-powered code editor that supports various AI LLMs to help developers in coding, debugging, and optimising code better. Cursor enhances the coding experience as it has intelligent autocompletion, suggestions based on context, and real-time explanations, reducing the time required for debugging and research.&lt;/p&gt;

&lt;p&gt;Cursor's native debugging, refactoring capabilities, and direct integration allow developers to focus on problem-solving rather than on syntax or implementation problems. So, it is ideally suited for both learners and experienced coders who want to enhance their workflow.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://cursor.sh/" rel="noopener noreferrer"&gt;&lt;strong&gt;Cursor&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. VS Code + GitHub Copilot
&lt;/h3&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%2Fqynoqtdy1hwd8j2hjj1k.jpg" 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%2Fqynoqtdy1hwd8j2hjj1k.jpg" alt="VS Code + GitHub Copilot" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A high-performance code editor with advanced features combined with an AI-assisted coding companion to increase developer productivity. VS Code provides a lightweight but highly customisable development platform with extensive language support, debugging, and an enormous extension ecosystem.&lt;/p&gt;

&lt;p&gt;GitHub Copilot is embedded directly within VS Code to deliver intelligent code completions, suggest entire functions, and automate time-consuming tasks. It can learn from context and best practices, allowing developers to write cleaner, more efficient code faster. This makes it a must-have tool for individual developers and developer teams working on complex projects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://code.visualstudio.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;VS Code&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;+&lt;/strong&gt; &lt;a href="https://github.com/features/copilot/" rel="noopener noreferrer"&gt;&lt;strong&gt;GitHub Copilot&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Bolt .new
&lt;/h3&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%2F64ypdxq30tsicueoqgsr.jpg" 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%2F64ypdxq30tsicueoqgsr.jpg" alt="Bolt.new" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A lightweight, fast online code editor designed for developers who require an easy way to prototype concepts, test code, and share snippets with ease. With a minimalistic interface and instant run, Bolt.new is compatible with different programming languages, allowing for quick testing without having to set up a complete development environment.&lt;/p&gt;

&lt;p&gt;So, if you are brainstorming an algorithm, debugging a short script, or working with others, Bolt.new offers a pain-free experience that is accessible from any browser.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://bolt.new/" rel="noopener noreferrer"&gt;&lt;strong&gt;Bolt .new&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Lovable
&lt;/h3&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%2Fxrtuturb641yt16yutl7.jpg" 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%2Fxrtuturb641yt16yutl7.jpg" alt="Lovable" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Lovable platform is a no-code, AI-powered app builder that lets people build digital applications quickly without a technical background. Its user-friendly drag-and-drop interface, AI-powered design recommendations, and automated backend make the development process easy.&lt;/p&gt;

&lt;p&gt;Basically, this means that it's possible to develop all kinds of apps, from web apps to mobile apps and interactive prototypes. Entrepreneurs, designers, and businesses can bring their ideas to life faster, which leads to a much greater reduction in development times, costs, and technical barriers. All of this makes Lovable a well-rounded solution for anyone who wants to transform ideas into complete applications with ease.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://lovable.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;Lovable&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Marblism
&lt;/h3&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%2Ffbzb4a2xzt3sk9df7mr8.jpg" 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%2Ffbzb4a2xzt3sk9df7mr8.jpg" alt="Marblism" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A well-crafted AI-driven platform that makes application development and deployment easy with less coding. Marblism uses artificial intelligence to automate mundane development work, optimise code performance, and provide smart suggestions, allowing developers to focus on innovation rather than non-essential problems.&lt;/p&gt;

&lt;p&gt;Marblism has a straightforward interface, native deployment tools, and seamless integrations. It assists developers, startups, and organisations in bringing their ideas to market faster, be it web apps, mobile apps, or enterprise solutions they are creating.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://marblism.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Marblism&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  7. V0.dev
&lt;/h3&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%2F9z6kiswn0yxglzx4g6dj.jpg" 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%2F9z6kiswn0yxglzx4g6dj.jpg" alt="V0 by Vercel" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An AI platform that translates Figma designs into production-quality React components with Tailwind CSS. V0.dev speeds up the design-to-code cycle by translating clean, responsive, and customisable code automatically, saving front-end manual implementation time.&lt;/p&gt;

&lt;p&gt;So, suppose you are a designer looking to bring your vision to life or a developer looking to speed up UI development. In that case, V0.dev bridges the gap between design and code, allowing the production of sophisticated, high-quality React apps like never before.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://v0.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;V0.dev&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  8. Betty Blocks
&lt;/h3&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%2Fqflhyw7ljn0szcjcfwch.jpg" 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%2Fqflhyw7ljn0szcjcfwch.jpg" alt="Betty Blocks" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Betty Blocks is a cutting-edge low-code platform that makes it simple for businesses to create enterprise-level apps with minimal coding knowledge. Betty Blocks ensures that developers and non-technical users can build scalable, secure, and customisable apps with a visual development platform.&lt;/p&gt;

&lt;p&gt;The platform simplifies digital transformation, reduces time to market, and decreases costs through drag-and-drop, reusable blocks, and pre-built integrations. Whether you're working on an automated workflow, modernising a legacy project, or building new software, using the Betty Blocks platform makes the process more flexible. This is good because it gives you better control, which is needed to turn ideas into minimal viable projects quickly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.bettyblocks.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Betty Blocks&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  9. Bubble
&lt;/h3&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%2Fz2l8zu1y3ornp9ybh5aw.jpg" 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%2Fz2l8zu1y3ornp9ybh5aw.jpg" alt="Bubble" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Bubble is one of the leading no-code platforms. It enables users to build fully interactive web applications graphically without writing a line of code. It comes with a drag-and-drop editor, a strong workflow engine, and extensive integrations to help users build everything from simple prototypes to intricate, scalable applications.&lt;/p&gt;

&lt;p&gt;With in-built database management, responsiveness, and apps deployed instantly, Bubble allows startups, businesses, and entrepreneurs to bring their dreams to life simply and quickly without the limitations of conventional programming.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://bubble.io/" rel="noopener noreferrer"&gt;&lt;strong&gt;Bubble&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  10. Zapier Interfaces
&lt;/h3&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%2Fvn3wf2691w7vf2dvqvje.jpg" 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%2Fvn3wf2691w7vf2dvqvje.jpg" alt="Zapier Interfaces" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A no-code app that allows the user to design their personalised apps and workflows with little work, linking straight to thousands of services through Zapier's powerful automation platform. Through Zapier Interfaces, the user can create personalised applications by visually designing forms, dashboards, and interactive components, along with automating processes on other platforms.&lt;/p&gt;

&lt;p&gt;From processing information to triggering actions or integrating third-party services, this app makes it easier for non-tech users to automate and streamline processes without coding, increasing productivity and improving efficiency in teams.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://zapier.com/interfaces" rel="noopener noreferrer"&gt;&lt;strong&gt;Zapier Interfaces&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  11. Softr
&lt;/h3&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%2Fm3hllzogam02ugcs4c8q.jpg" 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%2Fm3hllzogam02ugcs4c8q.jpg" alt="Softr" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Softr is basically a no-code platform which gives users the power to transform Airtable and Google Sheets into dynamic, robust web applications, client portals, and internal tools without coding. With Softr's drag-and-drop editor, users can create custom, responsive apps that are deeply integrated with their data sources.&lt;/p&gt;

&lt;p&gt;This means that if you are building a client portal, internal dashboard, or workflow automation app, Softr provides the flexibility to turn plain spreadsheets into full-fledged web apps. With authentication, collaboration, and design functionality built-in, Softr lets companies get professional-grade tools up and running quickly and easily.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.softr.io/" rel="noopener noreferrer"&gt;&lt;strong&gt;Softr&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  12. Glide
&lt;/h3&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%2Fd7ule5dre5j56dzmwo7o.jpg" 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%2Fd7ule5dre5j56dzmwo7o.jpg" alt="Glide" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Glide is a no-code platform for building apps from spreadsheets with no programming required. The Glide platform allows you to transform Google Sheets data into interactive apps in minutes, with an intuitive drag-and-drop interface to build understandable, easy-to-customize applications.&lt;/p&gt;

&lt;p&gt;So, teams that are creating a mobile app, client portal, or product catalogue can use Glide to create, maintain, and deploy apps at speed. With its specialised capabilities like data syncing, user authentication, and custom workflows, Glide allows users to take their spreadsheet data and turn it into fast, scalable applications within minutes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.glideapps.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Glide&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  13. OutSystems
&lt;/h3&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%2Frtpji3ghwlmejmji6tgw.jpg" 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%2Frtpji3ghwlmejmji6tgw.jpg" alt="OutSystems" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The top low-code platform for building stable, enterprise-level applications with performance, security, and scalability first. OutSystems gives businesses the ability to rapidly develop, deploy, and manage complex applications with a visual development environment without needing a large amount of code.&lt;/p&gt;

&lt;p&gt;With better integrations, reusable assets, and strong cloud deployment, OutSystems enables companies to accelerate digital transformation, simplify collaboration, and innovate at scale. No matter if you are developing internal tools, customer applications, or enterprise-level solutions, OutSystems makes sure that applications scale securely and effectively across systems and global teams.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.outsystems.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;OutSystems&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  14. Tempolabs
&lt;/h3&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%2F6ey8ykv9n1gtmu2pjm3o.jpg" 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%2F6ey8ykv9n1gtmu2pjm3o.jpg" alt="Tempolabs" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tempolabs is an AI-based no-code automation platform that streamlines workflows and enhances processes with less coding. It uses high-level AI functionalities to automate repetitive tasks, enhance decision-making, and integrate varied systems without making it difficult to use, as it has a no-code interface.&lt;/p&gt;

&lt;p&gt;With personalised workflows, real-time data processing, and broad integration, Tempolabs allows teams to manage vital tasks with less manual intervention. It is perfect for businesses that want to enhance efficiency, accelerate processes, and improve output without investing in extensive technical expertise.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://www.tempolabs.ai/" rel="noopener noreferrer"&gt;&lt;strong&gt;Tempolabs&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  15. FlutterFlow
&lt;/h3&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%2Fnvr2thsywcetvl22zv7p.jpg" 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%2Fnvr2thsywcetvl22zv7p.jpg" alt="FlutterFlow" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An up-to-date low-code platform that supports the development of mobile apps using Flutter, with drag-and-drop and built-in AI support. FlutterFlow allows both technical and non-technical users to create beautiful, responsive mobile apps without the need to be an expert programmer.&lt;/p&gt;

&lt;p&gt;There is a design UI for creating designs, live previewing, and seamless Firebase integration. FlutterFlow simplifies the process of developing apps with full customisation and scalability. The platform also uses AI to help drive app-building tasks and automated workflows, making it the optimal choice for building high-quality mobile apps effectively and quickly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://flutterflow.io/" rel="noopener noreferrer"&gt;&lt;strong&gt;FlutterFlow&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  16. AI SmartCube
&lt;/h3&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%2Fr12s3bd4evd9j3dsar9m.jpg" 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%2Fr12s3bd4evd9j3dsar9m.jpg" alt="AI SmartCube" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A modern solution that takes advantage of the strength, of AI to create, build, and refine applications, providing companies with automation and performance boost capabilities. AI SmartCube streamlines the application development process through automated routine work, suggesting improvement and optimising proceits no-code interface makes it easy to useity.&lt;/p&gt;

&lt;p&gt;Better AI-based insights, real-time performance monitoring, and seamless integrations allow companies to deploy and scale applications while reducing manual effort quickly. To speed up internal tools, customer-facing mobile apps, or enterprise apps, AI SmartCube helps organisations accelerate digital transformation and drive growth at minimum technology complexity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website link&lt;/strong&gt;: &lt;a href="https://aismartcube.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;AI SmartCube&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;No-code/low-code and AI-driven development platforms are transforming the application development process, making it more accessible, productive, and collaborative. From using AI-powered coding assistants and automating processes to creating apps without writing any code at all, such platforms enable developers of any proficiency to build disruptive digital products. Because technology is ever-evolving, using these tools can keep you ahead of the curve, streamline your process, and bring your ideas to life faster than ever before.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stay up to date with tech, programming, productivity, and AI
&lt;/h2&gt;

&lt;p&gt;If you enjoyed these articles, connect and follow me across &lt;a href="https://limey.io/andrewbaisden" rel="noopener noreferrer"&gt;social media&lt;/a&gt;, where I share content related to all of these topics 🔥&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%2Fo99w5145ucio7ohxyimm.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%2Fo99w5145ucio7ohxyimm.png" alt="https://res.cloudinary.com/d74fh3kw/image/upload/v1736534789/header-2025-v1_vehh5c.png" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>ai</category>
      <category>react</category>
    </item>
  </channel>
</rss>
