@drvv/dify-multiagent-chat

A React chat component for Dify multi-agent conversations with real-time streaming support.

Features

• 🤖 Multi-agent Support - Handle conversations with multiple Dify agents
• 🔄 Real-time Streaming - Server-sent events for live conversation updates
• ⚡ TypeScript Support - Full TypeScript definitions included
• 🎨 Customizable UI - Easy styling and theming options
• 📱 Responsive Design - Works seamlessly across devices
• 🔌 Simple Integration - Drop-in component for React applications

Installation

npm install @drvv/dify-multiagent-chat

Quick Start

import { DifyMultiagentChat } from '@drvv/dify-multiagent-chat';

function App() {
  const config = {
    apiKey: 'your-dify-api-key',
    endpoint: 'https://your-dify-instance.com/v1',
    user: 'user-identifier' // optional
  };

  return (
    <DifyMultiagentChat
      config={config}
      title="Multi-Agent Chat"
      className="my-chat-component"
    />
  );
}

Configuration

DifyConfig

| Property | Type | Required | Description | |----------|------|----------|-------------| | apiKey | string | ✅ | Your Dify API key | | endpoint | string | ✅ | Dify API endpoint URL | | user | string | ❌ | User identifier for conversation tracking |

DifyMultiagentChatProps

| Property | Type | Default | Description | |----------|------|---------|-------------| | config | DifyConfig | - | Dify configuration object | | className | string | '' | Additional CSS classes | | title | string | 'Dify Chat' | Chat window title |

Usage Examples

Basic Usage

import { DifyMultiagentChat } from '@drvv/dify-multiagent-chat';

const config = {
  apiKey: process.env.NEXT_PUBLIC_DIFY_API_KEY,
  endpoint: 'https://api.dify.ai/v1'
};

export default function ChatPage() {
  return (
    <div style={{ height: '600px', width: '400px' }}>
      <DifyMultiagentChat config={config} />
    </div>
  );
}

With Custom Styling

import { DifyMultiagentChat } from '@drvv/dify-multiagent-chat';

const config = {
  apiKey: 'your-api-key',
  endpoint: 'https://your-dify-instance.com/v1',
  user: 'john-doe'
};

export default function CustomChat() {
  return (
    <DifyMultiagentChat
      config={config}
      title="AI Assistant"
      className="custom-chat-styles"
    />
  );
}

Advanced State Management

import { DifyMultiagentChat, useChatStore } from '@drvv/dify-multiagent-chat';

function ChatWithControls() {
  const { messages, clearMessages } = useChatStore();

  return (
    <div>
      <button onClick={clearMessages}>Clear Chat</button>
      <DifyMultiagentChat config={config} />
      <div>Messages: {messages.length}</div>
    </div>
  );
}

API Reference

Exported Components

• DifyMultiagentChat - Main chat component
• useChatStore - Zustand store hook for chat state management

Types

• DifyMultiagentChatProps - Component props interface
• DifyConfig - Configuration object interface
• DifySSEEvent - Server-sent event data structure

Requirements

• React 16.8+
• TypeScript 4.5+ (for TypeScript projects)

License

MIT © drvv

Contributing

Issues and pull requests are welcome on GitHub.