🧠 Agentic Stack JS: Edge AI Web Components

Build powerful, agentic applications directly in the browser using Google's Edge AI capabilities. This library provides a set of high-performance, plug-and-play Web Components for running LLMs, embeddings, and complex reasoning tasks entirely on the client side.

Key Features:

• 🧠 On-Device LLMs: Run Gemma 4 and other models locally without server costs.
• 🔍 Vector Search: Implement Retrieval-Augmented Generation (RAG) and semantic search entirely in the browser.
• 🛠️ Tool Use: Integrate external APIs (Web Search, Memory, etc.) directly into your agents via the Toolbox.
• 🌐 Web Standards: Pure Web Components for maximum compatibility across modern browsers.

🚀 Getting Started

1. Installation

Install the package via npm:

npm i agentic-stack-js-web-components

2. Basic HTML Setup

Include the script module in your index.html file:

<script type="module" src="../node_modules/agentic-stack-js-web-components/dist/agenticstack.js"></script>

3. Prerequisites & Model Assets

Before running, you must host your model assets on your server.

[!IMPORTANT] Model Note:

• Gemma 4: Only models $\ge$ 4 are supported.
• download at huggingface gemma 4 2B
• Prompt Structure: v2.0.0 introduced a breaking change to the Gemma 4 prompt structure. Please review the Gemma 4 Prompt Structure Guide.

🔗 Official Documentation:

• Google Edge AI Guide
• MediaPipe Web Setup

🛠️ Component Examples

💬 Chatbot Component(<asjs-chatbot>)

The core component for conversational AI.

<asjs-chatbot 
  id="my-agent" 
  model-asset-path="/your-assets/mediapipemodels/gemma-4-E2B-it-web.task" 
  display-partial-results 
  max-tokens="8192" 
  temperature="1.0">
</asjs-chatbot>

🔍 Text Embedding (<asjs-embedding>)

Use this for generating vector representations of text.

<asjs-embedding 
  show-ui 
  quantize="true"
  model-asset-path="/assets/mediapipemodels/universal_sentence_encoder.tflite">
</asjs-embedding>

📊 Text Classification (<asjs-text-classification>)

Classify text nodes using a pre-trained model.

<asjs-text-classification 
  show-ui 
  asjs-event="model-ready" 
  model-asset-path="/assets/mediapipe-tasks/text_classifier/bert_text_classifier.tflite" 
  display-names-local="en">
</asjs-text-classification>

<script>
  document.addEventListener('model-ready', (e) => {
    console.log("Text model is ready to use!");
  }, true);
</script>

🗄️ Vector Search (<asjs-vector-search>)

Implement RAG by indexing and querying documents locally.

• if the attribute "wasm-path" is not set the default path is "/@mediapipe/tasks-text/wasm"

<asjs-vector-search 
  show-ui 
  form="your-form" 
  model-asset-path="/path/to/universal_sentence_encoder.tflite"
  wasm-path="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/wasm">
</asjs-vector-search>

<script>
  document.addEventListener('event-vector-model-ready', (e) => {
    console.log("vector model is ready to use!");
  }, true);
</script>

Usage Example (JS):

const comp = document.querySelector('asjs-vector-search');
comp.addEventListener('embedding-ready', async () => {
  // Insert a document
  await comp.insert({ text: 'Sample document content' });
  
  // Query the index
  let results = await comp.query('Sample');
  console.log("Search results:", results);
});

🛠️ Advanced Agent Features (v2.0.0+)## 🤖 Tool Use & The Toolbox

The toolbox attribute enables your chatbot to use external tools, such as web search. Example:

<asjs-chatbot 
    id="my-chat"
    toolbox 
    display-partial-results 
    model-asset-path="/path/to/model">
</asjs-chatbot>

To trigger the web search tool, use the @web tag in the prompt input:

Input: @web history of the Los Angeles Dodgers

🧠 Chain-of-Thought (CoT) with thinkMode

The thinkMode method allows the LLM to execute a sequence of reasoning steps iteratively. Conceptual Example:

async function solveComplexProblem(chatbotInstance) {
  const reasoningSteps = [
    { question: "Step 1: Calculate the head start distance.", context: "..." },
    { question: "Step 2: Calculate the remaining distance.", context: "..." }
  ];
  
  const systemPrompt = "You are a precise mathematical assistant. Follow the steps provided exactly.";

  try {
    const result = await chatbotInstance.thinkMode(
      reasoningSteps, 
      systemPrompt, 
      { maxSteps: 5, maxTokenLimit: 2048 }
    );
    console.log("Final Scratchpad:", result.data);
  } catch (error) {
    console.error("ThinkMode Failed:", error.message);
  }
}

📜 Changelog

v2.0.4 - July 12 26 - Minor Update

🛠️ Bug Fixes & Tools

• Vector Search Fixes: added the attribute "wasm-path" to asjs-vector-search component.

<asjs-vector-search
   ...
   wasm-path="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/wasm/genai_wasm_internal.wasm"/>

v2.0.3 - July 10 26 - Minor Update

🛠️ Bug Fixes & Tools

• Chatbot Fixes: added asjs-chatbot attribute "wasm-path".

<asja-chatbot 
   ...
   wasm-path="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/wasm/genai_wasm_internal.wasm"/>

• Chatbot CSS Vars: added more vars for the messages --chat-message

v2.0.2 - July 9 26 - Minor Update

🛠️ Bug Fixes & Tools

• Chatbot Fixes: The chatbot works now with out the toolbox attribute. The toolbox is optional.
• Search Tool Fixes: Resolved bugs within the @web search tool.

v2.0.1 - May 9 26 - Minor Update

✨ Features & Improvements

• Chatbot Enhancement: Implemented LLM configuration setup and cleaned up the chatbot interface.
• Security: Integrated DOMPurify to ensure all chatbot responses are sanitized and safe.
• Styling: Added CSS variables to allow for easier and more granular style control across the application.

🛠️ Bug Fixes & Tools

• Search Tool Fixes: Resolved bugs within the @web search tool.
• Advanced Search Example: The @web tool now supports detailed querying. For example: @web --topic LA Dodgers --query "total number of world series titles won" --limit 5 --chunks 10

(This command will search Wikipedia and retrieve 10 paragraphs of relevant data.)

v2.0.0 (April 6, 2026) - 🌟 Major Release

• Breaking Change: Updated chat_history component to support the Gemma 4 prompt structure.
• New: Introduced the toolbox attribute and system tools (e.g., @web).
• New: chatbot.ask(question, context, system_prompt) method for controlled Q&A.

v1.2.15 (April 2, 2026) - Minor Update

• Updated @mediapipe/tasks-genai to confirm compatibility with Gemma 4 E2B/E4B.
• Enhanced @web tool to include necessary user-agent headers for external APIs.

v1.0.7 (July 14, 2025) - Initial Release

• Introduced asjs-embedding component based on @mediapipe/tasks-text.
• asjs-chatbot is now a module export, allowing for class extension.

🤝 Contact & License

• Contact: [email protected]
• License: Apache-2.0 License
• Documentation: agenticstackjs.com