Where to Find Core Abstractions and React Hooks in Dify Chat

The core abstractions and React hooks in Dify Chat are centralized in the packages/core workspace, specifically within src/repository/app/ for domain types and src/hooks/ for reusable React hooks like useDifyChat, useApps, and useConversations.

The lexmin0412/dify-chat repository organizes its domain logic and React integration layer into a dedicated packages/core workspace. This architecture separates core abstractions—such as TypeScript interfaces for Dify apps and repository patterns—from UI-specific implementations, providing a clean API for both single-app and multi-app chat configurations.

Core Abstractions in the packages/core Workspace

Domain Types and Repository Interfaces

The foundational types and repository contracts reside in packages/core/src/repository/app/index.ts. This file defines the IDifyAppItem interface, which represents a Dify application configuration, along with abstract store classes DifyAppStore and DifyAppStoreReadonly. These abstractions enable different storage implementations—such as local storage or remote APIs—while maintaining a consistent interface for the React hooks to consume.

Application Constants and Enums

Shared enumerations and constant values are exported from packages/core/src/constants/app.ts. Key definitions include AppModeEnums for distinguishing between single-app and multi-app modes, and EIsEnabled for toggle states. These constants ensure type safety across the workspace and prevent magic strings from proliferating through the codebase.

React Hooks for Dify Chat Integration

The useDifyChat Hook for Context Management

Located at packages/core/src/hooks/use-dify-chat.ts, the useDifyChat hook provides the primary interface for accessing Dify Chat context within React components. It exposes the current operation mode (singleApp or multiApp), user identification, and either the direct app configuration or a service instance for dynamic app management.

To initialize the chat provider in single-app mode:

import { DifyChatProvider } from '@dify-chat/core';
import { AppConfig, EIsEnabled } from '@dify-chat/core';

function App() {
  const singleAppConfig: AppConfig = {
    requestConfig: { 
      apiBase: 'https://api.dify.ai', 
      apiKey: 'YOUR_KEY' 
    },
    isEnabled: EIsEnabled.enabled,
    answerForm: { enabled: false, feedbackText: '' },
  };

  return (
    <DifyChatProvider value={{ 
      mode: 'singleApp', 
      user: 'alice', 
      appConfig: singleAppConfig 
    }}>
      <ChatInterface />
    </DifyChatProvider>
  );
}

Consuming the context inside a child component:

import { useDifyChat } from '@dify-chat/core';

export function ChatInterface() {
  const { mode, user, appConfig, appService } = useDifyChat();

  return (
    <div>
      <h2>Welcome, {user || 'Guest'}!</h2>
      {mode === 'singleApp' ? (
        <p>Talking to app: {appConfig.requestConfig.apiBase}</p>
      ) : (
        <p>Multi-app mode – load apps via appService.</p>
      )}
    </div>
  );
}

Managing Apps with useApps

For multi-app scenarios, packages/core/src/hooks/use-apps.ts exports the useApps hook. This hook wraps the DifyAppStore abstraction to provide CRUD operations for application management. It returns the current list of apps along with methods to load, add, update, and delete applications.

Example usage in a component:

import { useApps } from '@dify-chat/core';

export function AppsManager() {
  const { apps, loadApps, addApp, updateApp, deleteApp } = useApps();

  React.useEffect(() => {
    loadApps(); // fetches the app list from the configured DifyAppStore
  }, []);

  return (
    <div>
      {apps.map(app => (
        <div key={app.id}>{app.name}</div>
      ))}
    </div>
  );
}

Conversation Handling via useConversations

Message streaming and conversation state management are handled by the useConversations hook in packages/core/src/hooks/use-conversations.ts. This hook manages the lifecycle of chat messages, handles streaming responses from the Dify API, and maintains conversation history. It works in conjunction with the context providers defined in the core package to ensure consistent state across the application.

UI-Specific Hooks in the React App Package

While the core hooks provide domain logic, the packages/react-app workspace contains UI-specific hooks that handle authentication, navigation, and other presentation concerns. For example, packages/react-app/src/hooks/use-auth.ts exports a useAuth hook for managing user authentication flows.

import { useAuth } from '@dify-chat/react-app';

export function Header() {
  const { user, login, logout } = useAuth();

  return (
    <header>
      {user ? (
        <button onClick={logout}>Logout ({user.name})</button>
      ) : (
        <button onClick={login}>Login</button>
      )}
    </header>
  );
}

Additional UI hooks are located in packages/react-app/src/hooks/ and typically compose the core abstractions to provide application-specific functionality.

Summary

• Core abstractions reside in packages/core/src/repository/app/index.ts, defining IDifyAppItem, DifyAppStore, and DifyAppStoreReadonly for type-safe app management.
• Global constants are exported from packages/core/src/constants/app.ts, including AppModeEnums and EIsEnabled for configuration consistency.
• Primary React hooks—useDifyChat, useApps, and useConversations—are located in packages/core/src/hooks/ and provide the main interface for integrating Dify Chat into React applications.
• UI-specific hooks such as useAuth live in packages/react-app/src/hooks/ and handle presentation-layer concerns like authentication and navigation.
• All core exports are available via the package entry point packages/core/src/index.ts, enabling simple imports from @dify-chat/core.

Frequently Asked Questions

Where are the TypeScript interfaces for Dify apps defined?

The primary TypeScript interfaces for Dify applications are defined in packages/core/src/repository/app/index.ts. This file exports the IDifyAppItem interface along with abstract classes DifyAppStore and DifyAppStoreReadonly that define the contract for app storage implementations.

How do I access the chat context in a child component?

Import the useDifyChat hook from @dify-chat/core and call it within your functional component. This hook returns the current mode (singleApp or multiApp), user information, app configuration, and service methods. Ensure your component is wrapped in the DifyChatProvider at a higher level in the tree.

What is the difference between useApps and useDifyChat?

useDifyChat provides the global chat context and configuration, handling the distinction between single-app and multi-app modes at the provider level. In contrast, useApps specifically manages the collection of applications in multi-app scenarios, exposing CRUD operations (loadApps, addApp, updateApp, deleteApp) that interact with the DifyAppStore abstraction.

Are there authentication hooks available in Dify Chat?

Yes, authentication-specific hooks are located in the packages/react-app workspace rather than the core package. The useAuth hook in packages/react-app/src/hooks/use-auth.ts provides methods for login, logout, and accessing the current user object, designed for use in the React application frontend.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}