Installation & Quick Start

Prerequisites

Before installing the library, make sure you have:

React
Vue

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:

React
Vue

npm install @termix-it/react-tool

npm install @termix-it/vue-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:

React
Vue

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"
}

npm install vue ethers

Required peer dependencies:

{
  "vue": ">=3.3.0",
  "ethers": "^5.7.0 || ^6.15.0"
}

React
Vue

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.

UI dependencies (lucide-vue-next, marked, dompurify) 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:

React
Vue

App.tsx

import { ChatInterface } from '@termix-it/react-tool';

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

export default App;

App.vue

<script setup lang="ts">
import { ChatInterface } from '@termix-it/vue-tool';
import '@termix-it/vue-tool/style.css'
</script>

<template>
  <ChatInterface
    project-id="your-project-id"
    ai-config-id="your-ai-config-id"
    authorization="your-api-key" 
  />
</template>

Basic Usage with Common Options

Here’s a more complete setup with commonly used options:

React
Vue

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"
        authorization="your-api-key"

        // 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;

App.vue

<script setup lang="ts">
import { ChatInterface } from '@termix-it/vue-tool';
import '@termix-it/vue-tool/style.css'
// No need to import CSS - styles are now bundled with components

const onMessageSent = (message: string) => console.log('Sent:', message);
const onResponseReceived = (message: string) => console.log('Received:', message);
const onError = (error: Error) => console.error('Error:', error);
</script>

<template>
  <div class="h-screen">
    <ChatInterface
      <!-- Required props -->
      project-id="your-project-id"
      ai-config-id="your-ai-config-id"
      authorization="your-api-key"

      <!-- Common options -->
      :enable-streaming-mode="true"
      :show-header="false"
      placeholder="Type your message..."

      <!-- Optional callbacks -->
      @message-sent="onMessageSent"
      @response-received="onResponseReceived"
      @error="onError"
    />
  </div>
</template>

Alternative Setups

ChatWidget for Floating Interface

For a non-intrusive floating chat widget, use the ChatWidget component:

React
Vue

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"
            authorization="your-api-key"

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

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

export default App;

FloatingChat.vue

<script setup lang="ts">
import { ChatWidget, ChatInterface } from '@termix-it/vue-tool';
import '@termix-it/vue-tool/style.css'
// No need to import CSS - styles are now bundled with components

const onOpenChange = (open: boolean) => console.log('Widget open:', open);
</script>

<template>
  <div class="relative h-screen">
    <!-- Your main application content -->
    <div>Your application content here</div>

    <!-- Floating chat widget - positioned bottom right -->
    <div class="fixed bottom-6 right-6">
      <ChatWidget
        title="AI Assistant"
        :default-open="false"
        @open-change="onOpenChange"
      >
        <ChatInterface
          project-id="your-project-id"
          ai-config-id="your-ai-config-id"
          authorization="your-api-key"

          <!-- Features -->
          :enable-streaming-mode="true"
          :show-header="false" // Widget has its own header

          <!-- Style -->
          class="h-full"
        />
      </ChatWidget>
    </div>
  </div>
</template>

Streaming Mode Setup

Enable real-time streaming responses for a more dynamic experience:

React
Vue

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="your-api-key"
        enableStreamingMode={true} // Real-time character-by-character display
        placeholder="Ask me anything..."
      />
    </div>
  );
}

export default StreamingApp;

StreamingChat.vue

<script setup lang="ts">
import { ChatInterface } from '@termix-it/vue-tool';
import '@termix-it/vue-tool/style.css'
</script>

<template>
  <div class="h-screen">
    <ChatInterface
      project-id="your-project-id"
      ai-config-id="your-ai-config-id"
      authorization="your-api-key"
      :enable-streaming-mode="true"
      placeholder="Ask me anything..."
    />
  </div>
</template>

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 (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:

Chat interface rendered on your page
Welcome message displayed in the chat
Input field ready for user messages
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 not loading correctly

React
Vue

Styles are now bundled with components. If you experience issues, check for CSS conflicts with your global styles.

You need to manually import the styles in your main entry file:

import '@termix-it/vue-tool/style.css'

If styles still don’t appear, check for CSS conflicts with your global styles.

API connection errors

The SDK connects to https://dashboard.termix.ai by default. Verify your authorization key is valid.

Authentication failures

Check that your authorization key is valid.

TypeScript errors

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

Getting Started

Advanced Features

Components

Installation & Quick Start

Prerequisites

Installation

Peer Dependencies

Ethers.js Version Compatibility

Styles

Basic Setup

Minimal Setup

Basic Usage with Common Options

Alternative Setups

ChatWidget for Floating Interface

Streaming Mode Setup

Configuration Parameters

Testing Your Setup

Testing Streaming Mode

Common Issues

Next Steps

Explore Configuration

ChatWidget Component

Streaming Mode

Advanced Features

TypeScript Guide

Getting Started

Advanced Features

Components

​Prerequisites

​Installation

​Peer Dependencies

​Ethers.js Version Compatibility

​Styles

​Basic Setup

​Minimal Setup

​Basic Usage with Common Options

​Alternative Setups

​ChatWidget for Floating Interface

​Streaming Mode Setup

​Configuration Parameters

​Testing Your Setup

​Testing Streaming Mode

​Common Issues

​Next Steps

Explore Configuration

ChatWidget Component

Streaming Mode

Advanced Features

TypeScript Guide

Prerequisites

Installation

Peer Dependencies

Ethers.js Version Compatibility

Styles

Basic Setup

Minimal Setup

Basic Usage with Common Options

Alternative Setups

ChatWidget for Floating Interface

Streaming Mode Setup

Configuration Parameters

Testing Your Setup

Testing Streaming Mode

Common Issues

Next Steps