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>

自定义入参

自定义 RequestParams，可以向智能体等发送消息。

Agent Request Log

Status-

Update Times0

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

defineOptions({ name: 'AXUseXAgentRequestParams' });

const BASE_URL = 'https://api.example.com/agent';

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

const status = ref<ThoughtChainItem['status']>();
const lines = ref<any[]>([]);

const [agent] = useXAgent<YourMessageType>({
  baseURL: BASE_URL,
});

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

  agent.value.request(
    {
      agentId: 1234,
      query: 'Search for the latest technology news',
      stream: true,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success';
        console.log('onSuccess', messages);
      },
      onError: (error) => {
        status.value = 'error';
        console.error('onError', error);
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg];
        console.log('onUpdate', msg);
      },
    },
  );
}

defineRender(() => {
  return (
    <Flex>
      <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
        Agent Request
      </Button>
      <ThoughtChain
        style={{ marginLeft: '16px' }}
        items={[
          {
            title: 'Agent Request Log',
            status: status.value,
            icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
            description:
              status.value === 'error' &&
              agent.value.config.baseURL === BASE_URL &&
              'Please replace the BASE_URL,RequestParams 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>
            ),
          },
        ]}
      />
    </Flex>
  );
});
</script>

自定义请求

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

<script setup lang="tsx">
import { Button, Divider, Form, Input, Typography } from 'ant-design-vue';
import { useXAgent } from 'ant-design-x-vue';
import { reactive, ref, watch } 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: () => { },
    },
  );
};

const requesting = ref(false);

watch(() => agent.value.isRequesting(), () => {
  requesting.value = agent.value.isRequesting();
});

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={requesting.value}>
            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>

模型接入

接入云服务平台，可发送消息、转换流数据、终止消息。

Agent Request Logrequest

Status-

Update Times0

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

defineOptions({ name: 'AXUseXAgentModel' });

const { Paragraph } = Typography;

/**
 * 🔔 Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.
 */

const BASE_URL = 'https://api.x.ant.design/api/llm_siliconflow_deepseekv3';

/**
 * 🔔 The MODEL is fixed in the current request, please replace it with your BASE_UR and MODEL
 */

const MODEL = 'deepseek-ai/DeepSeek-V3';

/**
 * 🔔 the API_KEY is a placeholder indicator interface that has a built-in real API_KEY
 */

const API_KEY = 'Bearer sk-xxxxxxxxxxxxxxxxxxxx';

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

const status = ref<string>('');
const thoughtChainStatus = ref<ThoughtChainItem['status']>();
const lines = ref<any[]>([]);
const abortController = ref<AbortController>(null);
const questionText = ref<string>('hello, who are u?');

const [agent] = useXAgent<YourMessageType>({
  baseURL: BASE_URL,
  model: MODEL,
  dangerouslyApiKey: API_KEY,
  /** 🔥🔥 Its dangerously! */
});

const request = () => {
  lines.value = [];
  thoughtChainStatus.value = 'pending';
  status.value = 'pending';
  agent.value.request(
    {
      messages: [{ role: 'user', content: questionText.value }],
      stream: true,
    },
    {
      onSuccess: () => {
        status.value = 'success';
        thoughtChainStatus.value = 'success';
      },
      onError: (error) => {
        if (error.name === 'AbortError') {
          status.value = 'abort';
        }
        thoughtChainStatus.value = 'error';
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg];
      },
      onStream: (controller) => {
        abortController.value = controller;
      },
    },
    new TransformStream<string, any>({
      transform(chunk, controller) {
        const DEFAULT_KV_SEPARATOR = 'data: ';
        const separatorIndex = chunk.indexOf(DEFAULT_KV_SEPARATOR);
        const value = chunk.slice(separatorIndex + DEFAULT_KV_SEPARATOR.length);
        try {
          const modalMessage = JSON.parse(value);
          const content =
            modalMessage?.choices?.[0].delta?.reasoning_content === null
              ? ''
              : modalMessage?.choices?.[0].delta?.reasoning_content;
          controller.enqueue(content);
        } catch (error) {
          controller.enqueue('');
        }
      },
    }),
  );
};

const abort = () => {
  abortController.value?.abort?.();
};

defineRender(() => {
  return (
    <Flex gap={24}>
      <Flex vertical gap={24} style={{ maxWidth: '60%' }}>
        <Flex gap="large" vertical>
          <Input
            value={questionText.value}
            onChange={(e) => {
              questionText.value = e.target.value;
            }}
          />
          <Flex gap="small">
            <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
              Agent Request
            </Button>
            <Button type="primary" disabled={status.value !== 'pending'} onClick={abort}>
              Agent Abort
            </Button>
          </Flex>
        </Flex>
        <Paragraph>{lines.value.length > 0 && lines.value.join('')}</Paragraph>
      </Flex>
      <ThoughtChain
        style={{ marginLeft: '16px' }}
        items={[
          {
            title: 'Agent Request Log',
            status: thoughtChainStatus.value,
            icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
            description: `request ${status.value}`,
            content: (
              <Descriptions column={1}>
                <Descriptions.Item label="Status">{status.value || '-'}</Descriptions.Item>
                <Descriptions.Item label="Update Times">{lines.value.length}</Descriptions.Item>
              </Descriptions>
            ),
          },
        ]}
      />
    </Flex>
  );
});
</script>

API

tsx

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

XAgentConfigPreset

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

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

XAgentConfigCustom

自定义请求协议。

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

RequestFn

tsx

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;
    onStream?: (abortController: AbortController) => void;
  },
  transformStream?: XStreamOptions<Message>['transformStream'],
) => void;

Agent

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

useXAgent 模型调度 ​

何时使用 ​

代码演示 ​

预设请求 ​

自定义入参 ​

自定义请求 ​

模型接入 ​

API ​

XAgentConfigPreset ​

XAgentConfigCustom ​

RequestFn ​

Agent ​

useXAgent 模型调度

何时使用

代码演示

预设请求

自定义入参

自定义请求

模型接入

API

XAgentConfigPreset

XAgentConfigCustom

RequestFn

Agent