From Sketch to Kubernetes: Building an AI-Powered Helm Chart Generator in a Weekend

Ayush Saluja — Sun, 13 Jul 2025 15:02:41 +0000

Ever found yourself sketching out Kubernetes architectures on whiteboards or napkins, then spending hours translating those drawings into YAML? What if you could just draw your architecture and have AI generate the Helm charts for you?

That's exactly what I built last weekend - and I'm sharing the entire journey (and code) with you.

💡 The "What If" Moment

While doodling microservices on my notebook, I thought: "What if I could just draw this and have GPT-4 Vision generate the Helm charts?"

The idea was simple:

Draw rectangles = Deployments
Draw circles = Services
Add text labels = Component names
Let AI do the heavy lifting

🚀 Building the Prototype

Tech Stack (Keep It Simple)

Frontend: React (Create React App for speed)
Canvas: HTML5 Canvas API
AI: Azure OpenAI GPT-4 Vision
Styling: Tailwind CSS
No backend needed (direct API calls)

The 3-Hour Sprint

Hour 1: Canvas Foundation

// Basic drawing tools
const tools = ['pen', 'rectangle', 'circle', 'text'];

// Canvas service for drawing operations
class CanvasService {
  static drawRectangle(ctx, startPos, endPos, color) {
    const width = endPos.x - startPos.x;
    const height = endPos.y - startPos.y;
    ctx.strokeStyle = color;
    ctx.strokeRect(startPos.x, startPos.y, width, height);
  }
}

Hour 2: AI Integration

// Send canvas image to Azure OpenAI
const analyzeDrawing = async (imageDataUrl) => {
  const response = await fetch(azureEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'api-key': apiKey
    },
    body: JSON.stringify({
      messages: [{
        role: 'user',
        content: [
          { type: 'text', text: analysisPrompt },
          { type: 'image_url', image_url: { url: imageDataUrl } }
        ]
      }],
      max_tokens: 4000
    })
  });
};

Hour 3: YAML Generation

const analysisPrompt = `
Analyze this hand-drawn Kubernetes architecture:
- Rectangles = Deployments
- Circles = Services  
- Lines = Connections
- Text = Component names

Generate production-ready Helm chart YAML with:
- {{ .Values.* }} templating
- Resource limits
- Health checks
- Best practices
`;

🎨 The Magic Moment

When I drew this simple architecture:

[Frontend] → (Load Balancer) → [API] → (Database)

And got back this production-ready Helm chart:

apiVersion: v2
name: my-application  
description: Generated from architecture drawing
version: 0.1.0

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{ include "chart.fullname" . }}-frontend
spec:
  replicas: {{ .Values.frontend.replicas | default 3 }}
  selector:
    matchLabels:
      app: frontend
  template:
    spec:
      containers:
      - name: frontend
        image: "{{ .Values.frontend.image.repository }}:{{ .Values.frontend.image.tag }}"
        ports:
        - containerPort: 80
        resources:
          limits:
            cpu: 500m
            memory: 512Mi
# ... complete deployment config

I knew I had something special.

🛠️ Key Features That Emerged

1. Intuitive Drawing Interface

Pen tool for freehand sketching
Shape tools for clean components
Text labels for naming
Color coding for different environments

2. Smart AI Analysis

GPT-4 Vision recognizes architectural patterns
Generates appropriate Kubernetes resources
Includes production best practices
Adds proper Helm templating

3. Real-World Output

Production-ready YAML
Built-in validation
Download as .yaml files
Editable in the interface

🎯 Unexpected Discoveries

What Worked Better Than Expected

AI Pattern Recognition: GPT-4 Vision is surprisingly good at understanding architectural intent from rough sketches.

Helm Templating: The AI consistently generates proper {{ .Values.* }} syntax without being explicitly taught.

Error Recovery: When drawings are ambiguous, the AI makes reasonable assumptions and adds helpful comments.

What I Learned

Canvas Optimization: Had to limit canvas size to prevent memory issues - 600x400px is the sweet spot.

Prompt Engineering: Specific instructions about shape meanings dramatically improved output quality.

Browser Limitations: Direct API calls work for prototyping but need a backend proxy for production.

🚧 The Rough Edges (And Why That's OK)

This is a prototype built for exploration, not production:

CORS Issues: Browser security blocks some API calls
No Authentication: API keys in frontend (demo only!)
Basic Validation: Minimal error handling
Memory Constraints: Canvas history limited to prevent crashes

But that's exactly the point - sometimes you need to build the "wrong" thing first to discover the right approach.

🔍 What's Next?

I'm open-sourcing this entire project because:

The concept has legs - there's real value here
Community can improve it - better than my weekend hack
Multiple use cases - beyond just Helm charts

Potential directions:

Terraform generation from infrastructure diagrams
Database schema from ER diagrams
Docker Compose from service sketches
CI/CD pipelines from workflow drawings

🎉 Try It Yourself

Quick start:

git clone https://github.com/ayush571995/helm-chart-designer
cd helm-chart-designer
npm install

# Add your Azure OpenAI credentials to .env
echo "REACT_APP_AZURE_OPENAI_ENDPOINT=your-endpoint" > .env
echo "REACT_APP_AZURE_OPENAI_API_KEY=your-key" >> .env

npm start

What to draw:

Rectangle labeled "frontend"
Circle labeled "api-service"
Line connecting them
Click "Generate YAML"
Watch the magic happen ✨

💭 Reflections

Building this reminded me why I love programming - taking a random Saturday idea and making it real in just a few hours.

The best prototypes aren't perfect - they're possible. They show what could be, not what should be.

Sometimes the most valuable thing you can build is proof that something can be built.

🤝 Join the Experiment

If this resonates with you:

⭐ Star the repo if you find it interesting
🍴 Fork it and make it better
🐛 Break it and tell me how
💡 Extend it in directions I never imagined

The code is rough, the edges are sharp, but the idea is solid.

What would you build with this foundation?

What's your experience with rapid prototyping? Have you built anything that surprised you with how well it worked? Drop a comment below - I'd love to hear your weekend hack stories! 👇

DEV Community: Ayush Saluja