antdv-next/x/x-chat-provider

graph LR
    A[Original API Interface] -->|Adapt| B[Chat Provider]
    B -->|Provide Data| C[useXChat Hook]
    C -->|Render| D[Antdv Next X UI]
    E[XRequest] -->|Network Request| B

# Auto check and fix version
npm ls @antdv-next/x-sdk
# If version doesn't match, auto prompt:
npm install @antdv-next/x-sdk@latest

graph TD
    A[Start] --> B{Use Standard API?}
    B -->|Yes| C[Use Built-in Provider]
    B -->|No| D{Private API?}
    D -->|Yes| E[Custom Provider]
    D -->|No| F{Special Format?}
    F -->|Yes| E
    F -->|No| C
 
    C --> G[OpenAI/DeepSeek Provider]
    E --> H[Four Steps to Create Custom Provider]

journey
    title Custom Provider Implementation Path
    section Analysis Phase
      Interface Analysis: 2: User
    section Development Phase
      Create Class: 5: User
      Check Validation: 1: User
    section Integration Phase
      Configure Usage: 1: User

// Your actual request format
interface MyAPIRequest {
  query: string; // User question
  context?: string; // Conversation history (optional)
  model?: string; // Model selection (optional)
  stream?: boolean; // Whether streaming (optional)
}

// Streaming response format
// Actual response: data: {"content": "answer content"}
interface MyAPIResponse {
  content: string; // Answer fragment
  finish_reason?: string; // End marker
}
// End marker: data: [DONE]

// MyChatProvider.ts
import { AbstractChatProvider } from "@antdv-next/x-sdk";
// ====== 1st modification: Define your interface types ======
interface MyInput {
  query: string;
  context?: string;
  model?: string;
  stream?: boolean;
}
interface MyOutput {
  content: string;
  finish_reason?: string;
}
interface MyMessage {
  content: string;
  role: "user" | "assistant";
  timestamp: number;
}
// ====== 2nd modification: Modify class name ======
export class MyChatProvider extends AbstractChatProvider<
  MyMessage,
  MyInput,
  MyOutput
> {
  // Parameter conversion: convert useXChat parameters to your API parameters
  transformParams(
    requestParams: Partial<MyInput>,
    options: XRequestOptions<MyInput, MyOutput, MyMessage>,
  ): MyInput {
    if (typeof requestParams !== "object") {
      throw new Error("requestParams must be an object");
    }
    return {
      query: requestParams.query || "",
      context: requestParams.context,
      model: "gpt-3.5-turbo", // Adjust according to your API
      stream: true,
      ...(options?.params || {}),
    };
  }
  // Local message: user sent message format
  transformLocalMessage(requestParams: Partial<MyInput>): MyMessage {
    return {
      content: requestParams.query || "",
      role: "user",
      timestamp: Date.now(),
    };
  }
  // ====== 3rd modification: Response data conversion ======
  transformMessage(info: {
    originMessage: MyMessage;
    chunk: MyOutput;
  }): MyMessage {
    const { originMessage, chunk } = info;
    // Handle end marker
    if (!chunk?.content || chunk.content === "[DONE]") {
      return { ...originMessage, status: "success" as const };
    }
    // Accumulate response content
    return {
      ...originMessage,
      content: `${originMessage.content || ""}${chunk.content || ""}`,
      role: "assistant" as const,
      status: "loading" as const,
    };
  }
}

# Run type check
npx tsc --noEmit MyChatProvider.ts
 
# Expected result: no error output

// 1. Import dependencies
import { MyChatProvider } from "./MyChatProvider";
import { XRequest } from "@antdv-next/x-sdk";
// 2. Configure XRequest (handled by x-request skill)
const request = XRequest("https://your-api.com/chat", {
  // Authentication configuration
  headers: {
    Authorization: "Bearer your-token-here",
    "Content-Type": "application/json",
  },
  // Default parameters
  params: {
    model: "gpt-3.5-turbo",
    max_tokens: 1000,
    temperature: 0.7,
  },
  // Streaming configuration
  manual: true,
});
// 3. Create Provider instance
const provider = new MyChatProvider({
  request, // Must pass XRequest instance
});
// 4. Now can be used with useXChat
// This part is handled by use-x-chat skill
export { provider };