VanillaJS Web Components
is a lightweight, easy-to-use library for integrating AI-powered terms and chat components into your web projects. Using standard HTML5 web components, it allows for seamless addition of AI-driven elements to enhance user interaction.
Table of Contents
Installation
Simply include the library in your HTML file. Add the following script tag as the first element inside the <body> tag:
<body>
<script src="https://github.com/cryptNG/ai-term-vanillajs/ai-term.js" crossorigin="anonymous"></script>
<!-- Your content goes here -->
</body>Usage
Element
To use the <ai-term> component, wrap the term you want to enhance within the <ai-term> element. For example:
<h1 class="page-title">
The <ai-term>Privacy-Friendly</ai-term> Alternative for Secure, User-Respecting Web Human Verification
</h1>Chat Box
To add an AI-powered chat interface, include the <ai-term-chat> element towards the end of your body content. Provide your API key and optional configuration options as attributes:
<ai-term-chat api-key="your_api_key" options="{context:'page'}"></ai-term-chat>Configuration
-
api-key: Your unique API key for accessing AI services. -
options: A JSON object with configuration settings. For example,{context:'page'}sets the context to the current page content.
Examples
Here are some examples of how to use in your project:
-
Basic Term Highlighting:
<ai-term>Term</ai-term> -
Chat Interface:
<ai-term-chat api-key="your_api_key"></ai-term-chat>
Support
For support, issues, or contributions, please visit the GitHub repository.