{"id":13341468,"url":"https://github.com/albirrkarim/agent-support","last_synced_at":"2025-03-11T21:31:10.507Z","repository":{"id":190102254,"uuid":"681914736","full_name":"albirrkarim/agent-support","owner":"albirrkarim","description":"Interactable AI 3D Avatar that has control over your frontend website","archived":false,"fork":false,"pushed_at":"2024-12-28T06:25:08.000Z","size":1610,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-07T09:48:06.685Z","etag":null,"topics":["3d-avatar","accessibility","ai-web-accessibility","artificial-intelligence","conversational-ai","metaverse","metaverse-npc","mozilla-hubs","openai-api","reactjs","readyplayerme","talking-avatar","web-accessibility","web-guider"],"latest_commit_sha":null,"homepage":"https://react-gpt-web-guide.vercel.app","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/albirrkarim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":"albirrkarim","ko_fi":"albirrkarim"}},"created_at":"2023-08-23T03:22:49.000Z","updated_at":"2025-02-28T02:41:31.000Z","dependencies_parsed_at":"2023-09-03T03:57:41.717Z","dependency_job_id":"2ae36cda-b970-4a85-99fa-610880ddb44c","html_url":"https://github.com/albirrkarim/agent-support","commit_stats":null,"previous_names":["albirrkarim/gpt-web-guide-docs","albirrkarim/react-gpt-web-guide-docs","albirrkarim/agent-support"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albirrkarim%2Fagent-support","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albirrkarim%2Fagent-support/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albirrkarim%2Fagent-support/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albirrkarim%2Fagent-support/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/albirrkarim","download_url":"https://codeload.github.com/albirrkarim/agent-support/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243115390,"owners_count":20238751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["3d-avatar","accessibility","ai-web-accessibility","artificial-intelligence","conversational-ai","metaverse","metaverse-npc","mozilla-hubs","openai-api","reactjs","readyplayerme","talking-avatar","web-accessibility","web-guider"],"created_at":"2024-07-29T19:25:26.391Z","updated_at":"2025-03-11T21:31:10.189Z","avatar_url":"https://github.com/albirrkarim.png","language":null,"funding_links":["https://github.com/sponsors/albirrkarim","https://ko-fi.com/albirrkarim"],"categories":[],"sub_categories":[],"readme":"![GPT Web Guide](./img/sosmed.png)\n\n**React GPT Web Guide** - Interactable AI 3D Avatar that have controll over your frontend website\n\n[Try the demo React GPT Web Guide](https://react-gpt-web-guide.vercel.app)\n\nAsk something? discord: albirrkarim\n\n\u003cbr/\u003e\n\n## Features:\n\n- All the feature that [React Speech Highlight](https://github.com/albirrkarim/react-speech-highlight-demo) have. This is the extended product of that package.\n- Tested function and prompts using [jest](https://jestjs.io) and code linting using [eslint](https://eslint.org)\n- Efficient [Chat GPT API cost](https://openai.com/pricing)\n- Support [Typescript](https://www.typescriptlang.org), [Js Doc](https://jsdoc.app), [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense)\n- Flexible package API.\n- Less dependencies.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# Docs React GPT Web Guide v1.4.3\n\nThis is the Documentation for private repo [demo website](https://github.com/Web-XR-AI-lab/demo-website-gpt-web-guide)\n\n**Table Of Contents**\n\n- [A. Introduction](#a-introduction)\n- [B. Todo](#b-todo)\n- [C. API \u0026 Example Code](#c-api--example-code)\n- [D. Changelog](#d-changelog)\n- [E. Disclaimer \u0026 Warranty](#e-disclaimer--warranty)\n- [F. FAQ](#f-faq)\n- [G. Payment](#g-payment)\n\n\u003cbr/\u003e\n\n## A. Introduction\n\n### What i want?\n\nRecently, I worked on AI accessibility tools The idea is it's like conversational AI that can guide the user with a disability maybe a motoric, or visual problem. So the tools must be able to read the page, understand the user's voice, and do some action programmatically.\n\nNot just benfiting for the user with disability, but also for the normal user.\n\nI want it to be more interactive, more fun, and more engaging. I want to make it like a 3D avatar that can control the website.\n\n### Here what i got from the search on the internet:\n\n**Accesibility tools**\n\nThere are many tools, mostly is subscription-based, and the price is expensive. I want to make it more affordable and more flexible. The practical solution one. Mostly just 2D interface, and doesn't have integrated with 3D Avatar. which enhance the user experience and make it more fun.\n\n**Conversational AI 3D Avatar**\n\nI found the [Talking Head](https://github.com/met4citizen/TalkingHead) project. its a js library that can make 3D avatar and do conversation with user with also lip sync and have animation. But they don't have the ability to control the website.\n\n**3D AI avatar using React js**\n\nSince my project using react js so it would be easier to me to use react js. I found project from [wawa sensei](https://github.com/wass08) about [Virtual Girlfriend](https://github.com/wass08/r3f-virtual-girlfriend-frontend) but again they don't have the ability to control the website and text highlight when the AI talk.\n\n\n### Solutions\n\nMaking some frontend-package (npm package) that can doing various thing.\n\nWhat position is this package in your production apps?\n\nImagine the human body, They have a mouth (text-to-speech), ears (speech-to-text), a brain (chat GPT API), hands (programmatically calling function to do some action), eyes (the function that searches the web section, button, form, etc).\n\n### How It Works\n\n![GPT Web Guide Overview](./img/overview.png)\n\n#### The Interaction with user (Mouth and Ears)\n\nUsing [React / Vanilla Speech Highlight](https://github.com/albirrkarim/react-speech-highlight-demo) (text-to-speech with highlight) so the ai can speak and using [React Speech Recognition](https://github.com/JamesBrill/react-speech-recognition) for Speech Recognition (speech to text)\n\n#### The Brain\n\nI designing some engines that combine the LLM capabilities and efficient algorithm to save the cost. Featuring understanding user command with some initial knowledge (like what is your website about, etc).\n\n#### The Hands\n\nThe hands is the function that can do some action programmatically. like search, click, etc.\n\n#### The Eyes\n\nThe eyes is js function that can extract all section of your webpage that maybe inside it contain button, form, etc. then using LLM (Open AI API) make some literal text and after that the `Mouth` will speak it. (Human like informer)\n\n#### The 3D Avatar\n\nUsing [React Three Drei](https://github.com/pmndrs/drei) and the [readyplayer.me](https://readyplayer.me/id) and mixamo for the avatar animation. Like in the wawa sensei project [virtual girlfriend](https://www.youtube.com/watch?v=EzzcEL_1o9o)\n\n\u003cbr/\u003e\n\n### Use Cases\n\n#### Conversational AI\n\nImagine the user can ask the AI about anything on your website. The AI can answer the user question, doing some action, etc.\n\n#### As AI Web Accessibility Tools\n\nCan be used as interactable web accessibility.\n\nScreen Reader (all menus, buttons, form). Understand the user say and do the actions.\n\n#### As Metaverse NPC\n\nYou can set programatic action. so the package can integrate into your system.\n\n```js\n[\n  {\n    name: \"Search\",\n    description: \"Searching with some keyword\",\n    type: ACTION_TYPE.SEARCH,\n    format: \"search {keywords}\",\n    onAction: (params) =\u003e {\n      console.log(\"Triggering onAction 2 with params: \");\n      console.log(params);\n      // params:\n      //   {\n      //     keywords: \"elephant\",\n      //   }\n\n      // this function will called if the user want to search something\n    },\n  },\n];\n```\n\n\u003cbr/\u003e\n\n## B. Todo\n\n- [ ] Let me know what you want from this package, please write it on issues tab\n- [ ] Make Youtube Video Tutorial\n- [x] Typescript, Eslint\n- [x] API docs, JS Doc\n- [x] Automate the testing (Prompt Test, Unit Test)\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## C. API \u0026 Example Code\n\nSee [API.md](API.md)\n\nThe full example code and implementation example using source code from demo website. the source code of demo website is included when you buy this package.\n\n\u003cbr/\u003e\n\n# D. Changelog\n\nChangelog contains information about new feature, fix bug, and what you should do when the version is update.\n\nSee [CHANGELOG.md](CHANGELOG.md)\n\n\u003cbr/\u003e\n\n# E. Disclaimer \u0026 Warranty\n\nThere's no refund. I love feedback from my customers. You can write on the issue tab so when i have time i can try to solve that and deliver for the next update.\n\n\u003cbr/\u003e\n\n\u003cbr/\u003e\n\n# F. FAQ\n\n\u003cdetails\u003e\n  \u003csummary\u003eWhy it's expensive? Why it's not opensource package?\u003c/summary\u003e\n  \n  \u003cbr/\u003e\n\nTry yourself to make this package. you will be grateful I am selling it cheap.\n\nWell, i need money to funding the research, you know that making package is cost a lot of time and of course money.\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eIs Chat GPT api sometime give wrong output?\u003c/summary\u003e\n\n\u003cbr/\u003e\n\nYes, the ai not always 100% accurate, thats why i make prompt testing (which call real API not mocking) and unit test using [jest library](https://jestjs.io).\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eVoice Recognition is good enough?\u003c/summary\u003e\n\n\u003cbr/\u003e\n\nFor now i use [react speech recognition](https://github.com/JamesBrill/react-speech-recognition) package. the accuracy and the supported device is also based on that package.\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eIs the open ai API cost expensive?\u003c/summary\u003e\n\n\u003cbr/\u003e\n\nI try to do efficiency for each prompt so the cost is minimum and keep accurate.\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eHow can I provide information for my chatbot?\u003c/summary\u003e\n\n\u003cbr/\u003e\n\nThis package have something like initial knowledge. its some JSON that tell about:\n\n`What is your website about?` -\u003e so when the User ask the AI they can answer correctly.\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eIs it well documented and well crafted?\u003c/summary\u003e\n  \n  \u003cbr/\u003e\n\nYou can see the docs in this repo, and this package is written with typescript, and tested using jest to make sure the quality.\n\nYou don't have to read all the docs in here, because this package now support [VS Code IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) what is that? simply its when you hover your mouse into some variable or function [VS Code](https://code.visualstudio.com/) will show some popup (simple tutorial) what is the function about, examples, params, etc...\n\nJust use the source code from demo website, you can literally just understand the package.\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## G. Payment\n\n\u003cbr/\u003e\n\nThe price is only $140 USD.\n\nReact GPT Web Guide ($100) + [React Speech Highlight](https://github.com/albirrkarim/react-speech-highlight-demo) (~~$94~~)($40) = $140\n\n**What you got**\n\nAfter you pay you will be invited inside my private repo and stay inside for 1 year to receive any updates.\n\n- [The demo website (Next js based)](https://github.com/Web-XR-AI-lab/demo-website-gpt-web-guide)\n- All the private repo web version of [React Speech Highlight](https://github.com/albirrkarim/react-speech-highlight-demo?tab=readme-ov-file#the-web-version-react-and-vanilla-js)\n\n\u003cbr/\u003e\n\n### Payment method\n\nI accept various payment method:\n\n\u003ca href=\"https://github.com/sponsors/albirrkarim\" title=\"Github Sponsors\"\u003e\n    \u003cimg src=\"https://github.com/albirrkarim/laravel-react-starter-kit-pro/assets/29292018/00e008ed-8d31-4b4c-a54d-a53ac62d9f91\" width=\"350em\"\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\nIf you are in indonesia (my country) you can easily transfer through bank and e wallet (gopay, shopee pay, jenius)\n\n\u003cimg src=\"./img/payment.png\" width=\"350em\"\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# Keywords\n\nSo this package is the answer for you who looking for:\n\n- Web Accessibility Tools\n- web guide ai\n- AI Web Accessibility\n- react accessibility library\n- Conversational AI for Websites\n- 3d avatar that have control over website\n- can ai controll over web\n- Using AI to Enhance Web Accessibility\n- Web Metaverse NPC\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbirrkarim%2Fagent-support","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbirrkarim%2Fagent-support","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbirrkarim%2Fagent-support/lists"}