DEV Community

Denis
Denis

Posted on

How our AI Agents Built SchemaCraft: A Visual Data Structure Designer in Record Time

SchemaCraft: Revolutionizing Data Structure Design with AI

In the world of software development, defining consistent and robust data structures is crucial for the success of any project, from API design to data analysis. Traditional methods often involve manually writing complex specifications in formats like JSON Schema or XML, which is time-consuming and prone to errors. We introduce SchemaCraft: Visual Data Structure Designer & Generator – an intuitive visual tool that transforms this process, all thanks to the amazing work of our AI agents.

The Challenge: Simplifying a Complex Process

Our goal was to create a tool that would allow developers, API designers, and data analysts to quickly and easily visually design and generate data structures. We needed a solution that could handle complex relationships, various data types, and export to popular formats. Who better to take on this challenge than our team of specialized AI agents?

The AI Team in Action: From Concept to Deployment

The entire development process of SchemaCraft was a testament to the efficient collaboration between our AI agents:

  • Klára (AI Designer): Klára was at the forefront of the user experience. She designed an intuitive drag-and-drop interface that allows users to visually assemble schema elements. She was responsible for the seamless flow of defining data types (strings, numbers, booleans, objects, arrays), defining relationships, and instantly visualizing the overall structure. Her goal was to make the tool as accessible as possible, even for those without extensive experience in visual schema design.

  • Jan (AI Developer): Jan took Klára's designs and breathed life into them. He implemented all the front-end logic, dynamic schema creation based on user inputs, and complex back-end integration for generating output formats. His work also involved robust data type handling and complex validations. Jan also handled the integration of the Stripe payment gateway to easily unlock advanced features. Thanks to Jan's precision, SchemaCraft is not only beautiful but also functional and reliable.

    "During SchemaCraft's development, it was crucial to design a modular architecture for dynamic schema manipulation. Each visual user action translates into an internal representation of a JSON Schema object, which can then be easily serialized into various formats. An example is the addPropertyToSchema function, which flexibly adds properties to nested objects and arrays."

    function addPropertyToSchema(schema, parentPath, propertyName, type, options = {}) {
        let current = schema;
        const pathParts = parentPath.split('.').filter(p => p);
    
        for (const part of pathParts) {
            if (current.properties && current.properties[part]) {
                current = current.properties[part];
            } else if (current.items && current.items.properties && current.items.properties[part]) {
                current = current.items.properties[part]; // Handle array of objects
            } else {
                // Create missing path elements if necessary, for simplicity, assume they exist for now
                console.warn("Schema path not found, assuming structure exists.");
                break;
            }
        }
    
        if (!current.properties) {
            current.properties = {};
        }
        current.properties[propertyName] = { type, ...options };
        return schema;
    }
    
    // Example usage within SchemaCraft's internal representation
    let userSchema = {
        type: "object",
        properties: {
            id: { type: "string", format: "uuid" },
            name: { type: "string" }
        }
    };
    
    userSchema = addPropertyToSchema(userSchema, "", "email", "string", { format: "email" });
    userSchema = addPropertyToSchema(userSchema, "", "address", "object", {
        properties: {
            street: { type: "string" },
            city: { type: "string" }
        }
    });
    
    // This snippet demonstrates how SchemaCraft might dynamically build a JSON Schema object
    // based on user's visual interactions.
    
  • Martin (AI QA Tester): Martin's role was critical for quality assurance. He systematically tested the visual builder, verifying the correctness of generated schemas for all supported types and relationships. He thoroughly reviewed the export to JSON Schema, OpenAPI, and TypeScript, as well as the functionality of sample data generation and the robustness of validation rules. His uncompromising approach to testing ensured that SchemaCraft is a stable and reliable tool.

  • Tomáš (AI DevOps Engineer): After development and testing were complete, Tomáš ensured the seamless deployment of SchemaCraft. He optimized the infrastructure, configured the CI/CD pipeline, and ensured that the live demo is always available, fast, and scalable. His work guarantees that you can access the tool whenever you need it.

Features and Unlocking Full Potential

SchemaCraft offers an impressive suite of features:

  • Intuitive Visual Builder: Drag-and-drop for quickly defining complex structures.
  • Data Type and Relationship Definition: Easy setting of element types and their hierarchy.
  • Instant Visualization: Real-time preview of your schema.
  • Export: Generate JSON Schema, OpenAPI definitions, TypeScript interfaces, and sample data (JSON/XML).
  • Advanced Validation Rules: For robust data models.

Our free version allows you to design basic structures with limited complexity and generate small sample data. After three uses, you can unlock the full version for just $1.99 via Stripe, enabling unlimited schema complexity, all export options, and advanced validation rules.

Try SchemaCraft Today!

We are thrilled to introduce SchemaCraft and believe it will simplify your data structure design workflow. There's nothing quite like experiencing it firsthand.

Visit our live demo and start building your schemas today: https://pixeloffice.eu/showcase/schemacraft-visual-designer/

Let us know what you think! Your feedback is invaluable as we continue to refine the tool.

Top comments (0)