keyring-chatbot-agent-sdk-test

v0.0.4

Published

6 days ago

A React chat widget SDK with floating button and modal

0High
0Medium
0Low

hungduc123

react chat widget sdk chat-widget

Keyring Chatbot Agent SDK

An AI-powered Web3 chatbot SDK for React applications. This SDK provides a floating chat widget with advanced blockchain capabilities including token swaps, NFT management, and AI-powered assistance.

Features

🤖 AI-Powered Assistant - Natural language processing via Moralis Cortex (GPT-4)
💱 Token Swaps - Seamless token swaps powered by deBridge
🖼️ NFT Management - View and send NFTs (ERC721 & ERC1155)
💰 Token Operations - Send tokens, approve spending, wrap/unwrap native tokens
📊 Trending Tokens - Real-time trending token data
🔗 Multi-Chain Support - Ethereum, Optimism, BSC, Polygon, Base, Arbitrum
💬 Beautiful UI - Modern gradient design with responsive chat interface
⚡ Built with Vite - Optimized for performance
🔧 TypeScript Support - Full type definitions included
🎯 Easy Integration - Simple setup with flexible configuration

Installation

npm install keyring-chatbot-agent-sdk

yarn add keyring-chatbot-agent-sdk

Usage

Basic Setup with React

import { ChatWidget, ConnectProvider } from 'keyring-chatbot-agent-sdk';

function App() {
  const account = {
    address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb', // User wallet address
    chainId: 1, // Chain ID (1 = Ethereum mainnet)
  };

  const handleTransaction = async (tx: Transaction) => {
    // Handle transaction signing and submission
    console.log('Transaction:', tx);
    // Return 'success' or 'fail' after processing
    return 'success';
  };

  return (
    <ConnectProvider account={account}>
      <div>
        <h1>My dApp</h1>
        <ChatWidget position="bottom-right" onTransaction={handleTransaction} />
      </div>
    </ConnectProvider>
  );
}

export default App;

Advanced Configuration

import { ChatWidget, ConnectProvider } from 'keyring-chatbot-agent-sdk';

function App() {
  const account = {
    address: userWalletAddress,
    chainId: currentChainId,
  };

  const customTheme = {
    primaryColor: '#5B7FFF',
    buttonSize: 60,
    zIndex: 9999,
  };

  return (
    <ConnectProvider account={account}>
      <ChatWidget
        position="bottom-right"
        theme={customTheme}
        defaultOpen={false}
        onOpen={() => console.log('Chat opened')}
        onClose={() => console.log('Chat closed')}
        onTransaction={handleTransaction}
      />
    </ConnectProvider>
  );
}

Usage with HTML (Web Component)

For applications without React, you can use the Web Component version:

Using CDN (unpkg)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Web3 App</title>
  </head>
  <body>
    <h1>Welcome to My dApp</h1>

    <!-- Import Web Component -->
    <script src="https://unpkg.com/keyring-chatbot-agent-sdk/dist/chat-widget-wc.umd.js"></script>

    <!-- Use custom element -->
    <chat-widget
      position="bottom-right"
      primary-color="#5B7FFF"
      button-size="60"
      z-index="9999"
    ></chat-widget>

    <script>
      // Set account data
      const widget = document.querySelector('chat-widget');
      widget.account = {
        address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
        chainId: 1,
      };

      // Handle transactions
      widget.addEventListener('transaction', async (event) => {
        const tx = event.detail;
        console.log('Transaction:', tx);

        // Process transaction with your wallet provider
        // Return result by setting the result property
        widget.transactionResult = 'success'; // or 'fail'
      });

      // Listen to open/close events
      widget.addEventListener('open', () => console.log('Chat opened'));
      widget.addEventListener('close', () => console.log('Chat closed'));
    </script>
  </body>
</html>

Using Local File

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Web3 App</title>
  </head>
  <body>
    <h1>My dApp</h1>

    <!-- Import from local installation -->
    <script src="./node_modules/keyring-chatbot-agent-sdk/dist/chat-widget-wc.umd.js"></script>

    <chat-widget position="bottom-right"></chat-widget>
  </body>
</html>

Using ES Module Import

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Web3 App</title>
  </head>
  <body>
    <h1>My dApp</h1>

    <chat-widget position="bottom-right"></chat-widget>

    <script type="module">
      import 'https://unpkg.com/keyring-chatbot-agent-sdk/dist/chat-widget-wc.es.js';

      const widget = document.querySelector('chat-widget');
      widget.account = {
        address: userWalletAddress,
        chainId: currentChainId,
      };
    </script>
  </body>
</html>

Web Component Attributes

| Attribute | Type | Default | Description | | --------------- | --------- | ---------------- | ----------------------------------------- | | position | string | 'bottom-right' | Position: 'bottom-right' or 'bottom-left' | | primary-color | string | '#5B7FFF' | Primary color (hex) | | button-size | number | 60 | Button size in pixels | | z-index | number | 9999 | z-index for positioning | | default-open | boolean | false | Whether chat is open by default |

Web Component Properties

const widget = document.querySelector('chat-widget');

// Set account
widget.account = {
  address: '0x...',
  chainId: 1,
};

// Set transaction result (after handling transaction event)
widget.transactionResult = 'success'; // or 'fail'

Web Component Events

const widget = document.querySelector('chat-widget');

// Transaction event
widget.addEventListener('transaction', (event) => {
  const tx = event.detail; // { from, to, data, value, chainId }
  // Handle transaction...
});

// Open/Close events
widget.addEventListener('open', () => console.log('Opened'));
widget.addEventListener('close', () => console.log('Closed'));

Props Reference

ChatWidget Props

| Prop | Type | Default | Description | | --------------- | --------------------------------------------------- | ---------------- | --------------------------------------------------------- | | position | 'bottom-right' | 'bottom-left' | 'bottom-right' | Position of the chat button | | theme | ChatWidgetTheme | Default theme | Custom theme configuration | | defaultOpen | boolean | false | Whether chat is open by default | | onOpen | () => void | - | Callback when chat opens | | onClose | () => void | - | Callback when chat closes | | account | Account | - | Wallet account info (can be provided via ConnectProvider) | | onTransaction | (tx: Transaction) => Promise<'success' \| 'fail'> | Required | Transaction handler |

Account Type

interface Account {
  address: string; // Wallet address
  chainId: number; // Chain ID (1, 10, 56, 137, 8453, 42161)
}

Transaction Type

interface Transaction {
  from: string; // Sender address
  to: string; // Contract/recipient address
  data: string; // Encoded transaction data
  value: string; // Native token value in wei
  chainId: number; // Chain ID
}

Theme Configuration

interface ChatWidgetTheme {
  primaryColor?: string; // Primary color (hex)
  buttonSize?: number; // Button size in pixels
  zIndex?: number; // z-index for positioning
}

Supported Chains

Ethereum (chainId: 1)
Optimism (chainId: 10)
BNB Chain (chainId: 56)
Polygon (chainId: 137)
Base (chainId: 8453)
Arbitrum (chainId: 42161)

Capabilities

AI Actions

The chatbot AI can understand and execute:

💬 General Chat - Answer questions about crypto and blockchain
💰 Buy/Swap Tokens - "Swap 1 ETH to USDC" or "Buy WBTC"
📤 Send Tokens - "Send 10 USDC to 0x..."
🖼️ View NFTs - "Show my NFTs"
📤 Send NFTs - "Send my NFT #123 to 0x..."
✅ Approve Tokens - Automatic approval handling for swaps
🔄 Wrap/Unwrap - "Wrap 1 ETH" or "Unwrap 0.5 WETH"

Features

Smart Token Resolution - AI automatically resolves token symbols to addresses
Trending Tokens - View trending tokens on current chain
Wallet Balance - Real-time wallet balance display
Multi-step Flows - Guided swap flows with approval handling
NFT Images - Display NFT images from metadata
Transaction Preview - See swap details before confirming
Gas Estimation - View estimated gas fees

Development

Clone Repository

git clone [email protected]:bacoorteam/keyring-chatbot-agent-sdk.git
cd keyring-chatbot-agent-sdk

Install Dependencies

yarn install

Build Library

yarn build

This creates two builds:

React Component - dist/chat-widget.es.js & dist/chat-widget.umd.js
Web Component - dist/chat-widget-wc.es.js & dist/chat-widget-wc.umd.js

Development Mode

yarn dev

Watch Mode (Auto-rebuild)

yarn watch

Project Structure

src/
├── components/
│   ├── ActionForm.tsx         # Transaction action forms
│   ├── ChatButton.tsx         # Floating chat button
│   ├── ChatModal.tsx          # Main chat modal with AI logic
│   ├── ChatWidget.tsx         # Root component
│   └── MessageContent.tsx     # Message renderer with markdown
├── constants/
│   ├── agentActions.ts        # AI action definitions
│   ├── chains.ts              # Chain configurations
│   ├── storage.ts             # Storage keys
│   └── systemPrompt.ts        # AI system prompt builder
├── contexts/
│   ├── ConfigContext.tsx      # Configuration context
│   └── ConnectContext.tsx     # Wallet connection context
├── hooks/
│   └── useChatMessages.ts     # Chat state management
├── services/
│   ├── BaseApi.ts             # Base API client
│   ├── deBridge.ts            # deBridge swap API
│   ├── moralis.ts             # Moralis Web3 APIs
│   ├── token.ts               # Token data service
│   └── web3.ts                # Web3 transaction builder
└── lib.tsx                    # Library entry point

API Services

Moralis Integration

The SDK uses Moralis APIs for:

AI chat (Cortex GPT-4)
Wallet token balances
NFT collections
Token metadata

deBridge Integration

Token swaps are powered by deBridge protocol for:

Cross-chain swaps
Best price routing
Low slippage
Automatic approval handling

Build Configuration

The project uses Vite in library mode:

Entry points: src/lib.tsx (React), src/web-component.tsx (Web Component)
Output formats: ES module and UMD
External dependencies: React and React-DOM (peer dependencies)
TypeScript: Full type support with .d.ts files

Publishing to NPM

Update version in package.json
Build the project:

yarn build

npm login

Publish:

npm publish

License

ISC

Repository

Bitbucket - keyring-chatbot-agent-sdk

Support

For issues and feature requests, please use the issue tracker.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Keyring Chatbot Agent SDK

Features

Installation

Usage

Basic Setup with React

Advanced Configuration

Usage with HTML (Web Component)

Using CDN (unpkg)

Using Local File

Using ES Module Import

Web Component Attributes

Web Component Properties

Web Component Events

Props Reference

ChatWidget Props

Account Type

Transaction Type

Theme Configuration

Supported Chains

Capabilities

AI Actions

Features

Development

Clone Repository

Install Dependencies

Build Library

Development Mode

Watch Mode (Auto-rebuild)

Project Structure

API Services

Moralis Integration

deBridge Integration

Build Configuration

Publishing to NPM

License

Repository

Support