DEV Community: Love Otudor

Build with AI in the Anvil Editor

Love Otudor — Wed, 01 Jul 2026 15:19:19 +0000

Anvil's AI integration is here! You can now connect to and chat with your favourite AI agent directly from the Anvil Editor.

Whether you're starting a new project or improving an existing one, AI agents in Anvil understand how Anvil apps are built. That means less time explaining your framework to an AI and more time building. You can ask it to build an entire app from a prompt, or bring it in as a coding assistant to fix bugs, implement features, or explain unfamiliar code.

Read on to find out more, or start building now.

Connect to your preferred Agent with no Upcharge

Connect your existing ChatGPT or Claude account from the Anvil Editor and start chatting straight away. Anvil doesn't add any extra charges, so you only pay for your provider as normal, whether you're on a free or paid plan.

With Anvil Enterprise, you can connect your own enterprise model provider and private endpoints instead.

Generate Apps from a Prompt

Describe the app you want to build using plain text, recorded audio, or images, and the agent will build it for you. It can create Forms, layouts, server code, modules, Data Tables, and any other Anvil services your app needs, all in one go. Because the agent understands how Anvil apps are structured, it generates apps that feel familiar, using Python and tools you already know.

Need a particular look and feel? Instead of describing layouts, spacing, and colours in words, you can attach images to your prompt to guide the design of your app. The agent uses those images to create interfaces that are closer to what you have in mind from the start.

Tweak the Results

The agent writes real, editable code, and every change it makes can be modified or reverted in the Anvil Editor. You can still drag and drop components into the generated UI in the designer like you always have, or edit the properties of the generated UI elements in the Properties panel. The same goes for your Forms, modules, Data Tables, and everything else the agent creates.

You can also ask the agent to make changes to the code from chat. You can even mention specific Forms, modules, layouts, or assets in the chat, so the agent knows exactly what you're referring to.

Use the Agent on your existing Apps

The agent works just as well on existing apps. Ask it to implement new features, fix bugs, suggest improvements, or explain unfamiliar code. You can also use agent commands like /review-commit to review code changes in a particular commit.

Because the agent reads and understands your existing Anvil code, its changes and suggestions fit naturally into your app's architecture.

Get started

Open an app in the Anvil Editor, click the ✧ icon in the sidebar, connect your AI provider, and start chatting.

For tips on getting the best results, check out our docs and prompting best practices.

Looking forward to what you build!

More about Anvil

If you're new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Build a Web App with MongoDB Using Just Python

Love Otudor — Tue, 13 Jan 2026 16:37:03 +0000

Build and deploy a full-stack web app that interacts with your external database using only Python. No HTML, CSS, or JavaScript required.

In this tutorial, we guide you step-by-step on how to create a Customer Relationship Management (CRM) system connected to a MongoDB Atlas cluster, starting completely from scratch. You'll see how to build both the frontend and backend in Python using Anvil and deploy it to the web with two clicks.

Anvil lets you build full-stack web apps with all the power of Python and the flexibility of code.

In this tutorial, we will cover:

Installing Python packages in your Server Module
Securing passwords with App Secrets
Communicating between Forms with custom events
Authentication with the Users Service
Deploying your app on Anvil's free hosting

More about Anvil

Case Study: How Chris Houston Built a BI Tool with Anvil

Love Otudor — Fri, 11 Jul 2025 14:45:28 +0000

Query Streams transforms Excel and Google Sheets into powerful BI tools by enabling real-time database queries directly within the spreadsheet—no coding required. Built as a nights-and-weekends side project by Chris using Anvil, Query Streams soft launched just four weeks ago and is already being used by data analysts across multiple companies.

Built by a solo developer

Production-ready in under 5 months

Google Sheets add-on is live

Microsoft Excel add-in is live

The Challenge: When BI Tools Meet Reality

Every data team knows the cycle: Companies invest heavily in BI tools because everyone loves beautiful dashboards. Yet somehow, the most common follow-up question is still:

"The dashboards look great… uh, how do I export this to a spreadsheet?"

And then it all ends up in a spreadsheet anyway. Despite years of trying to move away from Excel and Google Sheets, spreadsheets are more popular than ever. According to a 2025 survey by Alteryx, 76% of data analysts still use spreadsheets as their primary tool.

What If We Stopped Fighting Spreadsheets?

Chris had been thinking about this for years. What if, instead of replacing spreadsheets, we empowered them?
“What if we didn’t try to replace spreadsheets with BI tools? What if we made spreadsheets the BI tool?”
This idea stuck with him until just after Thanksgiving 2024, when he started building a solution.

The Solution: Turn Spreadsheets Into the BI Tool

Query Streams is a real-time data integration platform that lets users run SQL queries from Google Sheets and Excel directly against remote databases, without exposing credentials, setting up VPNs, or configuring firewalls. It supports SQL Server, MySQL, PostgreSQL, SQLite, Access, and other databases. You can:

Share and receive queries
Build live dashboards
Securely expose specific database queries
Choose what data to share and with whom

No hassle. No copy-pasting. No manual exports. Just real-time data, right where analysts already work.

Building Query Streams: Smarter Tools, Built Faster with Anvil

The most challenging part of building Query Streams was building the network agent in C# and other technologies that Chris wasn’t familiar with. Once he overcame that technical hurdle, building the web app in Anvil was straightforward.

With minimal experience in HTML, CSS, and JavaScript, Chris leaned heavily on Anvil’s custom HTML support and Anvil components to bring his unique UI ideas to life.

I thought we were locked into the Anvil components on the designer. But as I explored custom components in Anvil, I realised that, wow, you can build anything in Anvil.

Chris Houston — Founder and CEO, Query Streams

In just four months, Query Streams was ready to use. Built entirely in Chris's spare time while working a full-time job. Since Anvil is web-based, he could work on Query Streams wherever and whenever he had time—whether at home, in early mornings, or even while travelling with just his laptop.

The Results: From Idea to Impact

Query Streams has begun gaining traction even before its official launch. In the four weeks since its soft launch with the Google Sheets add-on, teams and analysts across several organisations have started using the platform.

Now, with the Excel add-in also live on the Microsoft AppSource marketplace, Query Streams has expanded its reach to both major spreadsheet platforms. With both add-ons available, Chris is preparing for the official launch and broader publicity efforts. You can follow along and get updates on X and LinkedIn.

Anvil is like a Swiss army knife of awesome! It allowed me to build Query Streams with a lot of ease while working alone.

Chris Houston — Founder and CEO, Query Streams

More Information

Query Streams lets you run real-time database queries directly from Excel or Google Sheets — no code required.

If you’re new to Anvil and want to see how you can build powerful web apps using just Python, up to 7× faster than traditional development:

Have questions or want to get in touch? Visit anvil.works/contact.

Secure Team Collaboration in Anvil

Love Otudor — Fri, 30 May 2025 14:48:49 +0000

You asked and we answered! We put together a practical how-to guide on collaborating as a team in Anvil. Building amazing Anvil apps is even better with your team by your side, and we've developed foolproof methods to make this process hassle-free.

This guide walks you through how to:

Set up secure, real-world workflows for collaborating on Anvil apps while keeping your production environment isolated and safe.
Separate development and production environments to ensure only well-tested and reviewed changes reach your users.

Whether your team prefers working together on a shared Anvil app or on individual ones, this step-by-step guide will help you implement Git-based workflows that improve code quality and team efficiency.

More about Anvil

Building a Game App with Just Python

Love Otudor — Wed, 16 Apr 2025 16:51:04 +0000

"Guess the Sketch" is a multiplayer game where you draw sketches and challenge friends to guess what they are. Players earn points for correct guesses, with fewer attempts leading to higher scores. Each round, one player is chosen to sketch, while the others try to guess as quickly as possible.

I built this game using Python and Anvil, and it was surprisingly easy! I didn’t need to write HTML, CSS, or JavaScript. In this post, I will walk you through the key parts of building Guess the Sketch:

Building the UI,
Saving and sending sketches,
Sending invites,
Managing players and scores, and
Publishing and sharing.

Let's get started!

Building the UI

With Anvil’s drag-and-drop editor, building the UI was very intuitive. Instead of writing HTML and CSS, I simply dragged components from the Toolbox onto the Form and arranged them as needed. Here is how easy it was to build the SketchScreen, where players create and name their sketches.

Anvil’s Canvas component provided a seamless way to add a drawing area to the game. It is a Python wrapper around the HTML <canvas> element, with built-in methods and event handlers that handle drawing effortlessly. I used the mouse_down, mouse_move, and mouse_up events to track real-time mouse movement and draw lines on the canvas. Adding an eraser was as simple as setting the brush colour to match the background of the drawing area.

Want to learn more about the Canvas component? Check out this Canvas Tutorial:

Saving and Sending Sketches

Once a player finishes drawing and clicks the Send Sketch button, the image is retrieved from the Canvas using the .get_image() method:

sketch = self.canvas_1.get_image()

This converts the sketch into a Media object, which is then stored in a Data Table for later retrieval.

When a player submits a sketch, one of two things happens:

A new game is created, along with its first round (if the player is starting a new game).
A new round is added to an existing game, which happens when a player joins an ongoing game and takes their turn.

Here’s how I handled both scenarios:

sketch = self.canvas_1.get_image()

# Add a round to an existing game
if self.game_id:
  anvil.server.call('add_game_round', self.game_id, sketch, sketch_name)
  navigate(path = "/invite/:id", params = {"id":self.game_id})

# Create a new game
else:
  game_id = anvil.server.call('start_game', sketch, sketch_name)
  navigate(path = "/invite/:id", params = {"id":game_id})

In both cases, a new game round is created and linked to the current game, whether the game is newly created or ongoing.

With Data Tables, creating a round is as simple as inserting a new row into the Rounds Table and adding the round ID to the corresponding game's rounds column (which stores a list of round IDs for that game).

Here’s how I create and link a round to an existing game:

@anvil.server.callable(require_user=True)
def add_game_round(game_id, image, sketch_name):
  # Other game logic...
  game = app_tables.game_table.get_by_id(game_id)
  round = app_tables.rounds_table.add_row(game_id=game_id, image=image, owner=player, sketch_name=sketch_name, start_time=datetime.now())
  game['rounds'] += [round]
  # Other game logic...

Sending Invites

Anvil has a built-in Email Service, which makes sending invites as simple as a single function call. I used anvil.email.send() to email friends a game invite with a preview of the sketch as an inline attachment:

  anvil.email.send(
    bcc = emails, 
    from_address = player['email'], 
    subject = f"{player['name']} is inviting you to Guess the Sketch!",
    html = f"""
      Hey,
      I just created this sketch:<br>
      <img src="cid:sketch"><br>
      Think you can figure out what it is? Click this link to play: {link} 
    """,
    inline_attachments = {'sketch': image})

Players receive this email with a preview of the sketch right in their inbox. Here’s how it looks:

This makes it really easy for players to see the sketch before they click the link to play.

Managing Players and Scores

To manage player authentication, I used Anvil’s Users Service, which automatically created a Users Table that stored player details.

With just one line, I could add a login Form:

anvil.users.login_with_form()

This allows players to sign up and log in with their Google accounts, making it easy to track their progress across games. Each new user is automatically added as a row in the Users Table.

At any point in the app, I can access the currently logged-in player by calling:

player = anvil.users.get_user()

Tracking Player Scores

To track scores, I added a points column to the automatically generated Users Table, where I store the total points each player accumulates.

For every point a player earns in a game, I update the player’s total score:

player = anvil.users.get_user()

# Other game logic...

    if player['points']:
      player['points'] += points_gained
    else:
      player['points'] = points_gained

This ensures that scores remain updated and persistent across game sessions.

Publishing and Sharing

Once everything was ready, publishing the game was just one click on the Publish button in the Anvil editor. I instantly got a public URL, that I could share with friends to start playing right away!

Want to Build Your Own?

These are just some of the highlights, but you can clone the full project and explore how it works yourself.

More about Anvil

Introducing the Interactive Debugger in Anvil

Love Otudor — Wed, 26 Feb 2025 09:47:49 +0000

Say Hello to the Interactive Debugger in Anvil

We are very excited to announce the first release of the Interactive Debugger in Anvil. Say goodbye to countless print statements!

With the Interactive Debugger, you can now pause your code as it executes, inspect variables, and gain deeper insights into what’s happening in your code—whether on the client or server side.

What is the Interactive Debugger?

The Interactive Debugger lets you:

Add breakpoints to your code to pause execution at specific lines.
Inspect variables and values at runtime.
Debug both client-side and server-side code, including background tasks and HTTP endpoints.

Getting started is simple: Click in the gutter next to any executable line of code to add a breakpoint and then run your code. When this breakpoint is hit, the debugger pauses execution and opens the Debugger Window, where you can easily view and inspect all the variables in your code.

Get Deeper Insights into your Code in real time

With the debugger, you can add and remove breakpoints even while execution is paused, allowing you to adjust your debugging strategy as needed. The debugger toolbar gives you complete control to resume, restart, or stop execution, step over breakpoints, and step into or out of functions effortlessly. This makes it easy to navigate through your code seamlessly and gain a deeper understanding of its behaviour.

Easy Debugging Across Client and Server Code

Anvil’s debugger allows you to step into server code directly from client code. For example, you can start in your client-side form code and step directly into your server code while showing the entire call stack on the browser frame.

Here is a demo illustrating how you can step into server code from client code seamlessly:

Debug Background Tasks and HTTP Endpoints

Debugging background tasks and HTTP endpoints in server modules has never been easier. By adding breakpoints to your background tasks or endpoint calls, you can pause execution, inspect variables, and diagnose issues with accuracy and confidence.

Availability

The debugger is available to everyone!

Free users can use Anvil’s debugger only on the client-side (Form) code.
Client-side and server-side debugging is available on a Business Plan or higher.

What’s Next?

This is just the first version of the Anvil Debugger and we have plans for more interesting features, so stay tuned! In the meantime, we would love to hear your feedback! Try out the debugger today and let us know how it works for you.

For a deep dive into debugging with the interactive debugger in Anvil, as well as additional tools to enhance your debugging process, check out our Debugging Documentation.

Happy debugging!