A React chat component for Dify multi-agent conversations.
npm install @drvv/dify-multiagent-chatA React chat component for Dify multi-agent conversations with real-time streaming support.
- 🤖 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
``bash`
npm install @drvv/dify-multiagent-chat
`tsx
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 (
title="Multi-Agent Chat"
className="my-chat-component"
/>
);
}
`
| Property | Type | Required | Description |
|----------|------|----------|-------------|
| apiKey | string | ✅ | Your Dify API key |endpoint
| | string | ✅ | Dify API endpoint URL |user
| | string | ❌ | User identifier for conversation tracking |
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| config | DifyConfig | - | Dify configuration object |className
| | string | '' | Additional CSS classes |title
| | string | 'Dify Chat' | Chat window title |
`tsx
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 (
$3
`tsx
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 (
config={config}
title="AI Assistant"
className="custom-chat-styles"
/>
);
}
`$3
`tsx
import { DifyMultiagentChat, useChatStore } from '@drvv/dify-multiagent-chat';function ChatWithControls() {
const { messages, clearMessages } = useChatStore();
return (
Messages: {messages.length}
);
}
`API Reference
$3
-
DifyMultiagentChat - Main chat component
- useChatStore - Zustand store hook for chat state management$3
-
DifyMultiagentChatProps - Component props interface
- DifyConfig - Configuration object interface
- DifySSEEvent` - Server-sent event data structure- React 16.8+
- TypeScript 4.5+ (for TypeScript projects)
MIT © drvv
Issues and pull requests are welcome on GitHub.