Skip to main content

​
Installation & Quick Start

Get up and running with @termix-it/react-tool in just a few minutes.

​
Prerequisites

Before installing the library, make sure you have:
  • React 16.9.0 or later
  • Node.js 14 or later
  • A Termix project with AI configuration set up

​
Installation

Install the library using your preferred package manager: 
npm install @termix-it/react-tool
After installation, you’ll have access to:
  • ✅ ChatInterface component with AI chat capabilities
  • ✅ ChatWidget component for floating chat button
  • ✅ Built-in styles (no separate CSS import needed)
  • ✅ Built-in UI components (Lucide icons, Markdown rendering)
  • ✅ TypeScript support with full type definitions
  • ✅ Automatic knowledge base integration
  • ✅ Function calling (REST APIs & smart contracts)
  • ✅ Real-time streaming support
  • ✅ Tree-shaking optimized (only bundles what you use)

​
Peer Dependencies

This library requires the following peer dependencies to be installed in your project: 
npm install react react-dom ethers
Required peer dependencies: 
{
  "react": ">=16.9.0",
  "react-dom": ">=16.9.0",
  "ethers": "^5.7.0 || ^6.15.0"
}
UI dependencies (lucide-react, react-markdown, remark-breaks, remark-gfm) are now bundled with the library and support tree-shaking to minimize bundle size. Only the icons and markdown features you use will be included in your final build.

​
Ethers.js Version Compatibility

This library supports both ethers v5 and ethers v6 through an internal compatibility layer. You can use either version in your project:
  • ethers v5: npm install ethers@^5.7.0
  • ethers v6: npm install ethers@^6.15.0
The library will automatically detect which version you have installed and adapt accordingly. All Web3-related functionality (smart contract calls, wallet connections, etc.) works seamlessly with both versions.
Recommendation: We recommend using ethers v6 for new projects as it offers better performance and improved TypeScript support. However, if your project already uses ethers v5, you don’t need to upgrade - this library will work perfectly with your existing setup.

​
Styles

Styles are now automatically bundled with the components - no separate CSS import needed! All styles are scoped with .termix- prefix to prevent conflicts.
If you’re already using Tailwind CSS in your project, the bundled styles won’t conflict with your existing styles due to the .termix- prefix scoping.

​
Basic Setup

​
Minimal Setup

The absolute minimum code needed to get started:
App.tsx
import { ChatInterface } from '@termix-it/react-tool';

function App() {
  return (
    <ChatInterface
      projectId="your-project-id"
      aiConfigId="your-ai-config-id"
    />
  );
}

export default App;

​
Basic Usage with Common Options

Here’s a more complete setup with commonly used options:
App.tsx
import { ChatInterface } from '@termix-it/react-tool';
// No need to import CSS - styles are now bundled with components

function App() {
  return (
    <div className="h-screen">
      <ChatInterface
        // Required props
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"

        // Authentication (optional but recommended)
        authorization="Bearer your-jwt-token"

        // Common options
        enableStreamingMode={true} // Enable real-time streaming
        showHeader={false} // Set to true to show chat header
        placeholder="Type your message..."

        // Optional callbacks
        onMessageSent={(message) => console.log('Sent:', message)}
        onResponseReceived={(message) => console.log('Received:', message)}
        onError={(error) => console.error('Error:', error)}
      />
    </div>
  );
}

export default App;

​
Alternative Setups

​
ChatWidget for Floating Interface

For a non-intrusive floating chat widget, use the ChatWidget component:
FloatingChat.tsx
import { ChatWidget, ChatInterface } from '@termix-it/react-tool';
// No need to import CSS - styles are now bundled with components

function App() {
  return (
    <div className="relative h-screen">
      {/* Your main application content */}
      <div>Your application content here</div>

      {/* Floating chat widget - positioned bottom right */}
      <div className="fixed bottom-6 right-6">
        <ChatWidget
          title="AI Assistant" // Dialog header title
          defaultOpen={false} // Start closed
          onOpenChange={(open) => console.log('Widget open:', open)}
        >
          <ChatInterface
            // Required props
            projectId="your-project-id"
            aiConfigId="your-ai-config-id"

            // Authentication
            authorization="Bearer your-token"

            // Features
            enableStreamingMode={true}
            showHeader={false} // Widget has its own header

            // Style
            className="h-full"
          />
        </ChatWidget>
      </div>
    </div>
  );
}

export default App;

​
Streaming Mode Setup

Enable real-time streaming responses for a more dynamic experience:
StreamingChat.tsx
import { ChatInterface } from '@termix-it/react-tool';

function StreamingApp() {
  return (
    <div className="h-screen">
      <ChatInterface
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"
        authorization="Bearer your-token"
        enableStreamingMode={true} // Real-time character-by-character display
        placeholder="Ask me anything..."
      />
    </div>
  );
}

export default StreamingApp;

​
Configuration Parameters

You’ll need these essential parameters to get started:
​
projectId
string
required
Your Termix project identifier. You can find this in your Termix dashboard.
​
aiConfigId
string
required
AI configuration identifier that defines the model and behavior settings.
​
authorization
string
Authorization header value, typically a Bearer token for authentication (optional but recommended).
Streaming Mode Requirements: If you enable enableStreamingMode={true}, your proxy endpoint must support Server-Sent Events (SSE). See the Streaming Mode guide for detailed implementation instructions.

​
Testing Your Setup

Once you have the basic setup complete, you should see:
  1. Chat interface rendered on your page
  2. Welcome message displayed in the chat
  3. Input field ready for user messages
  4. Send button to submit messages
Try sending a test message to verify the connection is working properly.

​
Testing Streaming Mode

If you enabled streaming mode, you should see:
  • Characters appearing one by one as the AI responds
  • No loading spinner during responses
  • Real-time typing effect

​
Common Issues

Styles are now bundled with components. If you experience issues, check for CSS conflicts with your global styles.
The SDK connects to https://dashboard.termix.ai by default. Verify your authorization token is valid.
Check that your authorization token is valid and properly formatted (usually Bearer your-token).
If using TypeScript, make sure you have the latest version of the library installed, which includes comprehensive type definitions.

​
Next Steps

Now that you have the basic setup working, you can:

Explore Configuration

Learn about all available props and customization options

ChatWidget Component

Create floating chat widgets for customer support and help functionality

Streaming Mode

Enable real-time streaming responses with Server-Sent Events

Advanced Features

Set up function calling, smart contracts, and knowledge base integration

TypeScript Guide

Learn about type definitions and TypeScript-specific features