@ezijing/ai-react

@ezijing/ai-react 提供基于 @ezijing/ai-core client 的 React hooks。

安装

npm install @ezijing/ai-react

准备 Client

import { createClient, createDeepSeekProvider, createQianfanProvider, createVolcengineProvider } from '@ezijing/ai-react'

export const qianfan = createQianfanProvider({ apiKey: 'your-qianfan-key' })

export const client = createClient({
  providers: {
    deepseek: createDeepSeekProvider({ apiKey: 'your-deepseek-key' }),
    volcengine: createVolcengineProvider({ apiKey: 'your-volcengine-key' }),
    qianfan,
  },
})

useChat

import { useState } from 'react'
import { useChat } from '@ezijing/ai-react'
import { client, qianfan } from './client'

export function ChatDemo() {
  const [prompt, setPrompt] = useState('')
  const {
    modelList,
    modelValue,
    setModelValue,
    messages,
    result,
    reasoning,
    status,
    error,
    isLoading,
    usage,
    generateText,
    streamText,
    cancel,
  } = useChat({ client })

  return (
    <div>
      <select value={modelValue} onChange={(event) => setModelValue(event.target.value)}>
        {modelList.map((model) => (
          <option key={model.value} value={model.value}>
            {model.label}
          </option>
        ))}
      </select>

      <input value={prompt} onChange={(event) => setPrompt(event.target.value)} />

      <button disabled={isLoading} onClick={() => generateText({ prompt })}>
        非流式发送
      </button>

      <button disabled={isLoading} onClick={() => streamText({ prompt, search: true })}>
        流式发送
      </button>

      <button disabled={!isLoading} onClick={cancel}>
        取消
      </button>

      <div>status: {status}</div>
      <div>error: {error}</div>
      <div>result: {result}</div>
      <div>reasoning: {reasoning}</div>
      <div>usage: {JSON.stringify(usage)}</div>

      {messages.map((message) => (
        <div key={message.id}>
          <strong>{message.role}:</strong>
          {message.reasoning ? (
            <div>
              <div>reasoning:</div>
              <pre>{message.reasoning}</pre>
            </div>
          ) : null}
          <div>{message.content}</div>
        </div>
      ))}
    </div>
  )
}

useChat() 返回：

• modelList
• modelValue
• setModelValue
• messages
• result
• reasoning
• status
• error
• isLoading
• usage
• generateText()
• streamText()
• cancel()

如果页面上有“联网搜索”开关，直接把开关值传进去：

await generateText({ prompt, search: searchEnabled })
await streamText({ prompt, search: searchEnabled })

search: true 时，useChat 会直接走已注册的 qianfan 搜索实现。

useImage

import { useImage } from '@ezijing/ai-react'
import { client } from './client'

export function ImageDemo() {
  const { modelList, modelValue, setModelValue, images, usage, isLoading, error, generateImage, cancel } = useImage({ client })

  return (
    <div>
      <select value={modelValue} onChange={(event) => setModelValue(event.target.value)}>
        {modelList.map((model) => (
          <option key={model.value} value={model.value}>
            {model.label}
          </option>
        ))}
      </select>

      <button disabled={isLoading} onClick={() => generateImage({ prompt: '一只可爱的小猫' })}>
        生成图片
      </button>

      <button disabled={!isLoading} onClick={cancel}>
        取消
      </button>

      <div>{error}</div>
      <div>{JSON.stringify(usage)}</div>

      {images.map((image) => (
        <figure key={image.url}>
          <img src={image.url} alt={image.size || ''} />
          <figcaption>{image.size}</figcaption>
        </figure>
      ))}
    </div>
  )
}

useVideo

import { useVideo } from '@ezijing/ai-react'
import { client } from './client'

export function VideoDemo() {
  const {
    modelList,
    modelValue,
    setModelValue,
    streamVideo,
    status,
    result,
    resolution,
    ratio,
    duration,
    usage,
    error,
    isLoading,
    cancel,
  } = useVideo({ client })

  return (
    <div>
      <select value={modelValue} onChange={(event) => setModelValue(event.target.value)}>
        {modelList.map((model) => (
          <option key={model.value} value={model.value}>
            {model.label}
          </option>
        ))}
      </select>

      <button disabled={isLoading} onClick={() => streamVideo({ prompt: '生成一段小猫奔跑的视频' })}>
        生成视频
      </button>

      <button disabled={!isLoading} onClick={cancel}>
        取消
      </button>

      <div>status: {status}</div>
      <div>resolution: {resolution}</div>
      <div>ratio: {ratio}</div>
      <div>duration: {duration}</div>
      <div>usage: {JSON.stringify(usage)}</div>
      <div>error: {error}</div>
      {result ? <video src={result} controls /> : null}
    </div>
  )
}

说明

• hooks 不再自己创建 provider
• hooks 只接收 client
• 模型列表来自 client.getModels()
• 文本流式能力基于 client.streamText()
• 视频能力基于 client.streamVideo()
• @ezijing/ai-react 会重新导出 @ezijing/ai-core 的 API，不需要额外安装 @ezijing/ai-core