A Platform for Safely Promoting AI-Driven Development

Introduction

In recent years, development methods utilizing AI have rapidly proliferated. Particularly with techniques like "Vibe Coding," a new development paradigm is emerging where developers give high-level instructions to AI, and AI generates the code. While this AI-driven development offers overwhelming productivity gains compared to traditional methods, the possibility of AI making mistakes cannot be denied. ai-schema is a platform that provides guardrails and schema definitions to safely and efficiently promote such AI-driven development.

What is ai-schema?

ai-schema is a platform that provides guardrails and schema definitions to safely promote AI-driven development. Especially in front-end development, it ensures safety even if AI makes mistakes and promotes collaboration between developers and AI.

Key Point

Tolerate AI mistakes while ensuring safety. In AI-driven development, overall productivity improvement is crucial, even if AI makes minor mistakes. Particularly in the UI domain, where rapid development is often prioritized over strict accuracy, ai-schema provides guardrails to prevent critical issues while tolerating minor AI errors.

The Importance of Guardrails in AI-Driven Development

Guardrails are crucial in AI-driven development, especially in the front-end domain, for the following reasons:

Ensuring Safety While Tolerating AI Mistakes

AI is a powerful tool, but it's not perfect. Especially in the UI domain, improving overall development speed is often more important than minor imperfections. ai-schema provides guardrails to ensure that even if AI makes mistakes, they don't lead to critical problems.

What are acceptable mistakes?

Minor visual discrepancies in the UI, temporary non-critical feature glitches, etc., that don't significantly impact the user experience can be tolerated. On the other hand, data loss, security vulnerabilities, and critical feature failures must be prevented.

Guidance Through Schema Definitions

Providing appropriate guidance to AI can improve the quality of its output. ai-schema utilizes standard schema definitions like GraphQL schemas and OpenAPI to provide clear guidelines to AI.

Integration with Backend Services

In front-end development, integration with backend services is essential. ai-schema integrates with backend services like GraphQL and OpenAI API to ensure consistency between the front-end and backend.

Caution

Schema definitions need thorough consideration in the early stages of development. Inappropriate schema definitions can cause significant problems later in the development process.

Comparison of Traditional and AI-Driven Development

Comparing traditional development methods with AI-driven development reveals the following differences:

Aspect	Traditional Development	AI-Driven Development
Development Speed	Depends on developer skill and experience	Significantly improved with AI assistance
Quality Management	Strict testing and reviews	Safety ensured by guardrails and schema definitions
Flexibility	Takes time to respond to changes	Rapid changes and adaptation possible
Learning Curve	Takes time to learn new technologies	Shortened with AI assistance
Error Handling	Focuses on preventing errors	Tolerates errors while ensuring safety

Guardrails with GraphQL and OpenAI

ai-schema provides guardrails utilizing GraphQL and the OpenAI API:

Guardrails with GraphQL Schema

GraphQL schemas clearly define the interface between the front-end and backend. This ensures that the code generated by AI is always compatible with the backend.

graphql

type User {
  id: ID!
  name: String!
  email: String!
  role: UserRole!
}

enum UserRole {
  ADMIN
  USER
  GUEST
}

type Query {
  user(id: ID!): User
  users: [User!]!
}

type Mutation {
  createUser(name: String!, email: String!, role: UserRole!): User!
  updateUser(id: ID!, name: String, email: String, role: UserRole): User!
  deleteUser(id: ID!): Boolean!
}

Guardrails with OpenAI API

Utilizing the OpenAI API allows for safe validation of user input and content generation. ai-schema provides an interface to easily integrate with the OpenAI API.

Example of OpenAI API Usage

typescript

import { OpenAI } from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// Validate user input
async function validateUserInput(input: string): Promise<boolean> {
  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [
      { role: 'system', content: 'You are an assistant that validates user input.' },
      { role: 'user', content: `Determine if the following input is safe: ${input}` }
    ],
    temperature: 0,
  });
  
  return response.choices[0].message.content?.toLowerCase().includes('safe') ?? false;
}

Vibe Coding and ai-schema

Vibe Coding is a new development method where developers give high-level instructions to AI, and AI generates the code. ai-schema provides guardrails and schema definitions to practice Vibe Coding safely and efficiently.

Characteristics of Vibe Coding

High-Level Instructions: Developers provide high-level instructions to AI instead of detailed specifications.
Iterative Improvement: Review the code generated by AI and provide feedback for improvement.
Rapid Development: Development speed is significantly improved compared to traditional methods.

Enhancing Vibe Coding with ai-schema

ai-schema enhances Vibe Coding in the following ways:

Guidance Through Schema Definitions: Provides clear guidelines to AI, improving output quality.
Safety Through Guardrails: Ensures that even if AI makes mistakes, they don't lead to critical problems.
Integration with Backend Services: Ensures consistency between the front-end and backend.

Practical Use Cases

ai-schema is particularly effective in the following use cases:

Accelerating Front-End Development

To accelerate AI-driven front-end development, ai-schema supports the automatic generation of UI components based on GraphQL schemas.

typescript

// GraphQL Schema
const userSchema = `
  type User {
    id: ID!
    name: String!
    email: String!
    role: UserRole!
  }
  
  enum UserRole {
    ADMIN
    USER
    GUEST
  }
`;

typescript

// Instructions to AI
const prompt = `
Create a React component for a user edit form based on the following GraphQL schema:

${userSchema}

- Include input fields for name, email, and role.
- Implement validation.
- Add a submit button.
`;

tsx

// React component generated by AI
import React, { useState } from 'react';

type UserRole = 'ADMIN' | 'USER' | 'GUEST';

interface UserFormProps {
  onSubmit: (user: {
    name: string;
    email: string;
    role: UserRole;
  }) => void;
  initialValues?: {
    name?: string;
    email?: string;
    role?: UserRole;
  };
}

export const UserForm: React.FC<UserFormProps> = ({
  onSubmit,
  initialValues = {}
}) => {
  const [name, setName] = useState(initialValues.name || '');
  const [email, setEmail] = useState(initialValues.email || '');
  const [role, setRole] = useState<UserRole>(initialValues.role || 'USER');
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validate = () => {
    const newErrors: Record<string, string> = {};
    
    if (!name.trim()) {
      newErrors.name = 'Name is required';
    }
    
    if (!email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      newErrors.email = 'Enter a valid email address';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (validate()) {
      onSubmit({ name, email, role });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name && <p className="error">{errors.name}</p>}
      </div>
      
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email && <p className="error">{errors.email}</p>}
      </div>
      
      <div>
        <label htmlFor="role">Role</label>
        <select
          id="role"
          value={role}
          onChange={(e) => setRole(e.target.value as UserRole)}
        >
          <option value="ADMIN">Admin</option>
          <option value="USER">User</option>
          <option value="GUEST">Guest</option>
        </select>
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
};

Ensuring Backend Consistency

Utilizing GraphQL schemas ensures consistency between the front-end and backend. ai-schema provides functionality to detect schema changes and automatically update front-end code.

Safe Validation of User Input

Utilizing the OpenAI API enables safe validation of user input. ai-schema provides an interface to easily integrate with the OpenAI API.

Quick Start

Installation Steps

bash

# Clone the repository
git clone https://github.com/ToyB0x/ai-schema.git
cd ai-schema

# Install dependencies and build
pnpm install && pnpm build

Add to MCP server configuration file (adjust the path to your actual installation location):

json

{
  "mcpServers": {
    "@ai-schema/mcp": {
      "command": "node",
      "args": ["/PATH/TO/YOUR_DIR/ai-schema/apps/mcp/dist/index.js"],
      "autoApprove": [],
      "disabled": false
    }
  }
}

Summary

ai-schema is a platform that provides guardrails and schema definitions to safely and efficiently promote AI-driven development. Especially in front-end development, it ensures safety even if AI makes mistakes and promotes collaboration between developers and AI. By integrating with backend services like GraphQL and OpenAI API, it ensures consistency between the front-end and backend and maximizes the effectiveness of AI-driven development.

Future Outlook

Support for more advanced AI-driven development methods
Integration with a wider variety of backend services
Enhanced features for improving AI output quality
Building a community-driven schema library
Adding advanced security features for enterprise use

ai-schema pioneers the future of AI-driven development and promotes collaboration between developers and AI.

A Platform for Safely Promoting AI-Driven Development ​

Introduction ​

What is ai-schema? ​

The Importance of Guardrails in AI-Driven Development ​

Ensuring Safety While Tolerating AI Mistakes ​

Guidance Through Schema Definitions ​

Integration with Backend Services ​

Comparison of Traditional and AI-Driven Development ​

Guardrails with GraphQL and OpenAI ​

Guardrails with GraphQL Schema ​

Guardrails with OpenAI API ​

Vibe Coding and ai-schema ​

Characteristics of Vibe Coding ​

Enhancing Vibe Coding with ai-schema ​

Practical Use Cases ​

Accelerating Front-End Development ​

Ensuring Backend Consistency ​

Safe Validation of User Input ​

Quick Start ​

Summary ​

A Platform for Safely Promoting AI-Driven Development

Introduction

What is ai-schema?

The Importance of Guardrails in AI-Driven Development

Ensuring Safety While Tolerating AI Mistakes

Guidance Through Schema Definitions

Integration with Backend Services

Comparison of Traditional and AI-Driven Development

Guardrails with GraphQL and OpenAI

Guardrails with GraphQL Schema

Guardrails with OpenAI API

Vibe Coding and ai-schema

Characteristics of Vibe Coding

Enhancing Vibe Coding with ai-schema

Practical Use Cases

Accelerating Front-End Development

Ensuring Backend Consistency

Safe Validation of User Input

Quick Start

Summary