Integrating ChatGPT with a Low‑code Plugin for Automatic Variable Naming and Code Generation

For the past three years I have been using a low‑code plugin as a productivity tool for routine tasks such as scaffolding, generating CRUD pages, creating TypeScript types from API docs, and producing mock data.

When working on a financial project with dozens of fields that had obscure Chinese names, I initially resorted to generic names like column1 – column20 . A colleague suggested letting ChatGPT handle the naming, so I began exploring how to integrate ChatGPT into the low‑code plugin.

I examined several popular VS Code ChatGPT extensions, which typically add right‑click menu options for code analysis, refactoring, unit‑test generation, and defect detection. To translate selected Chinese variable names to English, I would otherwise need to copy‑paste the code and craft a prompt each time.

Using the low‑code platform’s existing code‑snippet feature, I easily added a preset Prompt that can be invoked directly from the right‑click menu. The configuration UI for the ChatGPT integration is shown below.

Configure ChatGPT

Low‑code now supports both the official OpenAI API and several domestic proxy services. The configuration fields include the API key, endpoint, and model selection.

Preset Prompt Templates

The snippet system supports EJS syntax, allowing you to create reusable Prompt templates for tasks such as code analysis, refactoring, and adding comments.

Low‑code Code Generation Combined with ChatGPT

When generating a CRUD interface with Chinese field names, the plugin initially produces code like the following:

import { reactive, ref } from "vue";

interface ITableListItem {
  id: string;
  成本中心编码: string;
  成本中心名称: string;
  账套编码: string;
  银行核算编码: string;
  订单号: string;
  订单金额: string;
  确收时间: string;
  "劳务成本-不含税": string;
}

interface IFormData {
  成本中心编码?: string;
  成本中心名称?: string;
  账套编码?: string;
  银行核算编码?: string;
  订单号?: string;
  订单金额?: string;
  确收时间?: string;
  "劳务成本-不含税"?: string;
}

const defaultFormData: IFormData = {
  成本中心编码: undefined,
  成本中心名称: undefined,
  账套编码: undefined,
  银行核算编码: undefined,
  订单号: undefined,
  订单金额: undefined,
  确收时间: undefined,
  "劳务成本-不含税": undefined,
};

export const useModel = () => {
  const filterForm = reactive
({ ...defaultFormData });
  const tableList = ref<(ITableListItem & { [propName: string]: unknown })[]>([]);
  const pagination = reactive({ page: 1, pageSize: 10, total: 0 });
  const loading = reactive({ list: false });
  return { filterForm, tableList, pagination, loading };
};

export type Model = ReturnType
;

After sending the code to ChatGPT with a Prompt that asks for English translation of the variable names, the plugin rewrites the file as:

import { reactive, ref } from "vue";

interface ITableListItem {
  id: string;
  costCenterCode: string;
  costCenterName: string;
  accountingCode: string;
  bankAccountingCode: string;
  orderNumber: string;
  orderAmount: string;
  confirmedTime: string;
  laborCostExcludingTax: string;
}

interface IFormData {
  costCenterCode?: string;
  costCenterName?: string;
  accountingCode?: string;
  bankAccountingCode?: string;
  orderNumber?: string;
  orderAmount?: string;
  confirmedTime?: string;
  laborCostExcludingTax?: string;
}

const defaultFormData: IFormData = {
  costCenterCode: undefined,
  costCenterName: undefined,
  accountingCode: undefined,
  bankAccountingCode: undefined,
  orderNumber: undefined,
  orderAmount: undefined,
  confirmedTime: undefined,
  laborCostExcludingTax: undefined,
};

export const useModel = () => {
  const filterForm = reactive
({ ...defaultFormData });
  const tableList = ref<(ITableListItem & { [propName: string]: unknown })[]>([]);
  const pagination = reactive({ page: 1, pageSize: 10, total: 0 });
  const loading = reactive({ list: false });
  return { filterForm, tableList, pagination, loading };
};

export type Model = ReturnType
;

This demonstrates how the low‑code platform can leverage ChatGPT to automatically translate domain‑specific Chinese identifiers into clear English names, streamlining front‑end development.