useXAgent 模型调度

用于模型调度的 Agent 钩子。

何时使用

与后端模型进行交互，提供抽象数据流。

代码演示

预设请求

我们将 XRequest 作为预设请求，仅需配置 baseURL、model 即可

Agent Request Log

Status-

Update Times0

<script setup lang="tsx">
import { LoadingOutlined, TagsOutlined } from '@ant-design/icons-vue';
import { Button, Descriptions, Flex } from 'ant-design-vue';
import { ThoughtChain, useXAgent, type ThoughtChainItem } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXUseXAgentPreset' });

/**
 * 🔔 Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.
 */
const BASE_URL = 'https://api.example.com';
const PATH = '/chat';
const MODEL = 'gpt-3.5-turbo';
/** 🔥🔥 Its dangerously! */
// const API_KEY = '';

interface YourMessageType {
  role: string;
  content: string;
}

const status = ref<ThoughtChainItem['status']>();
const lines = ref<Record<string, string>[]>([]);

const { agent } = useXAgent<YourMessageType>({
  baseURL: BASE_URL + PATH,
  model: MODEL,
  // dangerouslyApiKey: API_KEY
});

async function request() {
  status.value = 'pending';

  agent.value.request(
    {
      messages: [{ role: 'user', content: 'hello, who are u?' }],
      stream: true,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success';
        console.log('onSuccess', messages);
      },
      onError: (error) => {
        status.value = 'error';
        console.error('onError', error);
      },
      onUpdate: (msg) => {
        // @ts-expect-error
        lines.value = [...lines.value, msg];
        console.log('onUpdate', msg);
      },
    },
  );
}

defineRender(() => {
  return (
    <Flex align="start" gap={16} style={{ overflow: 'auto' }}>
      <div>
        <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
          Agent Request
        </Button>
      </div>
      <div>
        <ThoughtChain
          style={{ marginLeft: 16 }}
          items={[
            {
              title: 'Agent Request Log',
              status: status.value,
              icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
              description:
                status.value === 'error' &&
                agent.value.config.baseURL === BASE_URL + PATH &&
                'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
              content: (
                <Descriptions column={1}>
                  <Descriptions.Item label="Status">{status.value || '-'}</Descriptions.Item>
                  <Descriptions.Item label="Update Times">{lines.value.length}</Descriptions.Item>
                </Descriptions>
              ),
            },
          ]}
        />
      </div>
    </Flex>
  )
});
</script>

隐藏源代码

自定义请求

通过定制能力，返回多个推荐内容。

Question

<script setup lang="tsx">
import { Button, Divider, Form, Input, Typography } from 'ant-design-vue';
import { useXAgent } from 'ant-design-x-vue';
import { reactive, ref } from 'vue';

defineOptions({ name: 'AXUseXAgentCustom' });

const lines = ref<string[]>([]);

const modelRef = reactive({
  question: '',
});

Form.useForm(modelRef);

const log = (text: string) => {
  lines.value = [...lines.value, text];
};

const { agent } = useXAgent({
  request: ({ message }, { onUpdate, onSuccess }) => {
    let times = 0;

    const id = setInterval(() => {
      times += 1;
      onUpdate(`Thinking...(${times}/3)`);

      if (times >= 3) {
        onSuccess(`It's funny that you ask: ${message}`);
        clearInterval(id);
      }
    }, 500);
  },
});

const onFinish = ({ question }: { question: string }) => {
  log(`[You] Ask: ${question}`);
  agent.value.request(
    { message: question },
    {
      onUpdate: (message) => {
        log(`[Agent] Update: ${message}`);
      },
      onSuccess: (message) => {
        log(`[Agent] Answer: ${message}`);
        modelRef.question = ''
      },
      // Current demo not use error
      onError: () => { },
    },
  );
};

defineRender(() => {
  return (
    <>
      <Form
        model={modelRef}
        layout="vertical"
        onFinish={onFinish}
        // @ts-expect-error
        autoComplete="off"
      >
        <Form.Item label="Question" name="question">
          <Input v-model:value={modelRef.question} />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" type="primary" loading={agent.value.isRequesting()}>
            submit
          </Button>
        </Form.Item>
      </Form>

      <Divider />

      <Typography>
        <ul style={{ listStyle: 'circle', paddingLeft: 0 }}>
          {lines.value.map((line, index) => (
            <li key={index}>{line}</li>
          ))}
        </ul>
      </Typography>
    </>
  )
});
</script>

隐藏源代码

API

type useXAgent<AgentMessage> = (
  config: XAgentConfigPreset | XAgentConfigCustom<AgentMessage>,
) => {Agent};

XAgentConfigPreset

使用预设协议进行请求，尚未实现协议。

属性	说明	类型	默认值	版本
baseURL	请求服务端地址	string	-
key	请求秘钥	string	-
model	协议模型	string	-
dangerouslyApiKey	注意: 🔥 dangerouslyApiKey 存在安全风险，对此有详细的说明。	string	-	-

XAgentConfigCustom

自定义请求协议。

属性	说明	类型	默认值	版本
request	配置自定义请求，支持流式更新	RequestFn

RequestFn

interface RequestFnInfo<Message> extends Partial<XAgentConfigPreset>, AnyObject {
  messages?: Message[];
  message?: Message;
}

export type RequestFn<Message> = (
  info: RequestFnInfo<Message>,
  callbacks: {
    onUpdate: (message: Message) => void;
    onSuccess: (message: Message) => void;
    onError: (error: Error) => void;
  },
) => void;

Agent

属性	说明	类型	版本
request	调用 useXAgent 配置的请求	RequestFn
isRequesting	是否正在请求	() => boolean