Integrating ChatGPT with the Columbus Instant Design Platform: Capabilities, Demonstrations, and Implementation Principles

The article introduces the use of ChatGPT within the Columbus Instant Design low‑code platform, describing how a custom ChatGPT interaction DSL, prompts, and functions enable AI‑driven UI creation and improve development efficiency.

1. Platform Overview – The Instant Design platform allows rapid C‑end page construction, supporting UI‑to‑code conversion via imported design URLs, visual front‑end building, and one‑sentence ChatGPT requests that automatically generate and publish floors to the iHub market.

1.1 Platform Capabilities

1. Canvas editing (add, delete, copy, layer adjustments). 2. Style configuration (fonts, colors, sizes, borders). 3. Data interface binding for dynamic content. 4. Interaction event configuration (click, swipe, pop‑ups). 5. Preview and code download.

2. ChatGPT x Instant Design Use Cases – Demonstrations show AI‑generated floor creation (e.g., a product showcase with images, titles, and prices) and subsequent modifications (changing text, colors, font sizes) driven by natural‑language prompts.

2.1 Workflow – User description → server request or schema retrieval → prompt composition → multiple OpenAI calls → GPT returns DSL → front‑end renders DSL.

3. Implementation Principles

3.1 Smart Q&A Assistant

Vectorization uses an internal vector store for document retrieval; streaming handles OpenAI responses line‑by‑line:

res.body.on('data', data => {
  const lines = data.toString().split('\n').filter(line => line.trim() !== '');
  for (const line of lines) {
    const message = line.replace(/^data: /, '');
    if (message === '[DONE]') { stream.end(); return; }
    try {
      const parsed = JSON.parse(message);
      if (parsed.choices[0].finish_reason !== 'stop') {
        stream.write(parsed.choices[0].delta.content);
      }
    } catch (error) {}
  }
});

3.2 Smart Creation & Modification – AI generates DSL for floor creation/modification, which the front‑end parses to render the UI.

3.3 GPT Prompt & Core Implementation – The system abstracts platform capabilities into a DSL; ChatGPT interacts via prompts and function calls to produce executable DSL.

4. Future Planning

Current issues include token consumption in multi‑turn conversations; the article proposes using the tiktoken library (or the community dpbd/tiktoken ) and a custom wrapper @mfe/get-gpt-tokens to accurately calculate token usage.

Additional GPT prompts for task automation are provided as images.

5. Summary – The AI integration approach abstracts platform abilities into a DSL, enabling ChatGPT to understand and execute design tasks through prompts and functions, thereby streamlining low‑code UI development.