DEV Community: Level09

Chat your website to life: The CMS, Reimagined

Level09 — Fri, 09 May 2025 18:33:37 +0000

"Why can't building a website feel as fast as drafting a tweet?"

Prologue

A tired founder stares at a blank landing page and thinks: "Code, hosting, SEO, deployment—why so many moving parts?" That frustration sparked Vilcos.

Chapter 1 — Foundations

Vilcos unites three modern stacks:

Chainlit + Agno – a model-agnostic AI co-developer that edits HTML/CSS/JS on demand.
Vite + Tailwind – hot-reload frontend workflow for instant feedback.
Docker + Fly.io – global deployment in a single command.

Workflow overview:

# Modern installation (new!)
npx create-vilcos-app my-website

# Standard operations
./vilcos start    # Live AI editing & preview
./vilcos publish  # Static build & SEO post-processing
./vilcos deploy   # Multi-stage Docker → Fly.io edge

Get started in seconds with npx create-vilcos-app my-website and a polished black-themed template appears, ready for conversation-driven edits.

Chapter 2 — Conversational Development

Drag-and-drop builders limit creativity. Vilcos lets you talk to your site:

Ask – "Add a pricing table with three tiers."
See – Chainlit patches the code in seconds.
Refine – "Switch to dark mode." Immediate.

An embedded knowledge base keeps the AI grounded in your exact template files, avoiding hallucinations and ensuring output matches your site's existing structure.

Chapter 3 — Deployment Without Drama

Docker compiles; Caddy serves; Fly.io distributes.

Zero-config HTTPS and anycast IPs.
Add a CNAME in Cloudflare, run fly deploy, and you're online worldwide in under a minute.

Why It Matters

Speed – Idea → live site in one sitting.
Simplicity – One repo, one CLI, no CI pipeline gymnastics.
Portability – Templates are plain files—take them anywhere.
Flexibility – Works with any AI model that Agno supports.
Accessibility – Install with a single command using the familiar npx pattern.

Join the project, open a chat with Vilcos, and build something remarkable.

Built with practical caffeine and a commitment to making the web faster to create.

Build the Future: An AI-Powered, Natural Language CMS with Enferno

Level09 — Tue, 01 Apr 2025 16:20:17 +0000

Forget everything you know about traditional content management. Forget clunky admin panels, endless forms, and the tedious cycle of coding, testing, and deploying even simple text changes. Forget the limitations of predefined actions and the development time sunk into building those restrictive interfaces.

Now, imagine a different reality. Imagine simply telling your web application what you want. "Change the hero banner text." "Add a section about our new service." "Make this button green." Imagine using casual, everyday language – maybe even with a typo or two – and watching your application understand and execute your request instantly.

Mind-blowing? Maybe. But this future isn't science fiction anymore. It's here, and it's powered by AI agents.

With the Enferno framework, integrating these agentic superpowers into your Flask application is surprisingly straightforward. We'll show you how to add an AI-powered "Developer Agent" that lets you modify frontend templates using simple natural language commands – like having a mini-Cursor running right inside your app, ready to follow your instructions.

Prerequisites & Dependencies

To bring this agentic magic to life, you'll primarily need:

Enferno Framework: The foundation for our application.
An Agent Library: We use agno (version 1.2.6 or higher is recommended) for its simplicity in creating agents and integrating tools.
An LLM API Key: For example, an OpenAI API key if using models like GPT-4o. Make sure to export your OpenAI API key in your .env file:

   OPENAI_API_KEY=your-api-key-here

Key Dependencies: Ensure agno>=1.2.6 and openai>=1.12.0 (or your chosen LLM's library) are included in your requirements.txt.

The Vision: Beyond Traditional CMS

Traditional Content Management Systems offer predefined interfaces. While powerful, they can be rigid. Developer tasks like tweaking templates often involve manual code changes, context switching, and careful validation.

What if we could bridge this gap? What if you could instruct your application directly?

"Hey Enferno, change the homepage title to 'Welcome Agents!' and make it blue."

This is the core idea: leveraging AI agents that understand your project's structure and rules to perform tasks based on natural language instructions.

Meet the Enferno Developer Agent

We can implement a DeveloperAgent within our Enferno application. This agent acts as an AI assistant specialized in understanding and modifying the project structure, particularly Jinja2 templates.

Key Concepts:

AI Agent Core: Use a library (like agno) to manage the agent's interaction with a Large Language Model (LLM), handle prompts, and process responses.
Tools for Action: Equip the agent with tools to interact with the application. For template modification, FileTools (scoped to the templates directory for safety) allow the agent to read and write files.
Context-Aware Instructions: This is crucial. Initialize the agent with detailed instructions about the Enferno framework's patterns (Vue/Jinja integration, Vuetify components). Dynamically loading project-specific rules (like .cursor/rules/*.mdc files) ensures the agent adheres to your coding standards.
CLI Integration: Expose the agent's functionality via a clean Flask command-line interface using click for easy access.

Under the Hood: The Agentic Engine

So, how does this magic actually work? Let's peek behind the curtain at the core components. Adding agentic capabilities requires surprisingly little boilerplate in Enferno.

1. The Brain: Defining the Agent (enferno/agents/developer.py):

This class is the heart of our operation – the AI assistant ready to follow instructions. We equip it with:

A powerful language model (like GPT-4o).
Safely scoped tools (like FileTools restricted to the templates directory).
Project-specific instructions and context (like your codebase rules loaded from .cursor/rules).

# enferno/agents/developer.py
import os
from pathlib import Path
from textwrap import dedent
from agno.agent import Agent # Example using agno
from agno.models.openai import OpenAIChat
from agno.tools.file import FileTools

class DeveloperAgent:
    """An AI assistant specialized in development tasks."""

    def __init__(self):
        current_dir = Path(__file__).parent.parent
        templates_dir = current_dir / 'templates'
        rules_dir = Path(os.getcwd()) / '.cursor' / 'rules'
        # ... (Rule loading logic to get combined_rules) ...
        combined_rules = '\n'.join(rules_content.values())

        self.agent = Agent(
            name="Enferno Developer",
            model=OpenAIChat(id="gpt-4o"), # Use a powerful LLM
            tools=[FileTools(
                base_dir=templates_dir, # Safely scoped
                save_files=True, read_files=True, list_files=True
            )],
            show_tool_calls=True,
            instructions=dedent(f"""\
                You are an expert Enferno framework developer...
                Follow Jinja2/Vue patterns...
                Use Vuetify components correctly...
                IMPORTANT - Follow these specific patterns:
                {combined_rules}
            """ ), # Inject project rules
            markdown=True
        )

    def modify_template(self, request, template_path="index.html", stream=True):
        """Modify a template based on the request."""
        template_path_obj = Path(template_path)
        # ... (Logic to read template, prompt agent, execute, verify) ...
        prompt = dedent(f"""\
            Please modify template: {template_path_obj.name}
            Request: {request}
            Perform these steps:
            1. Read the file content.
            2. Analyze the request and plan changes respecting structure.
            3. Apply changes ONLY to text content or attributes like CSS classes.
            4. Save the modified file.
            Be careful with Jinja/Vue syntax.
            """)
        response = self.agent.print_response(prompt, stream=stream)
        # ... (Add verification logic here if desired) ...
        return response

2. The Interface: Creating the CLI Command (enferno/commands.py):

This is how you talk to the agent. We create a simple flask agent template command using Click. When run:

It prompts you for your request if you don't provide one directly.
It spins up the DeveloperAgent.
It passes your request to the agent's modify_template method.
(Crucially, Enferno automatically finds and registers this command group – no manual app.py wiring needed!)

# enferno/commands.py
import click
from flask.cli import with_appcontext, AppGroup
# Assuming your agent class is importable
from enferno.agents import DeveloperAgent 

# Create agent command group
agent_cli = AppGroup('agent', help='AI-powered development tools')

@agent_cli.command('template')
@click.argument('request', required=False)
@click.option('--template-path', default='index.html', help='Path to the template file relative to templates/')
@with_appcontext
def template_cmd(request, template_path):
    """Modify a template using AI assistance (text/attributes)."""
    if not request:
        request = click.prompt('What changes would you like to make to the template?')

    try:
        # Instantiate the agent
        agent = DeveloperAgent()
        # Call the agent method
        agent.modify_template(request, template_path)
        click.echo(f"✨ Agent finished processing request for '{template_path}'. Check the file for changes.")
    except Exception as e:
        click.echo(f"Error processing agent request: {str(e)}", err=True)

(Note: Enferno automatically detects and registers click.Command and click.Group objects like agent_cli defined in enferno/commands.py, so no manual registration in app.py is needed.)

Demo: Modifying Homepage Content via CLI

Let's see it in action! Here's our initial homepage:

Initial homepage before modifications

Now, let's modify the content. Simply type:

flask agent template

The command will prompt you:

What changes would you like to make to the template?

You can then type your request:

Make the main card wider by adding a max-width class, then update the main title to 'The Great Monkey-Horse Adventure' and change the text below it to a fun story about 5 monkeys and a horse who go on an adventure together. Make it engaging and funny. Also, make the title text blue.

The DeveloperAgent processes your request and modifies the template. Here's the result:

Homepage after applying the changes

Just like that, we've transformed our homepage into an engaging story using a natural language command!

Your In-App "Mini-Cursor"

This approach essentially embeds a specialized AI assistant within your application's framework. It understands the context, follows project-specific rules, and uses tools safely. It's like having a focused version of Cursor available directly via your application's CLI, accelerating specific development and content management tasks.

The Future is Agentic

This is just the beginning. Imagine extending this concept:

Agents for generating blog post drafts based on outlines.
Agents for managing user roles or permissions via commands.
Agents integrated into a web UI for non-developers to update content safely within predefined boundaries.
Agents helping automate database interactions based on high-level descriptions.

The Enferno framework provides a flexible and accessible platform for experimenting with and building these next-generation, agentic web applications.

Get the Code

Explore the Enferno framework and its agentic potential. The code for this example can be found at:
https://github.com/level09/natcms.git (Note: This repo demonstrates the concept)

Let us know what you think! How would you improve this agent? What other agentic features would you like to see integrated into web frameworks?

P.S. Want more wild ideas about the future of web dev, AI, and maybe even robot pets? Follow me on Twitter: @level09! 😉

Flask Apps from the Future: Unleash Semantic Search and RAG in 10 Minutes or Less

Level09 — Sat, 01 Mar 2025 14:15:29 +0000

In the era of AI-powered applications, the ability to search and retrieve information based on meaning rather than just keywords has become a game-changer. Enter Retrieval-Augmented Generation (RAG), a powerful approach that combines the precision of information retrieval with the flexibility of generative AI. Today, I'm excited to share how you can implement a complete RAG system in just 15 minutes using Enferno, a modern Flask framework.

The Magic of Semantic Search

Before diving into the implementation, let's understand why semantic search is revolutionary. Traditional keyword search is like looking for a book in a library using only the title—if the exact words aren't there, you're out of luck. Semantic search, on the other hand, understands the meaning behind your query, making it possible to find relevant information even when the exact keywords aren't present.

Consider these examples from our demo application:

Query: "animals with amazing abilities"
- Result: Documents about cats' sleeping patterns and communication methods
- No mention of "amazing abilities" in the document, but the semantic connection is made
Query: "space phenomena that defy intuition"
- Result: Information about Venus's day being longer than its year and Saturn's density
- The system understands the conceptual link between "defying intuition" and unusual space facts

This is the power of vector embeddings—transforming text into mathematical representations that capture meaning, not just words.

Enter Enferno: The Flask Framework on Steroids

Enferno is a modern Python web framework built on Flask, designed for rapid development of secure and scalable applications. It combines best practices with pre-configured components, making it the perfect foundation for our RAG implementation.

Building RAG with Enferno: A 15-Minute Journey

I've created a complete, ready-to-use RAG implementation that you can clone and run in minutes. The repository is available at github.com/level09/rag.

Let's walk through the key components that make this possible:

1. Vector Storage with PostgreSQL and pgvector

The heart of our RAG system is the ability to store and query vector embeddings efficiently. PostgreSQL with the pgvector extension provides a powerful solution:

class Document(db.Model):
    __tablename__ = 'documents'
    # ...
    embedding = db.Column(Vector(384))  # 384-dimensional embeddings

This simple model definition enables us to store document embeddings directly in our database, making them queryable using vector similarity operations.

2. Generating Embeddings with Sentence Transformers

To convert text into meaningful vector representations, we use the sentence-transformers library:

from sentence_transformers import SentenceTransformer
model = SentenceTransformer('all-MiniLM-L6-v2', device='cpu')

# Generate embedding
embedding = model.encode(text, normalize_embeddings=True)

The all-MiniLM-L6-v2 model is a lightweight yet powerful transformer that generates 384-dimensional embeddings, capturing the semantic essence of text in a compact form.

3. Vector Search with PostgreSQL

The magic happens when we search for documents using vector similarity:

query_embedding = model.encode(search_query, normalize_embeddings=True)

# SQL query using cosine distance
query = f'''
    SELECT 
        id, title, content,
        embedding <=> '{query_embedding_str}'::vector as distance
    FROM documents
    ORDER BY embedding <=> '{query_embedding_str}'::vector
    LIMIT :limit
'''

The <=> operator computes the cosine distance between vectors, allowing us to find the most semantically similar documents to our query.

4. A Beautiful UI for Interaction

What good is powerful search without an intuitive interface? Our implementation includes a clean, responsive UI built with Vue.js and Vuetify:

Document creation form for adding content
Search interface with adjustable similarity threshold
Results display with color-coded similarity scores
One-click sample data seeding

Real-World Applications: Beyond the Demo

While our demo focuses on a simple document search system, the applications of this technology are vast:

Customer Support Knowledge Bases: Help agents find relevant information even when customer queries don't match documentation exactly
Legal Document Analysis: Search through case law and contracts based on concepts, not just keywords
Research Assistants: Help researchers find relevant papers across disciplines with different terminology
E-commerce Search: Understand what customers are looking for even when they use non-standard descriptions
Content Recommendation: Suggest related articles based on semantic similarity rather than tag matching

Getting Started in 5 Simple Steps

Ready to try it yourself? Follow these steps:

Clone and Setup:

   git clone https://github.com/level09/rag.git
   cd rag
   ./setup.sh

Configure PostgreSQL with pgvector:

   sudo -u postgres psql
   CREATE DATABASE enferno_rag;
   \c enferno_rag
   CREATE EXTENSION IF NOT EXISTS vector;

Update your .env file:

   SQLALCHEMY_DATABASE_URI=postgresql://postgres:postgres@localhost/enferno_rag

Initialize the Application:

   flask create-db
   flask install

Run and Explore:

   flask run

Visit http://localhost:5000 and start exploring the power of semantic search!

The Future of RAG with Enferno

This implementation is just the beginning. The combination of Enferno's rapid development capabilities with modern AI techniques opens up exciting possibilities:

Multi-modal RAG: Extend the system to handle images and other media types
Hybrid Search: Combine vector search with traditional keyword search for even better results
LLM Integration: Connect the retrieval system to large language models for complete RAG pipelines
Fine-tuned Embeddings: Train domain-specific embedding models for specialized applications

Conclusion: The 15-Minute Revolution

Building a RAG system used to require deep expertise in machine learning, vector databases, and web development. With Enferno and the power of modern Python libraries, we've reduced this to a 15-minute implementation that anyone with basic Flask knowledge can understand and extend.

The repository at github.com/level09/rag provides a complete, production-ready starting point for your semantic search journey. Clone it, customize it, and supercharge your applications with the power of meaning-based search.

Happy coding!

Want to learn more about Enferno? Visit the official documentation or check out the main repository.