借助LLM快速生成组件声明信息

需求

后续我们的组件都会上传到 HxMatrix 平台，然后统一导出组件声明信息给 LLM 进行训练。这里面如何快速通过 Vue 组件代码生成组件声明信息，是我们必须考虑的问题。

数据结构

输入

Vue 组件的代码。

输出

LLM 所需的组件声明信息，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
      "barLine": {
    "id": "barLine",
    "info_private": {
      "name_en": "Bar Line",
      "name_zh": "折线与柱状组合图",
    },
    "parameter": [
      {
        "type": "bar",
        "encoding": {
          "x": {
            "itemType": ["STR", "DATE"],
            "category": "SINGLE"
          },
          "y": {
            "itemType": ["NUMBER"],
            "category": "ARRAY"
          }
        }
      },
      {
        "type": "line",
        "encoding": {
          "x": {
            "itemType": ["DATE"],
            "category": "SINGLE"
          },
          "y": {
            "itemType": ["NUMBER"],
            "category": "ARRAY"
          },
          "z": {
            "itemType": ["STR"],
            "category": "SINGLE",
            "optional": true
          }
        }
      }
    ]
  }
}

流程

生成 Vue 组件声明信息

通过Docgen，用 AST，给每个 Vue 组件生成下面这种格式的声明信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
interface ComponentDoc {
  /**
   * Usual name of the component:
   *  It will take by order of priority
   *  - The contents of the @displayName tag of the component
   *  - The name of the variable containing the component (or the class if class component)
   *  - the name of the file containing the component
   */
  displayName: string;

  /**
   * name of the export containing the component
   * In most cases `default`
   * If you export es6 named components you can find those names here
   */
  exportName: string;

  /**
   * Contents of every line that is not contained in a tag
   * in the code block before your component
   * @see below
   */
  description?: string;
  /**
   * Array of `PropDescriptor` objects describing all props unless ignored via the @ignore tag
   */
  props?: PropDescriptor[];
  /**
   * Array of `MethodDescriptor` objects describing all methods declared public via the @public tag
   */
  methods?: MethodDescriptor[];
  /**
   * Array of `SlotDescriptor` objects describing all slots
   */
  slots?: SlotDescriptor[];
  /**
   * Array of `EventDescriptor` objects describing all event emitted by your components
   */
  events?: EventDescriptor[];
  /**
   * All tags applied to the component
   * @remark only component tags are stored here.
   * Prop, method and event tags are stored with the property they describe
   */
  tags?: { [key: string]: BlockTag[] };
  /**
   * When using SFC components, one can use `<docs>` blocks.
   * This is the content of the current docs block if it was found
   */
  docsBlocks?: string[];
  /**
   * Extra free data that user can set if they need (not used in the current standard)
   */
  [key: string]: any;
}

转换 Vue 组件声明信息到 LLM 所需的格式

通过 LLM，将 Vue 组件声明信息转换为 LLM 所需的格式。

这一步主要是写 Prompt，可以借助资讯组的 Agent-X 或者大模型工坊(模型选择 GPT4o)，构建一个 LLM Workflow，构建完会给我们生成一个 HTTP 服务，然后我们可以通过 HTTP 请求进行调用。