Skip to main content

AI Page Generation

Using Hops' AI page generation, you can quickly create the backoffice pages you want just by describing them in natural language. The AI understands user descriptions and creates complete pages by combining appropriate components and workflows.

Getting Started​

Click the AI Page Generation button in the page list to go to the AI page generation.

Chatting with AI​

There are two ways to start AI page generation:

  1. Direct description input: Freely describe the page you want to create. You can select the data source for page generation.
    • Example: "Please create an admin page where I can view and modify customer information"
  2. Using Quick Question buttons
    • Select one of the pre-prepared questions
    • Available quick questions:
      • "Customer & Order History Management"
      • "Order Data Dashboard"
      • "Product Detail Management"

Page Generation Screen Layout​

The AI page generation pages consists of three main areas:

1. Left: Section Selector​

  • Add and change sections.

2. Center: Page Preview​

  • See the AI-generated page in real-time
  • Changes from section selection or AI chat are reflected immediately
  • Change the order of sections

3. Right: AI Chat Area​

  • Modify and improve the page through conversation with AI
  • The AI provides:
    • Page generation progress status
    • Explanations of generated components and workflows
    • Page feature suggestions and additional requests
    • Answers to user questions

Page Generation Process​

  1. Enter backoffice page description

    • Enter a description or select a quick question
    • AI analyzes the description and generates basic page structure

  2. Interactive improvements

    • Fine-tune the page through conversation with AI
    • Describe needed features and AI suggests and adds optimal UI
    • All changes are visible in real-time in the center preview area

  3. Add and modify sections

    • Directly add or modify sections through the section selector
    • When you select a section, AI generates data to display the most appropriate information
    • All changes are visible in real-time in the center preview area

  4. Complete generation

    • Click 'Complete Generation' in top right and AI will:
      1. Create necessary workflows.
      2. Optimize workflow and section integration
      3. Generate final page and prepare for deployment

Using Generated Pages​

Generated pages can be used in the following ways:

  • Deploy immediately
  • Additional modifications in page editor
  • Use as template for other pages

Having difficulty generating pages or need additional features? Email (contact@hopsoffice.com) for remote support assistance.