Large Language Models (LLMs) like ChatGPT offer capabilities such as intelligent programming assistance, automated code generation, and interactive learning. Low-code platforms enable users to build applications via graphical interfaces, reducing reliance on deep programming knowledge. Combining these technologies allows users to create applications through natural language conversations, simplifying development and enhancing user experience.
Feasibility
Low-code platforms typically utilize JSON-based Domain-Specific Languages (DSL) to describe pages. User interactions, such as dragging components, modify this JSON data. A rendering engine then translates the JSON into a visual page, often using frameworks like Vue or React. An application consists of multiple pages managed by routing logic.
By providing LLMs with a prompt that includes the DSL structure and examples, we can instruct them to generate valid JSON for low-code pages. This approach is theoretically sound and practical.
Generating Pages with ChatGPT
To utilize ChatGPT, one must register for an OpenAI or Azure account and obtain API access. A low-code platform is also required to validate the generated JSON. The following example demonstrates how to structure a prompt for page generation.
Low-Code Component DSL
Each component in a low-code platform is represented by a JSON object. Below is an example of a text component's DSL:
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VText",
"label": "Text Label",
"propValue": "Editable text",
"icon": "textIcon",
"request": {
"method": "GET",
"data": [],
"url": "",
"series": false,
"time": 1000,
"paramType": "",
"requestCount": 0
},
"style": {
"rotate": 0,
"opacity": 1,
"width": 200,
"height": 28,
"fontSize": "",
"fontWeight": 400,
"lineHeight": "",
"letterSpacing": 0,
"textAlign": "",
"color": "",
"top": 157,
"left": 272
},
"id": "uniqueComponentId"
}
A complete page is an array of these component objects:
// Page JSON
[
{ /* Component 1 */ },
{ /* Component 2 */ },
{ /* Component 3 */ }
]
Prompt Engineering
An effective prompt must define the JSON structure and provide examples. The following template guides the LLM:
I have a low-code platform that generates pages from valid JSON. This JSON is an array where each object represents a component.
Below is the component JSON structure enclosed in ###.
###
--- All component JSON structures ---
###
For a page with a text and button component, the JSON would be:
###
--- Example page JSON structure ---
###
As a technical expert, generate a page according to these rules. Include all component properties without explanation, returning only JSON. Note that some numerical values lack 'px' units.
I need a poster page promoting the benefits of programming.
API Integration
The following code demonstrates calling the ChatGPT API to generate a page:
import { AzureChatOpenAI } from '@langchain/azure-openai';
import 'dotenv/config';
import { readFileSync } from 'fs';
import { resolve, dirname } from 'path';
import { fileURLToPath } from 'url';
const llmClient = new AzureChatOpenAI({
modelName: process.env.AZURE_OPENAI_API_MODEL_NAME,
azureOpenAIEndpoint: process.env.AZURE_OPENAI_API_ENDPOINT,
azureOpenAIApiKey: process.env.AZURE_OPENAI_API_KEY,
azureOpenAIApiVersion: process.env.AZURE_OPENAI_API_VERSION,
});
const currentDir = dirname(fileURLToPath(import.meta.url));
const prompt = readFileSync(resolve(currentDir, '../prompts/page-generation.md'), 'utf-8');
const response = await llmClient.invoke(prompt);
console.log(JSON.stringify(response)); // Outputs generated JSON
Generated JSON Example
The LLM returns a JSON array representing the page components. Here's a sample output:
[
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "Picture",
"label": "Background Image",
"propValue": {
"url": "img/programming_promo_bg.jpg"
},
"style": {
"rotate": 0,
"opacity": 1,
"width": 600,
"height": 800,
"top": 0,
"left": 0,
"position": "absolute",
"zIndex": 0
},
"id": "bgImage"
},
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VText",
"label": "Main Heading",
"propValue": "Unlock the Power of Code",
"style": {
"rotate": 0,
"opacity": 1,
"width": 550,
"height": 120,
"fontSize": "40px",
"fontWeight": 700,
"textAlign": "center",
"color": "#000000",
"top": 60,
"left": 25,
"position": "absolute",
"zIndex": 10
},
"id": "mainHeading"
},
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VText",
"label": "Description",
"propValue": "Learn to build software that solves real-world problems and drives innovation.",
"style": {
"rotate": 0,
"opacity": 1,
"width": 500,
"height": 150,
"fontSize": "22px",
"fontWeight": 400,
"lineHeight": "1.4",
"textAlign": "center",
"color": "#333333",
"top": 220,
"left": 50,
"position": "absolute",
"zIndex": 10
},
"id": "descriptionText"
},
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VButton",
"label": "Get Started",
"propValue": "Begin Your Journey",
"style": {
"rotate": 0,
"opacity": 1,
"width": 220,
"height": 60,
"borderRadius": "30px",
"fontSize": "24px",
"fontWeight": 500,
"textAlign": "center",
"color": "#FFFFFF",
"backgroundColor": "#007BFF",
"top": 450,
"left": 190,
"position": "absolute",
"zIndex": 10
},
"id": "startButton"
}
]
Cost Optimization Strategies
While powerful, LLM APIs can be expensive. Several strategy can reduce costs:
Prompt Optimization
Reducing prompt length decreases token usage. For example:
Original Prompt:
I need a user management system page. Include an "Add User" button at the top. Below, display a table with user names, emails, and registration dates. Clicking a user opens a detailed view with name, email, registration date, last login, and role. Add a search bar for name or email filtering.
Optimized Prompt:
Generate page: User Management
Components: Add Button, User Table (Name, Email, Registration Date), User Details (Name, Email, Registration Date, Last Login, Role), Search Bar (Name, Email)
Fine-Tuning
Fine-tuning customizes a pre-trained model for specific tasks. By training on low-code page examples, the model learns component structures, reducing the need for extensive prompts.
Training data follows this format:
{"prompt": "<prompt text="">", "completion": "<ideal generated="" text="">"}</ideal></prompt>
Example dataset:
{"prompt":"Generate a page with a rectangle component","completion": "[{\"animations\":[],\"events\":{},\"groupStyle\":{},\"isLock\":false,\"collapseName\":\"style\",\"linkage\":{\"duration\":0,\"data\":[{\"id\":\"\",\"label\":\"\",\"event\":\"\",\"style\":[{\"key\":\"\",\"value\":\"\"}]}]},\"component\":\"RectShape\",\"label\":\"Rectangle\",\"propValue\":\"Rectangle\",\"icon\":\"rectangle\",\"style\":{\"rotate\":0,\"opacity\":1,\"width\":250,\"height\":150,\"borderColor\":\"#999\",\"borderWidth\":2,\"backgroundColor\":\"#f0f0f0\",\"top\":100,\"left\":150},\"id\":\"rectComponent\"}]"}
{"prompt":"Generate a page with a text component","completion": "[{\"animations\":[],\"events\":{},\"groupStyle\":{},\"isLock\":false,\"collapseName\":\"style\",\"linkage\":{\"duration\":0,\"data\":[{\"id\":\"\",\"label\":\"\",\"event\":\"\",\"style\":[{\"key\":\"\",\"value\":\"\"}]}]},\"component\":\"VText\",\"label\":\"Sample Text\",\"propValue\":\"Enter your text here\",\"icon\":\"text\",\"style\":{\"rotate\":0,\"opacity\":1,\"width\":300,\"height\":40,\"fontSize\":\"18px\",\"color\":\"#333\",\"top\":80,\"left\":120},\"id\":\"textComponent\"}]"}
{"prompt":"Generate a page with a button component","completion": "[{\"animations\":[],\"events\":{},\"groupStyle\":{},\"isLock\":false,\"collapseName\":\"style\",\"linkage\":{\"duration\":0,\"data\":[{\"id\":\"\",\"label\":\"\",\"event\":\"\",\"style\":[{\"key\":\"\",\"value\":\"\"}]}]},\"component\":\"VButton\",\"label\":\"Click Me\",\"propValue\":\"Button\",\"icon\":\"button\",\"style\":{\"rotate\":0,\"opacity\":1,\"width\":120,\"height\":40,\"borderRadius\":\"5px\",\"fontSize\":\"16px\",\"backgroundColor\":\"#4CAF50\",\"color\":\"#fff\",\"top\":150,\"left\":200},\"id\":\"buttonComponent\"}]"}
Template and Tagging System
Using pre-defined templates with tags (e.g., "medical", "dashboard") can reduce reliance on LLMs. Keywords from user input can trigger template retrieval.
const { Client } = require('@elastic/elasticsearch');
const { NlpManager } = require('node-nlp');
const esClient = new Client({ node: 'http://localhost:9200' });
const nlpManager = new NlpManager({ languages: ['en'] });
const templates = [
{ name: 'Medical Service Promotion Page', tags: ['medical', 'promotion'] },
{ name: 'Programming Education Poster', tags: ['education', 'programming', 'poster'] },
{ name: 'E-commerce Product Listing', tags: ['ecommerce', 'products', 'listing'] }
];
async function extractKeywords(text) {
const result = await nlpManager.extractEntities(text);
return result.entities.map(entity => entity.utteranceText);
}
async function searchTemplates(keywords) {
const { body } = await esClient.search({
index: 'templates',
body: {
query: {
bool: {
should: [
{ match: { name: { query: keywords.join(' '), boost: 2 } } },
{ terms: { tags: keywords } }
]
}
}
}
});
return body.hits.hits.map(hit => hit._source);
}
async function main() {
const userInput = "Create a poster for programming education";
const keywords = await extractKeywords(userInput);
const results = await searchTemplates(keywords);
console.log(results);
}
main().catch(console.error);
Using Open-Source LLMs: ChatGLM-6B
For offline use or budget constraints, open-source models like ChatGLM-6B are viable alternatives. Deployment involves specific steps and potential hardware considerations.
Installation
Follow official guides for local deployment. Common issues include compiler errors and resource limitations. For example, switching from TDM-GCC to MinGW-w64 resolved compilation errors, and closing background applications improved stability.
Usage
ChatGLM-6B can be integrated via provided scripts. Performance on lower-end hardware may be slow, with generation times ranging from minutes to hours, potentially causing timeouts. Adequate GPU resources are recommended for optimal performance.
Conclusion
LLMs can enhance low-code development by generating page definisions from natural language. This approach extends to other domains like design tools (Figma) and specialized AI applications. With proper training and optimization, LLMs become powerful tools for rapid application development.