Embeddable Chat Component

Bitte AI Chat

Introduction

The Bitte AI Chat component is a React component that enables AI-powered chat interactions in your application. It supports both NEAR Protocol and EVM blockchain interactions through wallet integrations, allowing users to interact with smart contracts and perform transactions directly through the chat interface.

🔑 Before you begin, make sure you have:

• A Bitte API Key - Get your beta BITTE_API_KEY here

---

Quick Start (<10min)

1. Install package

2. Add the Chat Component

3. Setup API Route

4. Wallet Connection

1. Install Package

pnpm install @bitte-ai/chat

2. Add the Chat Component

Import and use BitteAiChat in your react app and select the agent that you would like to use, browse the available agents and their respective ids on the registry The apiUrl corresponds to a proxy to not expose your api key on the client

import {BitteAiChat} from "@bitte-ai/chat";

<BitteAiChat  
  agentId="your-agent-id"
  apiUrl="/api/chat"
/>

3. Setup API Route

Create an API route in your Next.js application to proxy requests to the Bitte API to not expose your key

import type { NextRequest } from "next/server";

const { BITTE_API_KEY, BITTE_API_URL = "https://wallet.bitte.ai/api/v1/chat" } =
  process.env;

export const dynamic = "force-dynamic";
export const maxDuration = 60;

export const POST = async (req: NextRequest): Promise<Response> => {
  const requestInit: RequestInit & { duplex: "half" } = {
    method: "POST",
    body: req.body,
    headers: {
      Authorization: `Bearer ${BITTE_API_KEY}`,
    },
    duplex: "half",
  };

  const upstreamResponse = await fetch(BITTE_API_URL, requestInit);
  const headers = new Headers(upstreamResponse.headers);
  headers.delete("Content-Encoding");

  return new Response(upstreamResponse.body, {
    status: upstreamResponse.status,
    headers,
  });
};

At this point the chat should already work but to be able to send transactions you will need to add a wallet connection

4. Add wallet connection

NEAR Integration

You can integrate with NEAR using either the NEAR Wallet Selector or a direct account connection. If you want to be able to send near transacitons through the chat you will need to define at least one of these

Using Wallet Selector

import { useBitteWallet, Wallet } from "@bitte-ai/react";
import { BitteAiChat } from "@bitte-ai/chat";
import "@bitte-ai/chat/dist/index.css";


export default function Chat() {
  const { selector } = useBitteWallet();
  const [wallet, setWallet] = useState<Wallet>();

  useEffect(() => {
    const fetchWallet = async () => {
      const walletInstance = await selector.wallet();
      setWallet(walletInstance);
    };
    if (selector) fetchWallet();
  }, [selector]);

  return (
    <BitteAiChat
      agentId="your-agent-id"
      apiUrl="/api/chat"
      wallet={{ near: { wallet } }}
    />
  );
}

Using Direct Account

import { Account } from "near-api-js";
// get near account instance from near-api-js by instantiating a keypair
<BitteAiChat
  agentId="your-agent-id"
  apiUrl="/api/chat"
  wallet={{ near: { account: nearAccount } }}
/>

EVM Integration

EVM integration uses WalletConnect with wagmi hooks:

import { useAppKitAccount } from '@reown/appkit/react';
import { useSendTransaction, useSwitchChain } from 'wagmi';

export default function Chat() {

  const { address } = useAppKitAccount();
  const { data: hash, sendTransaction } = useSendTransaction();
  const { switchChain } = useSwitchChain();
  
  return (
    <BitteAiChat
      agentId="your-agent-id"
      apiUrl="/api/chat"
      wallet={{
        evm: { address, hash, sendTransaction, switchChain },
      }}
    />
  );
}

Component Props

interface BitteAiChatProps {
  agentId: string; // ID of the AI agent to use
  apiUrl: string; // Your API route path (e.g., "/api/chat")
  historyApiUrl?: string; // Your history API route to keep context when signing transactions
  wallet?: WalletOptions; // Wallet configuration
  colors?: ChatComponentColors;
  options?: {
    agentName?: string; // Custom agent name
    agentImage?: string; // Custom agent image URL
    chatId?: string; // Custom chat ID
    prompt?: string // Custom Initial prompt
    localAgent?: {
      pluginId: string;
      accountId: string;
      spec: BitteOpenAPISpec;
    };
  placeholderText?: string;
  colors?: ChatComponentColors;
  customComponents?: {
    welcomeMessageComponent?: React.JSX.Element;
    mobileInputExtraButton?: React.JSX.Element; 
    messageContainer?: React.ComponentType<MessageGroupComponentProps>;
    chatContainer?: React.ComponentType<ChatContainerComponentProps>;
    inputContainer?: React.ComponentType<InputContainerProps>;
    sendButtonComponent?: React.ComponentType<SendButtonComponentProps>;
    loadingIndicator?: React.ComponentType<LoadingIndicatorComponentProps>;
  };
  };
}

Available Agents

Agent Name	Description	Category	Agent ID
CoWSwap Assistant	An assistant that generates transaction data for CoW Protocol Interactions	DeFi	near-cow-agent.vercel.app
Meme.cooking	Generates a transaction payload for creating a new memecoin on the meme.cooking platform	Memes	meme-cooking-bitte-agent.vercel.app
CoinGecko Agent	Provides real-time cryptocurrency data, including prices, market information, and charts	Investing	coingecko-ai.vercel.app
Ref Finance Agent	Provides token metadata and swaps tokens through Ref Finance	DeFi	ref-finance-agent.vercel.app
NEAR Roast Agent	Roasts a NEAR account based on their on-chain activity	Other	near-roast-agent.vercel.app
NEAR Staking	Stake, unstake, and see staking information	Other	staking-agent.intear.tech
Crypto Technical Analyst	Provides in-depth market analysis and sophisticated trading insights based on technical analysis	Investing	technical-analysis-agent.vercel.app
DAO Agent	Interacts with Sputnik DAO Contracts, query DAOs, create proposals, and vote on proposals	DAO	dao-agent.vercel.app
Safe Account Assistant	Manages Near{Safe} Account Structure	Wallet Management	near-safe-agent.vercel.app
Uniswap Assistant	Generates transaction data for Uniswap V3 Interactions	Other	near-uniswap-agent.vercel.app
GrowthMate Discovery	Discovers the ecosystem through relevant activities, news, and offers	Ecosystem	bitte-agent.vercel.app
Python Code Runner	A helpful assistant for running Python code snippets	Computational	bitte-wasmer-agent.fly.dev
PotLock Assistant	Helps users search projects and donations on PotLock platform and create projects	Other	potlockaiagent-hqd5dzcjajhpc3fa.eastus-01.azurewebsites.net
Delta Trade DCA Helper	Helps set up DCA plans to buy NEAR and other tokens	Investing	dcaagent.deltatrade.ai

Creating Custom Agents

Check out our docs for creating your own agent from an API

Example Projects

• Bitte AI Chat Boilerplate

Styling

The component can be customized using the colors prop:

type ChatComponentColors = {
  generalBackground?: string; // Chat container background
  messageBackground?: string; // Message bubble background
  textColor?: string; // Text color
  buttonColor?: string; // Button color
  borderColor?: string; // Border color
};

Browser Redirects (Optional)

if you're having issues with your app or wallet containing redirects you can optionally use a history api to maintain context

Create an API route in your Next.js application that will allow your app if you want to save chat context when signing a transaction after getting redirected to the wallet.

import { type NextRequest, NextResponse } from 'next/server';

const { BITTE_API_KEY, BITTE_API_URL = 'https://wallet.bitte.ai/api/v1' } =
  process.env;

export const dynamic = 'force-dynamic';
export const maxDuration = 60;

export const GET = async (req: NextRequest): Promise<NextResponse> => {
  const { searchParams } = new URL(req.url);
  const id = searchParams.get('id');
  const url = `${BITTE_API_URL}/history?id=${id}`;

  const response = await fetch(url, {
    headers: {
      Authorization: `Bearer ${BITTE_API_KEY}`,
    },
  });

  const result = await response.json();

  return NextResponse.json(result);
};