https://github.com/BitteProtocol/chat
The Bitte Ai Chat Component Package.
https://github.com/BitteProtocol/chat
ai blockchain ethereum near
Last synced: 5 days ago
JSON representation
The Bitte Ai Chat Component Package.
- Host: GitHub
- URL: https://github.com/BitteProtocol/chat
- Owner: BitteProtocol
- License: mit
- Created: 2024-12-01T20:20:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-07T11:13:51.000Z (about 1 year ago)
- Last Synced: 2026-04-26T18:02:49.622Z (about 2 months ago)
- Topics: ai, blockchain, ethereum, near
- Language: TypeScript
- Homepage: https://chat.bitte.ai
- Size: 1.13 MB
- Stars: 3
- Watchers: 5
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bitte - @bitte-ai/chat
README
# 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 yours here](placeholder-link-for-api-key)
---
## Quick Start
1. [Configure Wallet Integration](#wallet-integration)
2. [Setup the API Route](#api-route-setup)
3. [Add the Chat Component](#basic-usage)
## Compatibility
Our stable version (latest) currently supports React 18 Applications.
We have a beta version that supports React 19 and Next.js 15 Applications.
We are working on support more frameworks like Vite React 19 in the mean time.
You can check an working Next.js example on our [chat-boilerplate](https://github.com/BitteProtocol/chat-boilerplate) repo
Run on [Stackblitz](https://stackblitz.com/~/github.com/BitteProtocol/chat-boilerplate)
## Wallet Integration
We recommend installing the package using pnpm or yarn:
```
pnpm install @bitte-ai/chat
```
or
```
yarn add @bitte-ai/chat
```
if you are using npm and find issues, you can use the current command:
```
npm install @bitte-ai/chat --legacy-peer-deps
```
### 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 Next.js
Check our [Next.js boilerplate](https://github.com/BitteProtocol/chat-boilerplate) repo.
Currently turbopack builds arent working due to tailwind build issue.
#### Using Wallet Selector
1. You need to wrap your application with [BitteWalletContextProvider](https://github.com/BitteProtocol/react?tab=readme-ov-file#bittewalletcontextprovider)
2. If you using Next.js you need to add `"use client"` on top of file
```typescript
import { useEffect, useState } from "react"
import { useBitteWallet, Wallet } from "@bitte-ai/react";
import { BitteAiChat } from "@bitte-ai/chat";
import "@bitte-ai/chat/style.css";
export default function Chat() {
const { selector } = useBitteWallet();
const [wallet, setWallet] = useState();
useEffect(() => {
const fetchWallet = async () => {
const walletInstance = await selector.wallet();
setWallet(walletInstance);
};
if (selector) fetchWallet();
}, [selector]);
return (
);
}
```
#### Using Direct Account
```typescript
import { Account } from "near-api-js";
// get near account instance from near-api-js by instantiating a keypair
```
### EVM Integration
EVM integration uses WalletConnect with wagmi hooks:
```typescript
import { useSendTransaction, useAccount } from 'wagmi';
export default function Chat() {
const { address } = useAccount();
const { sendTransaction } = useSendTransaction();
return (
);
}
```
## API Route Setup
Create an API route in your Next.js application to proxy requests to the Bitte API to not expose your key:
```typescript
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 => {
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,
});
};
```
## History API Route Setup
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.
```typescript
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 => {
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);
};
```
## Component Props
```typescript
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;
chatContainer?: React.ComponentType;
inputContainer?: React.ComponentType;
sendButtonComponent?: React.ComponentType;
loadingIndicator?: React.ComponentType;
};
};
}
```
## Available Agents
[Agent registry](https://www.bitte.ai/registry)
## Creating Custom Agents
[Make Agent](https://docs.bitte.ai/agents/introduction)
## Styling
The component can be customized using the `colors` prop:
```typescript
type ChatComponentColors = {
generalBackground?: string; // Chat container background
messageBackground?: string; // Message bubble background
textColor?: string; // Text color
buttonColor?: string; // Button color
borderColor?: string; // Border color
};
```
## Example Projects
- [Bitte AI Chat Boilerplate](https://github.com/BitteProtocol/chat-boilerplate)
- [Bitte AI Chat Boilerplate Next.js Pages Router](https://github.com/BitteProtocol/chat-boilerplate-next-pages)