{"id":19848123,"url":"https://github.com/shunnnet/ai-vue-concept","last_synced_at":"2025-06-11T19:05:47.032Z","repository":{"id":199447220,"uuid":"702910003","full_name":"shunnNet/ai-vue-concept","owner":"shunnNet","description":"Demonstrate a concept that combine usage with Vue and LLM for browser AI UX","archived":false,"fork":false,"pushed_at":"2023-10-10T09:12:24.000Z","size":276,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T22:59:55.522Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/shunnNet.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}},"created_at":"2023-10-10T08:38:48.000Z","updated_at":"2024-01-19T10:29:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"5d31bc90-edc1-45aa-a7ca-06fe8b4ae26d","html_url":"https://github.com/shunnNet/ai-vue-concept","commit_stats":null,"previous_names":["shunnnet/ai-vue-concept"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shunnNet/ai-vue-concept","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fai-vue-concept","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fai-vue-concept/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fai-vue-concept/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fai-vue-concept/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shunnNet","download_url":"https://codeload.github.com/shunnNet/ai-vue-concept/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Fai-vue-concept/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259319526,"owners_count":22839789,"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":[],"created_at":"2024-11-12T13:16:13.021Z","updated_at":"2025-06-11T19:05:47.015Z","avatar_url":"https://github.com/shunnNet.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ai.vue concept demo\n\n[繁體中文](https://github.com/shunnNet/ai-vue-concept/blob/main/README.zh-tw.md)\n\nThis repository is a demo showcasing the integration of `Vue.js` with `OpenAI ChatGPT (LLM)`, creating a unique user experience on the web: accomplishing tasks through conversation.\n\nThe demo implements a simple business logic:\n1. It is a shopping website.\n2. Users need to select products.\n3. To proceed to checkout, users must log in.\n4. After selecting products and logging in, they can proceed to the checkout page.\n\nIn this demo, AI capabilities through Vue include:\n1. Completing a shopping process through chat.\n2. Displaying appropriate interfaces or calling specific functions based on business logic.\n3. Understanding the website's pages and elements, guiding users to navigate and providing explanations.\n\nThe goal is to develop this into a package in the future.\n\n## Play with demo\n1. Clone this repo\n\n2. Install dependencies\n\n\u003e Require `Node.js 16+` and `pnpm` installed\n```sh\npnpm install\n```\n\n3. Setup OpenAI API Key\nCreate a `.env` file in root folder, and put your API KEY there\n\n```env\nVITE_OPENAI_API_KEY=your-api-key\n```\n\n4. Run demo\n```sh\npnpm dev\n```\n\n## Concept\nHere, I will provide explanations and demonstrations for several key functionalities.\n\n- Service Agent\n- Navigator Agent\n- Page Agent\n- Render Completion\n\n### Service Agent\n[![service-agent](https://i.ytimg.com/vi/T9hUW7oWt-Q/maxresdefault.jpg)](https://www.youtube.com/watch?v=T9hUW7oWt-Q \"render-completion\") \n\n\u003e Click image to see the movie\n\nOn the `/` page, the chatbot enables users to complete the entire shopping process. I've incorporated business logic and user states into the prompt, and implemented it using `OpenAI` `function_call`.\n\nThe chatbot can dynamically decide whether to display the list of products or prompt the user to log in, based on the context. If the conditions are met, it will display the checkout form.\n\n### Navigator Agent\n[![find something](https://i.ytimg.com/vi/xzLdwHXStxM/maxresdefault.jpg)](https://www.youtube.com/watch?v=xzLdwHXStxM \"render-completion\") \n\n\u003e Click image to see the movie\n\nYou can invoke the `Navigator Agent` by clicking on the input box in the upper right corner of the website and selecting the chatbot on the `Find something` page from the popup.\n\nThis agent is aware of the pages present on the website and the elements on those pages. It can respond to your requests by navigating to different pages, scrolling the window to specific elements, and providing explanations as needed.\n\n### Page Agent\n[![explain-this-page](https://i.ytimg.com/vi/G2G_XLTv9dM/maxresdefault.jpg)](https://www.youtube.com/watch?v=G2G_XLTv9dM \"render-completion\") \n\n\u003e Click image to see the movie\n\nYou can invoke the this Agent by clicking on the input box in the upper right corner of the website and selecting the chatbot on the `Explain this page` tab from the popup.\n\nThis agent is aware of the elements present on the current page. It can provide explanations for these elements and, when necessary, display the specific elements for a more detailed explanation.\n\n### Render Completion\n[![render-completion](https://i.ytimg.com/vi/UrggY_zLBgU/maxresdefault.jpg)](https://www.youtube.com/watch?v=UrggY_zLBgU \"render-completion\")  \n\n\u003e Click image to see the movie\n\nReferring to the chatbot on the `RenderCompletion` page, the emphasis here is on the display of Vue components.\n\nThis structure is similar to the effect demonstrated in [ai.jsx](https://docs.ai-jsx.com/aboutAIJSX), essentially following a similar approach.\n\nThe current components are primarily conceptual in their display. \n\nThe advantage lies in the convenience of utilizing the results of `function_call` for component rendering, along with the ability to visualize decision trees. This approach makes interaction with components more straightforward compared to implementing `function_call` directly in JavaScript.\n\nI think this writing style quite enjoyable and interesting.\n\n```vue\n\u003ctemplate\u003e\n  \u003cMessageForm @submit=\"handleSubmit\" /\u003e\n   \u003c!-- The \u003cChatCompletion\u003e compoent will call chatCompletion in compoent, and provide it result to slots according to result--\u003e\n  \u003cChatCompletion v-if=\"msg\" :message=\"msg\"\u003e\n    \u003ctemplate #default=\"{ message }\"\u003e\n      \u003c!-- If the agent dont use function then show message--\u003e\n      \u003cdiv\u003eAi: {{ message }}\u003c/div\u003e\n    \u003c/template\u003e\n    \u003ctemplate #function\u003e\n      \u003c!-- Now the agent can choose this function or not--\u003e\n      \u003cChatCompletionTool\n        :func=\"showProductTool.func\"\n        :schema=\"showProductTool.schema\"\n        message=\"Successfully show a product.\"\n      \u003e\n        \u003ctemplate #loading\u003e\n          \u003cdiv\u003eshowProductTool: Loading.....\u003c/div\u003e\n        \u003c/template\u003e\n        \u003ctemplate #error\u003e\n          \u003cdiv\u003eshowProductTool: Error.....\u003c/div\u003e\n        \u003c/template\u003e\n\n        \u003c!-- After execute function, render default slot--\u003e\n        \u003ctemplate #default=\"{ result, message }\"\u003e\n          \u003cdiv\u003eAgent: {{ message }}\u003c/div\u003e\n          \u003cdiv class=\"max-w-[500px]\"\u003e\n            \u003cProductCardLine :product=\"result\" /\u003e\n          \u003c/div\u003e\n\n          \u003c!-- In default slot, we call ChatCompletion again, which will start new ChatCompletion, base on previous completion result--\u003e\n          \u003cChatCompletion message=\"Thanks for show me product\"\u003e\n            \u003ctemplate #default=\"{ message }\"\u003e\n              \u003cdiv\u003eAi: {{ message }}\u003c/div\u003e\n            \u003c/template\u003e\n            \u003ctemplate #thinking\u003e\n              \u003cdiv\u003eAi: Thinking.....\u003c/div\u003e\n            \u003c/template\u003e\n          \u003c/ChatCompletion\u003e\n        \u003c/template\u003e\n      \u003c/ChatCompletionTool\u003e\n    \u003c/template\u003e\n    \u003ctemplate #thinking\u003e\n      \u003cdiv\u003eAi: Thinking.....\u003c/div\u003e\n    \u003c/template\u003e\n  \u003c/ChatCompletion\u003e\n\u003c/template\u003e\n```\n\n## Thinking\n1. The functionality of using `LLM` to analyze web page information is expanding, as seen in the new AI feature, [arc-max](https://arc.net/max), introduced by the `arc` browser. This feature allows for a preview of the content summary on links. For similar reasons, I attempted to use the `v-ai` directive to add `data-ai-*` attributes to the DOM nodes, providing more information about the DOM nodes (and also for accessing and manipulating them). However, browsers already have accessibility feature, so it might be worth considering using that standard directly.\n\n2. I believe there is a need for a dedicated AI Agent on the browser side. If rendering components with LLM, displaying interface logic, or calling WebAPIs using LLM on the browser side is required, having a dedicated solution in the browser seems like a good choice. If concerns arise about running your own LLM, setting up a proxy server or serverless solution should suffice.\n\n3. Building on point 2, the tasks performed by an agent on the browser side differ from those on the server side. Browser-side tasks are more specific, providing an enhanced UX with added AI capabilities. In such cases, [LangChain](https://www.langchain.com/) might not be necessary. While comprehensive and valuable to learn, it seems a bit too complex for my needs. If possible, I would prefer a simpler and more straightforward LLM package.\n\n## Reference\n- [ai.jsx](https://docs.ai-jsx.com/aboutAIJSX)\n- [langchain](https://www.langchain.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Fai-vue-concept","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshunnnet%2Fai-vue-concept","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Fai-vue-concept/lists"}