​
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

​
Dependencies

This library requires the following peer dependencies: 
{
  "react": ">=16.9.0",
  "react-dom": ">=16.9.0"
}
These should be automatically installed with most React applications, but you can install them manually if needed: 
npm install react react-dom

​
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

Here’s the minimal setup to get a chat interface running:
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
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"
        authorization="Bearer your-token"
        enableStreamingMode={true} // Enable real-time streaming
        placeholder="Type your message..."
      />
    </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';

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"
        >
          <ChatInterface
            projectId="your-project-id"
            aiConfigId="your-ai-config-id"
            authorization="Bearer your-token"
            enableStreamingMode={true}
            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
required
Authorization header value, typically a Bearer token for authentication.
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

​
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