# Where to Find Core Abstractions and React Hooks in Dify Chat

> Discover where Dify Chat centralizes core abstractions and React hooks in the packages/core workspace. Find domain types in src/repository/app/ and reusable hooks in src/hooks/.

- Repository: [lexmin0412/dify-chat](https://github.com/lexmin0412/dify-chat)
- Tags: internals
- Published: 2026-03-06

---

**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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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:

```tsx
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:

```tsx
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`](https://github.com/lexmin0412/dify-chat/blob/main/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:

```tsx
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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/hooks/use-auth.ts) exports a **`useAuth`** hook for managing user authentication flows.

```tsx
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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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.