vueGPT: Automatically Generate Vue 3 <script setup lang='ts'> components like a boss.

main.py

from vueGPT import prompt, make_client

from dotenv import load_dotenv

# load .env file
load_dotenv()

# get openai api key
OPENAI_API_KEY = environ.get('OPENAI_API_KEY')

query = "build a simple switch component that accepts an on prop"
model = 'gpt-4' # use 'gpt-3.5-turbo' only if you must

# build your client
client = chatgpt.make_client(OPENAI_API_KEY)

# run your prompt
prompt_response = chatgpt.prompt(client, query, model)

print(prompt_response)

requirements.txt

python-dotenv
openai

vue_gpt_script_setup_ts_prompt.txt

You're a Senior Vue 3 developer. You build new Vue components using the new Composition API with <script setup lang='ts'>.
Your current assignment is to build a new vue component fulfilling the following requirements: 

{----REPLACE THIS WITH YOUR VUE COMPONENT QUERY----}

Return strictly the code for the Vue component including <template>, <script setup lang='ts'>, and <style> sections.

Example component:

<template>
    <div class='(filename)-w'>
      <h1>{{ name }}</h1>
      <h2>{{ age }}</h2>
      <h2>{{ doubleAge }}</h2>
      <input type='text' :value='name' @input='updateName($event.target.value)' />
    </div>
  </template>
  
  <script lang='ts' setup>
  import { toRefs, ref, defineProps, computed, onMounted } from 'vue'
  
  // ---------------------------- Props / Emit ----------------------------
  
  interface Props {
    name: string
    lastName?: string
  }
  
  const props = defineProps<Props>()
  const { name } = toRefs(props)
  
  const emit = defineEmits(['update'])
  
  // ---------------------------- State / Getters ----------------------------
  
  const age = ref(30)
  
  const doubleAge = computed(_ => age.value * 2)
  
  // ---------------------------- Methods ----------------------------
  
  function updateName(value: string) {
    emit('update', value)
  }
  
  // ---------------------------- Lifecycle Hooks ----------------------------
  
  onMounted(() => {
    console.log('mounted')
  })
  </script>
  
  <style></style>

vueGPT.py

import json
from typing import Any, Dict
import openai

VUE_EXAMPLE = """<template>
    <div class='(filename)-w'>
      <h1>{{ name }}</h1>
      <h2>{{ age }}</h2>
      <h2>{{ doubleAge }}</h2>
      <input type='text' :value='name' @input='updateName($event.target.value)' />
    </div>
  </template>
  
  <script lang='ts' setup>
  import { toRefs, ref, defineProps, computed, onMounted } from 'vue'
  
  // ---------------------------- Props / Emit ----------------------------
  
  interface Props {
    name: string
    lastName?: string
  }
  
  const props = defineProps<Props>()
  const { name } = toRefs(props)
  
  const emit = defineEmits(['update'])
  
  // ---------------------------- State / Getters ----------------------------
  
  const age = ref(30)
  
  const doubleAge = computed(_ => age.value * 2)
  
  // ---------------------------- Methods ----------------------------
  
  function updateName(value: string) {
    emit('update', value)
  }
  
  // ---------------------------- Lifecycle Hooks ----------------------------
  
  onMounted(() => {
    console.log('mounted')
  })
  </script>
  
  <style></style>
"""
PROMPT = """You're a Senior Vue 3 developer. You build new Vue components using the new Composition API with <script setup lang='ts'>.
Your current assignment is to build a new vue component fulfilling the following requirements: 

{vue_component}

Return strictly the code for the Vue component including <template>, <script setup lang='ts'>, and <style> sections.

Example component:

{vue_example}"""

# ------------------ helpers ------------------


def safe_get(data, dot_chained_keys):
    '''
        {'a': {'b': [{'c': 1}]}}
        safe_get(data, 'a.b.0.c') -> 1
    '''
    keys = dot_chained_keys.split('.')
    for key in keys:
        try:
            if isinstance(data, list):
                data = data[int(key)]
            else:
                data = data[key]
        except (KeyError, TypeError, IndexError):
            return None
    return data


def response_parser(response: Dict[str, Any]):
    return safe_get(response, 'choices.0.message.content')

def make_client(gpt_api_key: str):
    openai.api_key = gpt_api_key
    return openai

# ------------------ content generators ------------------

def prompt(openai_client, vue_component_query: str, model: str) -> str: 

    complete_prompt = PROMPT.format(vue_component=vue_component_query, vue_example=VUE_EXAMPLE)

    print(f"Firing off prompt")

    response = openai_client.ChatCompletion.create(
        model=model,
        messages=[
            {
                "role": "user",
                "content": complete_prompt,
            }
        ]
    )

    print(f"response: {json.dumps(response, indent=2)}")

    return response_parser(response)