NLX | Developers

Touchpoint UI provides a powerful, flexible conversation interface that connects your application with your NLX conversational applications. Understanding the fundamental architecture and data flow will help you build more advanced implementations.

Architecture

1flowchart TD
2    %% Client Components
3    USER((User))
4    TOUCHPOINT_UI["Touchpoint UI<br>(Frontend Interface)"]:::uiLayer
5    CONVERSATION_HANDLER["ConversationHandler<br>(Communication Interface)"]:::commLayer
6    CHAT_CORE["Chat Core<br>(State & API Management)"]:::commLayer
7
8    %% Server Components
9    API["API"]
10    NLX_BACKEND["NLX Backend<br>(Processing Engine)"]:::backendLayer
11    NLX_APPLICATION_FLOW["NLX Flow"]:::backendLayer
12
13    %% Core Data Flow
14    USER -->|Interacts with| TOUCHPOINT_UI
15    TOUCHPOINT_UI -->|Passes events to| CONVERSATION_HANDLER
16    CONVERSATION_HANDLER -->|Forwards requests to| CHAT_CORE
17    CHAT_CORE -->|Makes API calls to| API
18    API -->|Processes requests in| NLX_BACKEND
19    NLX_BACKEND -->|Uses configuration from| NLX_APPLICATION_FLOW
20
21    %% Return Path
22    NLX_BACKEND -->|Sends responses to| API
23    API -->|Returns data to| CHAT_CORE
24    CHAT_CORE -->|Updates state in| CONVERSATION_HANDLER
25    CONVERSATION_HANDLER -->|Triggers updates in| TOUCHPOINT_UI
26    TOUCHPOINT_UI -->|Displays to| USER
27
28    %% Modality Flow
29    MODALITY_DEF["Modality Definitions"]:::modalityPath
30    MODALITY_RENDER["Custom Components"]:::modalityPath
31
32    NLX_APPLICATION_FLOW -->|Defines modalities at| MODALITY_DEF
33    MODALITY_DEF -.->|Sends payloads to| CHAT_CORE
34    CHAT_CORE -.->|Passes modality data to| CONVERSATION_HANDLER
35    CONVERSATION_HANDLER -.->|Activates| MODALITY_RENDER
36    MODALITY_RENDER -.->|Rendered in| TOUCHPOINT_UI
37
38    linkStyle 10,11,12,13 stroke:#ff6b00,stroke-width:2px,stroke-dasharray:5 3

Core Components

Component	Role	Responsibility
Touchpoint UI	Frontend interface	Renders the chat window, messages, input fields, and custom components
Chat Core	Communication layer	Manages conversation state and handles API communication
NLX	Configuration environment	Where you design flows, intents, slots, and define modalities

Key Concepts

Custom Components

Custom Components and Modalities connect your applications with custom UI components in Touchpoint:

1// In Touchpoint initialization:
2const touchpoint = await create({
3  // Other config options...
4  customModalities: {
5    ProductCard: ProductCardComponent,
6    DateSelector: DatePickerComponent,
7  },
8});

When NLX sends a modality payload, Touchpoint automatically renders your custom component, passing:

data: The modality payload from NLX
conversationHandler: Interface to continue the conversation

See the Custom Components Guide to get started

The ConversationHandler

This object (touchpoint.conversationHandler) is your interface for programmatic interaction:

1// Get the conversation handler from your touchpoint instance
2const { conversationHandler } = touchpoint;
3
4// Send a text message
5conversationHandler.sendText("Hello");
6
7// Send a choice selection
8conversationHandler.sendChoice("option_123");
9
10// Send structured data (like form submissions)
11conversationHandler.sendStructured({
12  choiceId: "submit_form",
13  slots: { name: "John", email: "john@example.com" },
14});
15
16// Trigger specific intents
17conversationHandler.sendIntent("CheckOrderStatus", { orderId: "12345" });
18
19// Listen for conversation updates
20conversationHandler.subscribe((allResponses, newResponse) => {
21  // React to new messages, detect specific modalities, etc.
22});

Read more in the Conversation Handler Guide

Implementation Patterns

Pattern 1: Simple Chat Integration

1// Basic implementation with default settings
2const touchpoint = await create({
3  config: {
4    applicationUrl: "YOUR_URL",
5    headers: { "nlx-api-key": "YOUR_KEY" },
6    languageCode: "en-US",
7  },
8});

Pattern 2: Themed Chat with Custom Components

1// Advanced implementation with theming and custom components
2const touchpoint = await create({
3  config: {
4    /* config options */
5  },
6  theme: {
7    accent: "#0073e6",
8    fontFamily: "Inter, sans-serif",
9  },
10  customModalities: {
11    ProductSelector: ProductSelectorComponent,
12    AppointmentBooker: AppointmentComponent,
13  },
14});

Pattern 3: Programmatic Control

1// Get conversation handler for advanced control
2const { conversationHandler } = touchpoint;
3
4// Listen for specific modalities in responsess
5conversationHandler.subscribe((responses, newResponse) => {
6  if (newResponse?.type === "bot") {
7    const modalities = newResponse.payload.modalities;
8    if (modalities?.OrderConfirmation) {
9      // Take action when order confirmation is received
10      showOrderConfirmation(modalities.OrderConfirmation);
11    }
12  }
13});