{"id":14520089,"url":"https://github.com/arolleaguekeng/ng-flexbot","last_synced_at":"2025-10-31T02:58:38.117Z","repository":{"id":248950728,"uuid":"830265974","full_name":"arolleaguekeng/ng-flexbot","owner":"arolleaguekeng","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-30T04:55:01.000Z","size":971,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T18:51:36.943Z","etag":null,"topics":["angular","chatbot","gemini","gemini-api","gpt-4"],"latest_commit_sha":null,"homepage":"","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/arolleaguekeng.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-07-18T00:07:04.000Z","updated_at":"2025-07-24T14:37:36.000Z","dependencies_parsed_at":"2024-09-04T04:04:44.723Z","dependency_job_id":"706f1289-c047-4846-89f7-494fbbcfcff1","html_url":"https://github.com/arolleaguekeng/ng-flexbot","commit_stats":null,"previous_names":["arolleaguekeng/ng-flexbot"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/arolleaguekeng/ng-flexbot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arolleaguekeng%2Fng-flexbot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arolleaguekeng%2Fng-flexbot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arolleaguekeng%2Fng-flexbot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arolleaguekeng%2Fng-flexbot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arolleaguekeng","download_url":"https://codeload.github.com/arolleaguekeng/ng-flexbot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arolleaguekeng%2Fng-flexbot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281920153,"owners_count":26583946,"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","status":"online","status_checked_at":"2025-10-31T02:00:07.401Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["angular","chatbot","gemini","gemini-api","gpt-4"],"created_at":"2024-09-04T04:01:27.904Z","updated_at":"2025-10-31T02:58:38.087Z","avatar_url":"https://github.com/arolleaguekeng.png","language":"TypeScript","funding_links":[],"categories":["Table of contents","Recently Updated"],"sub_categories":["Angular","[Sep 03, 2024](/content/2024/09/03/README.md)"],"readme":"# ng-flexbot\n\n\nWelcome to `ng-flexbot`! 🚀\n\n**ng-flexbot** is an open-source Angular UI library designed to create chatbots with just a few lines of code. It allows you to select from various models, such as GPT and Google Gemini, and customize the chatbot’s behavior using a prompt context.\n\n## Why ng-flexbot?\n\n![ng-flexbot Logo](https://github.com/arolleaguekeng/ng-flexbot/blob/main/ng-flexbot-logo.png)\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\n[![npm version](https://img.shields.io/npm/v/ng-flexbot)](https://www.npmjs.com/package/ng-flexbot)\n[![GitHub pull request check state](https://img.shields.io/github/status/s/pulls/arolleaguekeng/ng-flexbot/15)](https://github.com/arolleaguekeng/ng-flexbot/pulls)\nAre you looking for a streamlined way to integrate chatbots into your Angular applications? **ng-flexbot** simplifies this process by providing an easy-to-use UI component that integrates with popular language models. With ng-flexbot, you can:\n\n- Quickly add a chatbot to your Angular app with minimal setup.\n- Choose from a range of language models, including GPT and Google Gemini.\n- Customize the chatbot’s focus with a prompt context.\n\nAnd that’s not all! We’re continuously improving ng-flexbot and have exciting plans for future updates.\n\n## Key Features\n\n- **Easy Integration:** Simple setup with a few lines of code.\n- **Model Selection:** Choose from various language models, including:\n  - [OpenAI GPT](https://platform.openai.com/)\n  - [Google Gemini](http://ai.google.dev/gemini-api)\n- **Prompt Context:** Define the subject the chatbot will focus on.\n\n## Installation\n\nTo get started with `ng-flexbot`, install it as an npm package:\n\n```bash\nnpm install ng-flexbot\n```\n\n## Usage\n\nHere’s a quick example of how to use `ng-flexbot` in your Angular project:\n\nwrite this configuration on your `app.config.ts` file\n\n```typescript\nimport { provideHttpClient, withFetch } from '@angular/common/http';\nimport { provideMarkdown } from 'ngx-markdown';\nexport const appConfig: ApplicationConfig = {\n  providers: [provideHttpClient(withFetch()), provideMarkdown()],\n};\n```\n\n### HTML\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003clib-ng-flexbot\n   [googleApikey]=\"googleApikey\" \n   [openaiApikey]=\"openaiApikey\" \n   [promptContext]=\"promptContext\" \n   [textModel]=\"textModel\" \n   [imageModel]=\"imageModel\" \n   [title]=\"title\" \n   [welcomeMessage]=\"welcomeMessage\"\n  /\u003e\n\u003c/div\u003e\n```\n\n### TypeScript\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NgFlexbotComponent } from 'ng-flexbot';\nimport { FlexbotCurrentImageModel, FlexbotCurrentTextModel } from '@ng-flexbot/ng-flexbot/models/flexbot-current-llm.enum';\n\n\n@Component({\n  standalone: true,\n  imports: [NgFlexbotComponent],\n  selector: 'app-root',\n    styles: [\n    `\n      .container {\n        height: 100vh;\n      }\n    `,\n  ],\n})\nexport class AppComponent {\n  title = 'flexbot-demo';\n  googleApikey = \"[YOUR_GOOGLE_API_KEY]\";\n  openaiApikey = \"[YOUR_OPENAI_API_KEY]\";\n  promptContext = \"you only know questions about Angular\"\n  textModel = FlexbotCurrentTextModel.GOOGLE_GEMINI_PRO;\n  imageModel = FlexbotCurrentImageModel.OPEN_AI_GPT_4o_MINI;\n  welcomeMessage = \"Welcome to Flexbot!\";\n}\n```\n\n## API Keys\n\nTo use `ng-flexbot`, you need API keys for the selected language models. You can obtain these keys from the following platforms:\n\n- [OpenAI](https://platform.openai.com/)\n- [Google Gemini](https://cloud.google.com/gemini)\n\n## Available Models\n\n**ng-flexbot** supports the following models:\n\n### Text Models\n\n- **Google Models**\n\n  - `GOOGLE_GEMINI_PRO` (`google/gemini-pro`)\n  - `GOOGLE_MEDULLA_2` (`google/medulla-2`)\n\n- **OpenAI models**\n  - `OPEN_AI_GPT_3` (`openai/gpt-3`)\n  - `OPEN_AI_GPT_3_CHAT` (`openai/gpt-3-chat`)\n  - `OPEN_AI_GPT_4` (`openai/gpt-4`)\n  - `OPEN_AI_GPT_4_TURBO` (`openai/gpt-4-turbo`)\n  - `OPEN_AI_GPT_3_5_TURBO` (`openai/gpt-3.5-turbo`)\n  - `OPEN_AI_TEXT_DAVINCI_003` (`openai/text-davinci-003`)\n\n### Image Models\n\n- **Google Models**\n\n  - `GOOGLE_GEMINI_1_5_FLASH` (`google/gemini-1.5-flash`)\n\n- **OpenAI Models**\n  - `OPEN_AI_DALL_E_3` (`openai/dall-e-3`)\n  - `OPEN_AI_DALL_E_2` (`openai/dall-e-2`)\n\n## Contributions\n\nWe welcome contributions from the community! Since `ng-flexbot` is a monorepo created with Nx, please follow these steps to contribute:\n\n1. Fork this repository.\n2. Clone your fork and navigate to the `ng-flexbot` directory:\n   ```bash\n   git clone https://github.com/your-username/ng-flexbot.git\n   cd ng-flexbot\n   ```\n3. Install dependencies and set up the Nx workspace:\n   ```bash\n   npm install\n   npx nx install\n   ```\n4. Create your feature branch:\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n5. Make your changes and test them using Nx commands:\n   ```bash\n   npx nx test\n   npx nx build\n   ```\n6. Commit your changes:\n   ```bash\n   git commit -m 'Adding a new feature'\n   ```\n7. Push your branch:\n   ```bash\n   git push origin feature/your-feature-name\n   ```\n8. Open a pull request on GitHub.\n\n**We appreciate all contributions, big or small!**\n\n## License\n\nThis project is licensed under the MIT License. For more details, see the [LICENSE.md](https://github.com/arolleaguekeng/ng-flexbot/blob/main/LICENSE.md) file or visit the [MIT License Website](https://choosealicense.com/licenses/mit/).\n\n## Feedback\n\nIf you have any feedback, please reach out to us at [arolleaguekeng@gmail.com](mailto:arolleaguekeng@gmail.com).\n\n#Angular #Chatbot #OpenSource #UI #JavaScript #Innovation #gemini #chatgpt #AngularLibrary #ChatbotUI\n#AngularComponents\n#DeveloperTools #AI\n#MachineLearning\n#GPT\n#GoogleGemini\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farolleaguekeng%2Fng-flexbot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farolleaguekeng%2Fng-flexbot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farolleaguekeng%2Fng-flexbot/lists"}