{"id":49321038,"url":"https://github.com/bitteprotocol/chat","last_synced_at":"2026-04-26T18:00:31.955Z","repository":{"id":275580726,"uuid":"897000705","full_name":"BitteProtocol/chat","owner":"BitteProtocol","description":"The Bitte Ai Chat Component Package.","archived":false,"fork":false,"pushed_at":"2025-04-07T11:13:51.000Z","size":1186,"stargazers_count":4,"open_issues_count":2,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-27T01:45:49.756Z","etag":null,"topics":["ai","blockchain","ethereum","near"],"latest_commit_sha":null,"homepage":"https://chat.bitte.ai","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BitteProtocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-01T20:20:18.000Z","updated_at":"2025-05-05T10:26:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"573ed931-6a71-4242-9fd9-dedebcff30f4","html_url":"https://github.com/BitteProtocol/chat","commit_stats":null,"previous_names":["bitteprotocol/chat","bitteprotocol/bitte-ai-chat"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/BitteProtocol/chat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitteProtocol%2Fchat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitteProtocol%2Fchat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitteProtocol%2Fchat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitteProtocol%2Fchat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BitteProtocol","download_url":"https://codeload.github.com/BitteProtocol/chat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitteProtocol%2Fchat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32307015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T17:23:19.671Z","status":"ssl_error","status_checked_at":"2026-04-26T17:23:19.195Z","response_time":129,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","blockchain","ethereum","near"],"created_at":"2026-04-26T18:00:26.767Z","updated_at":"2026-04-26T18:00:31.946Z","avatar_url":"https://github.com/BitteProtocol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Bitte AI Chat\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://img.shields.io/github/v/release/BitteProtocol/chat\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/release-date/BitteProtocol/chat\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/commit-activity/m/BitteProtocol/chat\" /\u003e\n\n\u003cimg src='https://img.shields.io/npm/dw/@bitte-ai/chat' /\u003e\n\u003ca href=\"https://stackblitz.com/~/github.com/BitteProtocol/chat-boilerplate\" target=\"_blank\"\u003e \u003cimg src='https://img.shields.io/badge/StackBlitz-Edit-blue?style=flat-square\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAABECAYAAAD+1gcLAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AINBw4X0bTGRQAABSxJREFUaN7VmVtsFFUYx//fmQW79bbd2QKpaIIaDcGoifFBEgMGqTTRRA01SgxE5Rbi7QG6S3lgo9J2twpeotxEQlCigLdoQwJ4ARN9QB9MRCNRDBdRzE7LJbTSmTl/H4BYStmd2Z3tDOdt5lzml/9833fO9x0gYi2xgom6Tt5aapyKEnRDlrVGPzfGT+G3SwZ87HLGT8f5uYD7jmSl99IAX80RfTY3A5wMqDVepoQPnqVKHtMbAN4PyJeFtPwafXBSknG9UoDHAIDQq7xODRU8mdc5Aeaeffy7O2F8GnnwZM5dKsCic88CrMU8sSMNbubdZwTIDnjlOoZa52eNYQc3c84sEK+d/1a6ji2UA5EFN3POw4C8fcYy/m+a3p1y2MGTOXsqIJsAxAZ1Hei53tgeSfBkBycK1McALrswJGIVHhE3cuD1ed4uorsAXD5Ed7/hqvXlrFtV8LpO3qKpdwJIDLn/AB/+s0SORgp8VJ43KK23AzAvNsagWlXu+lKV6LGc14itvyEwrsiwX6wWNQEijITiY9pYD1vvKAENAG+VC40hQlNlNt3Bq22lt4EYX2Jor6PVe5V8KzDFG7KsFXE/A3GHB/vcdHyx9IQPnuXI/ji3CuRuT+N1+U4ZHPhmGqk43yXY5C0ccE9hsfwQLjgp5n69hmCz9ylYGcRPrgg8ldfLIXjSx5RjNX3GB6GCm3m3ncDz/v4QNnjJ4KsGbubdVhAZ35YFtTaoKOY7jps5dwGIZf73aH7dnZa9QYH72vLNDmcmRNaX86eEnGvT2BoIdA0o3pV2HgRkS9C7bXnRDGlPypmd9r2AvB8FaAFetDJGvqTiyU7eJWeOp1cgfOo3rRbj6ZJRJdHB20TrrkhAAxutXvVsSedMtfEmGno3gNHhM8snVp80IytO0The18HraOgdkYCm7KyLy6MDoYdUfNQyjnZjeheAm8NXmt/FlDH16CI5dUHaN/DhypeZUqK/AkomAsMQ8fCjq41GKy0nim75ydd51UjX3QZgQgQccV/MUfcVSzYM4Mw1hnPa7QJkYgSgD2qqe6xWOVL8kLWaI3ptbgFkUgSgjwpUY09GDpY8ZJnH9UsExhPYH8CuVgtgTJlzC5pqipXxdpUSaF3FzLkdANJleOIJETWlkJbvh78glOVIM64PARjlc2afiGoqtMiuUMoTqRp3ehnQtpDNfqEDBdeC+T6nuELOLGRiXVVPJC5u2xwP6L0+1qOQ8wqZWNmpXECK6wV+RBCipRLoQBRvyLL2dFwfBlDnTWos7W4xXgi3IATg31p3hldoEG8EAR0IuEC8OuUGK62eCyoYVARutvNOL9VZQD6yxqmnKqmHB6u46PkejHp7XVxmlHOzVhXnTKxgwujXhzH0bdo56m9jymgcKhEITXFl61lFoYV7BMa0akCjkjqJEHOKdP/U7xhNJ1vlZLXOv2Upnmq3JxfJlH4XRzWebBWrmgf38hRXav5F4vSfjqGmHl8if1W/NuSzjWljvW3oQxh0Ly9AQRtqUvdC+Xk4UiXfpmLH9JzB0CBOQKtpwwXtHzxLJcTsQW97FdQDQVxIVc3GUzVuEyEDb4z7NTndysju4c6qfSlOOc8pXQof78nEtoVRDvDsnMlXeK04+o+ztRgSnNOdjq1DSM2z4uLoeecKSCQWhgntXfEsY2ZcHwDQAMESq8VoC7ty5EnxZK37EIAGAV6NArT3c3def2Hm3HdASlSYSipe384bAR6x+tTsIBOBqoMTzlirVz2BrOgoWcF/mizikfkwKiQAAAAASUVORK5CYII=)]' /\u003e \u003c/a\u003e\n\n\u003c/p\u003e\n\n\n\n## Introduction\n\nThe **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.\n\n\u003e 🔑 Before you begin, make sure you have:\n\u003e\n\u003e - A **Bitte API Key** - [Get yours here](placeholder-link-for-api-key)\n\n---\n\n## Quick Start\n\n1. [Configure Wallet Integration](#wallet-integration)\n2. [Setup the API Route](#api-route-setup)\n3. [Add the Chat Component](#basic-usage)\n\n\n## Compatibility\n\nOur stable version (latest) currently supports React 18 Applications.\nWe have a beta version that supports React 19 and Next.js 15 Applications.\n\nWe are working on support more frameworks like Vite React 19 in the mean time.\n\nYou can check an working Next.js example on our [chat-boilerplate](https://github.com/BitteProtocol/chat-boilerplate) repo\n\nRun on [Stackblitz](https://stackblitz.com/~/github.com/BitteProtocol/chat-boilerplate)\n\n\n## Wallet Integration\n\nWe recommend installing the package using pnpm or yarn:\n\n```\npnpm install @bitte-ai/chat\n```\n\nor\n\n```\nyarn add @bitte-ai/chat\n```\n\n\nif you are using npm and find issues, you can use the current command:\n\n```\nnpm install @bitte-ai/chat --legacy-peer-deps\n```\n\n### NEAR Integration\n\nYou 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\n\n\n### Using Next.js\n\nCheck our [Next.js boilerplate](https://github.com/BitteProtocol/chat-boilerplate) repo.\nCurrently turbopack builds arent working due to tailwind build issue.\n\n\n#### Using Wallet Selector\n\n1. You need to wrap your application with [BitteWalletContextProvider](https://github.com/BitteProtocol/react?tab=readme-ov-file#bittewalletcontextprovider)\n\n2. If you using Next.js you need to add `\"use client\"` on top of file\n\n```typescript\nimport { useEffect, useState } from \"react\"\nimport { useBitteWallet, Wallet } from \"@bitte-ai/react\";\nimport { BitteAiChat } from \"@bitte-ai/chat\";\nimport \"@bitte-ai/chat/style.css\";\n\n\nexport default function Chat() {\n  const { selector } = useBitteWallet();\n  const [wallet, setWallet] = useState\u003cWallet\u003e();\n\n  useEffect(() =\u003e {\n    const fetchWallet = async () =\u003e {\n      const walletInstance = await selector.wallet();\n      setWallet(walletInstance);\n    };\n    if (selector) fetchWallet();\n  }, [selector]);\n\n  return (\n    \u003cBitteAiChat\n      agentId=\"your-agent-id\"\n      apiUrl=\"/api/chat\"\n      wallet={{ near: { wallet } }}\n    /\u003e\n  );\n}\n```\n\n#### Using Direct Account\n\n```typescript\nimport { Account } from \"near-api-js\";\n// get near account instance from near-api-js by instantiating a keypair\n\u003cBitteAiChat\n  agentId=\"your-agent-id\"\n  apiUrl=\"/api/chat\"\n  wallet={{ near: { account: nearAccount } }}\n/\u003e\n```\n\n### EVM Integration\n\nEVM integration uses WalletConnect with wagmi hooks:\n\n```typescript\n\nimport { useSendTransaction, useAccount } from 'wagmi';\n\nexport default function Chat() {\n  const { address } = useAccount();\n  const { sendTransaction } = useSendTransaction();\n\n  return (\n    \u003cBitteAiChat\n      agentId=\"your-agent-id\"\n      apiUrl=\"/api/chat\"\n      wallet={{\n        evm: {\n          sendTransaction,\n          address\n        }\n      }}\n    /\u003e\n  );\n}\n```\n\n## API Route Setup\n\nCreate an API route in your Next.js application to proxy requests to the Bitte API to not expose your key:\n\n```typescript\nimport type { NextRequest } from \"next/server\";\n\nconst { BITTE_API_KEY, BITTE_API_URL = \"https://wallet.bitte.ai/api/v1/chat\" } =\n  process.env;\n\nexport const dynamic = \"force-dynamic\";\nexport const maxDuration = 60;\n\nexport const POST = async (req: NextRequest): Promise\u003cResponse\u003e =\u003e {\n  const requestInit: RequestInit \u0026 { duplex: \"half\" } = {\n    method: \"POST\",\n    body: req.body,\n    headers: {\n      Authorization: `Bearer ${BITTE_API_KEY}`,\n    },\n    duplex: \"half\",\n  };\n\n  const upstreamResponse = await fetch(BITTE_API_URL, requestInit);\n  const headers = new Headers(upstreamResponse.headers);\n  headers.delete(\"Content-Encoding\");\n\n  return new Response(upstreamResponse.body, {\n    status: upstreamResponse.status,\n    headers,\n  });\n};\n```\n\n## History API Route Setup\n\nCreate 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.\n\n```typescript\nimport { type NextRequest, NextResponse } from 'next/server';\n\nconst { BITTE_API_KEY, BITTE_API_URL = 'https://wallet.bitte.ai/api/v1' } =\n  process.env;\n\nexport const dynamic = 'force-dynamic';\nexport const maxDuration = 60;\n\nexport const GET = async (req: NextRequest): Promise\u003cNextResponse\u003e =\u003e {\n  const { searchParams } = new URL(req.url);\n  const id = searchParams.get('id');\n  const url = `${BITTE_API_URL}/history?id=${id}`;\n\n  const response = await fetch(url, {\n    headers: {\n      Authorization: `Bearer ${BITTE_API_KEY}`,\n    },\n  });\n\n  const result = await response.json();\n\n  return NextResponse.json(result);\n};\n```\n\n## Component Props\n\n```typescript\ninterface BitteAiChatProps {\n  agentId: string; // ID of the AI agent to use\n  apiUrl: string; // Your API route path (e.g., \"/api/chat\")\n  historyApiUrl?: string; // Your history API route to keep context when signing transactions\n  wallet?: WalletOptions; // Wallet configuration\n  colors?: ChatComponentColors;\n  options?: {\n    agentName?: string; // Custom agent name\n    agentImage?: string; // Custom agent image URL\n    chatId?: string; // Custom chat ID\n    prompt?: string // Custom Initial prompt\n    localAgent?: {\n      pluginId: string;\n      accountId: string;\n      spec: BitteOpenAPISpec;\n    };\n  placeholderText?: string;\n  colors?: ChatComponentColors;\n  customComponents?: {\n    welcomeMessageComponent?: React.JSX.Element;\n    mobileInputExtraButton?: React.JSX.Element; \n    messageContainer?: React.ComponentType\u003cMessageGroupComponentProps\u003e;\n    chatContainer?: React.ComponentType\u003cChatContainerComponentProps\u003e;\n    inputContainer?: React.ComponentType\u003cInputContainerProps\u003e;\n    sendButtonComponent?: React.ComponentType\u003cSendButtonComponentProps\u003e;\n    loadingIndicator?: React.ComponentType\u003cLoadingIndicatorComponentProps\u003e;\n  };\n  };\n}\n```\n\n## Available Agents\n\n[Agent registry](https://www.bitte.ai/registry)\n\n## Creating Custom Agents\n\n[Make Agent](https://docs.bitte.ai/agents/introduction)\n\n## Styling\n\nThe component can be customized using the `colors` prop:\n\n```typescript\ntype ChatComponentColors = {\n  generalBackground?: string; // Chat container background\n  messageBackground?: string; // Message bubble background\n  textColor?: string; // Text color\n  buttonColor?: string; // Button color\n  borderColor?: string; // Border color\n};\n```\n\n## Example Projects\n\n- [Bitte AI Chat Boilerplate](https://github.com/BitteProtocol/chat-boilerplate)\n- [Bitte AI Chat Boilerplate Next.js Pages Router](https://github.com/BitteProtocol/chat-boilerplate-next-pages)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitteprotocol%2Fchat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitteprotocol%2Fchat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitteprotocol%2Fchat/lists"}