Implementing AI Code Review Features in the AI Hub Client (Lesson 21)

Overview

The article continues a series on building an AI‑assisted code review tool. It shows how to integrate the AI Hub client with an existing TypeScript command‑line code review program, turning it into an interactive UI.

Adding Core Logic

A core folder is created inside ai-codereview to hold the main AI code review logic. The existing TypeScript source files are copied into this folder.

<!-- core folder structure illustration -->

Integrating UI Button

In CodeReview.vue, an a-button is added with a click handler doStartExecuteCodeReview(). The button label reads “开始AI代码评审”.

<a-space direction="horizontal" :size="10" fill>
  <a-button type="primary" class="no-drag-area" size="small" @click="doStartExecuteCodeReview()">
    <a-space :size="5">
      <icon-plus />
      <span>开始AI代码评审</span>
    </a-space>
  </a-button>
</a-space>

Loading State Optimization

A boolean isLoading is introduced in the component’s data. Before invoking the AI review, data.isLoading = true is set; after completion or error, it is reset to false. The button’s :loading attribute is bound to data.isLoading to prevent duplicate clicks.

// before execution
data.isLoading = true;
codereviewTool(codeRequest).then(() => {
  data.isLoading = false;
  Message.info('执行完成了,当前成功执行完');
}).catch(() => {
  data.isLoading = false;
  Message.error('失败回调');
});

MergeRequest Preview Feature

A preview area is added to the left side of the UI. A new button triggers doGitlabMerge(), which builds a codeRequest object from the settings store and calls gitlabMergeTool to fetch MR data.

const doGitlabMerge = () => {
  const codeRequest = {
    gitlabUrl: codeReviewSettingStore.gitlabUrl,
    gitlabToken: codeReviewSettingStore.gitlabToken,
    modelUrl: codeReviewSettingStore.modelUrl,
    modelKey: codeReviewSettingStore.modelKey,
    projectId: data.projectId,
    mergeRequestId: data.mergeRequestId,
    modelName: data.modelName,
    feishuWebhook: codeReviewSettingStore.feishuWebhook,
    extConfig: {}
  };
  gitlabMergeTool(codeRequest).then(result => {
    data['previewText'] = result;
    Message.success('获取MR数据成功');
  });
};

The gitlabMergeTool validates required fields, constructs a Gitlab client, calls getMergeRequestData(), and returns the JSON stringified result.

export const gitlabMergeTool = async function run(codeRequest) {
  if (!codeRequest.gitlabUrl || !codeRequest.gitlabToken || !codeRequest.projectId || !codeRequest.mergeRequestId) {
    Message.error('Gitlab URL或Gitlab Token令牌信息未配置');
    return;
  }
  const data = {
    gitlabApiUrl: codeRequest.gitlabUrl,
    gitlabAccessToken: codeRequest.gitlabToken,
    projectId: codeRequest.projectId,
    mergeRequestId: codeRequest.mergeRequestId
  };
  const gitlab = new Gitlab(data);
  const mergeData = await gitlab.getMergeRequestData().catch(() => {
    Message.error('get merge request data error');
  });
  return JSON.stringify(mergeData, null, 2);
};

Result

After these integrations, clicking the “开始AI代码评审” button runs the AI review with parameters from the UI, shows loading feedback, and displays MR preview data when requested. Screenshots in the original article illustrate the UI before and after each step.