Frontend Javascript

This guide shows how to integrate IntelliNode on your browser. You can load intellinode.min.js via CDN and quickly call AI models such as OpenAI, Anthropic, Cohere, Mistral, Gemini, Nvidia, OpenRouter and Stability AI directly from the browser without backend infrastructure.

Key Features:

🤖 Multi-Provider Support: Unified API for multiple AI providers, including the OpenAI-compatible services.
💬 Chat Models: GPT-5.5, Claude Sonnet 5, Command A, Mistral, and more.
🛠️ Tool calling and JSON: runTools and chatJson work in the browser as in Node.
🎨 Image Generation & Transformation: Stability AI integration with style controls.
🔄 Streaming Support: Real-time response streaming for chat models.
📦 Zero Dependencies: Self-contained browser library (the Node-only pieces, the MCP server and the coding agent, are left out).

1. Include Intellinode via CDN

Add a <script> tag in your HTML:

<script src="https://cdn.jsdelivr.net/npm/intellinode@latest/front/intellinode.min.js"></script>

Alternative mirror link:

<script src="https://unpkg.com/intellinode@latest/front/intellinode.min.js"></script>

Once loaded, all IntelliNode classes are available under the global IntelliNode namespace.

2. Call the Chatbot

The Chatbot class provides a unified interface for interacting with multiple AI chat models. It supports conversation history, streaming responses, and model-specific configurations.

OpenAI Code

OpenAI models including GPT-5.5 (default), GPT-5.4 and GPT-4.1 are supported.

async function callOpenAI(apiKey, userPrompt) {
  try {
    // Create a chatbot for "openai"
    const chatbot = new IntelliNode.Chatbot(apiKey, "openai");

    // Prepare ChatGPT input with optional parameters
    const input = new IntelliNode.ChatGPTInput("You are a helpful assistant.", {
      model: "gpt-5.5",
    });
    input.addUserMessage(userPrompt);

    // Get response
    const responses = await chatbot.chat(input);
    return responses[0] || "(No response)";
  } catch (err) {
    return "OpenAI Error: " + err.message;
  }
}

Usage Example:

const apiKey = "<YOUR_OPENAI_KEY>";
const openaiResult = await callOpenAI(apiKey, "Explain AI in simple terms.");
console.log("OpenAI says:", openaiResult);

Multi-turn Conversation:

const input = new IntelliNode.ChatGPTInput("You are a helpful assistant.", {
  model: "gpt-5.5"
});
input.addUserMessage("What is the capital of France?");
input.addAssistantMessage("The capital of France is Paris.");
input.addUserMessage("What's the population?");
// Continue the conversation with context

Anthropic Code

Claude models work from the browser; the library sends the header Anthropic requires for direct browser access.

async function callClaude(apiKey, userPrompt) {
  try {
    const chatbot = new IntelliNode.Chatbot(apiKey, "anthropic");

    const input = new IntelliNode.AnthropicInput("You are a helpful assistant.", {
      model: "claude-sonnet-5",     // or claude-opus-5, claude-fable-5-1, claude-haiku-4-5
      maxTokens: 2048
    });
    input.addUserMessage(userPrompt);

    const responses = await chatbot.chat(input);
    return responses[0] || "(No response)";
  } catch (err) {
    return "Anthropic Error: " + err.message;
  }
}

Cohere Code

Cohere provides powerful language models optimized for conversation and command execution.

async function callCohere(apiKey, userPrompt) {
  try {
    // Create a chatbot for "cohere"
    const chatbot = new IntelliNode.Chatbot(apiKey, "cohere");

    // Prepare Cohere input with optional parameters
    const input = new IntelliNode.CohereInput("You are a helpful assistant.", {
      model: "command-a-03-2025",  // Supported: command-a-03-2025, command-a-plus-05-2026, command-r7b-12-2024
      temperature: 0.7,             // Control creativity
      max_tokens: 1000              // Maximum response length
    });
    input.addUserMessage(userPrompt);

    // Get response
    const responses = await chatbot.chat(input);
    return responses[0] || "(No response)";
  } catch (err) {
    return "Cohere Error: " + err.message;
  }
}

Usage Example:

const cohereKey = "<YOUR_COHERE_KEY>";
const cohereResult = await callCohere(cohereKey, "What are the latest trends in AI?");
console.log("Cohere says:", cohereResult);

Mistral Code

Mistral AI offers efficient and powerful open-source models.

async function callMistral(apiKey, userPrompt) {
  try {
    const chatbot = new IntelliNode.Chatbot(apiKey, "mistral");
    
    const input = new IntelliNode.MistralInput("You are a helpful assistant.", {
      model: "mistral-medium-latest",  // Supported: mistral-medium-latest, mistral-small-latest, magistral-medium-latest
      temperature: 0.7,
      max_tokens: 1000
    });
    input.addUserMessage(userPrompt);
    
    const responses = await chatbot.chat(input);
    return responses[0] || "(No response)";
  } catch (err) {
    return "Mistral Error: " + err.message;
  }
}

Nvidia Code

Access cutting-edge models through Nvidia's inference platform.

async function callNvidia(apiKey, userPrompt) {
  try {
    const chatbot = new IntelliNode.Chatbot(apiKey, "nvidia");
    
    const input = new IntelliNode.NvidiaInput("You are a helpful assistant.", {
      model: "deepseek-ai/deepseek-v4-flash-0731",  // or another model from build.nvidia.com
      temperature: 0.7,
      max_tokens: 1024
    });
    input.addUserMessage(userPrompt);
    
    const responses = await chatbot.chat(input);
    return responses[0] || "(No response)";
  } catch (err) {
    return "Nvidia Error: " + err.message;
  }
}

Gemini Code

Google's Gemini models for advanced AI capabilities.

async function callGemini(apiKey, userPrompt) {
  try {
    const chatbot = new IntelliNode.Chatbot(apiKey, "gemini");
    
    const input = new IntelliNode.GeminiInput("You are a helpful assistant.", {
      model: "gemini-3.6-flash",
      temperature: 0.7
    });
    input.addUserMessage(userPrompt);
    
    const responses = await chatbot.chat(input);
    return responses[0] || "(No response)";
  } catch (err) {
    return "Gemini Error: " + err.message;
  }
}

Tool calling and JSON output

The tool loop and the structured output work in the browser too:

const tools = [{
  name: "get_weather",
  description: "Current weather for a city",
  parameters: { type: "object", properties: { city: { type: "string" } }, required: ["city"] },
  handler: async ({ city }) => ({ city, tempC: 22 }),
}];

const chatbot = new IntelliNode.Chatbot(apiKey, "openai");
const input = new IntelliNode.ChatGPTInput("You are a weather assistant.");
input.addUserMessage("What is the weather in Paris?");

const { text } = await chatbot.runTools(input, tools);

const jsonInput = new IntelliNode.ChatGPTInput("Answer as JSON.", {
  responseSchema: { type: "object", properties: { city: { type: "string" } } }
});
jsonInput.addUserMessage("Where is the Eiffel Tower?");
const data = await chatbot.chatJson(jsonInput);   // { city: "Paris" }

OpenRouter and the other OpenAI-compatible services that allow browser requests work through new IntelliNode.Chatbot(key, "openrouter") with IntelliNode.OpenAICompatibleInput.

3. Image Generation & Transformation

Stability AI provides powerful image generation and transformation capabilities with three control methods: Style, Sketch, and Structure.

Control Style

Transform images with artistic styles while maintaining the original content. Optional parameters include negative_prompt, fidelity (0-1, how close to original), aspect_ratio, and seed.

async function applyStyle(stabilityKey, imageFile, stylePrompt) {
  try {
    const stability = new IntelliNode.StabilityAIWrapper(stabilityKey);

    // Call the controlStyle function with the image file and style prompt
    const rawResult = await stability.controlStyle({
      imagePath: imageFile,
      prompt: stylePrompt,
      output_format: 'png',
      accept: 'image/*'
    });

    // Convert the binary result into an image URL
    const blob = new Blob([rawResult], { type: 'image/png' });
    return URL.createObjectURL(blob);
  } catch (err) {
    return 'Stability Error: ' + err.message;
  }
}

Usage Example:

const stabilityKey = "<YOUR_STABILITY_KEY>";
const imageFile = document.getElementById('imageInput').files[0];
const stylePrompt = "Vintage oil painting style with warm colors";
const styledImageUrl = await applyStyle(stabilityKey, imageFile, stylePrompt);
document.getElementById('styledImage').src = styledImageUrl;

Control Sketch

Convert images to sketches and apply new artistic styles. Optional parameters include control_strength (0-1, how much to follow the sketch), negative_prompt, seed, and style_preset.

async function applySketch(stabilityKey, imageFile, prompt) {
  try {
    const stability = new IntelliNode.StabilityAIWrapper(stabilityKey);

    const rawResult = await stability.controlSketch({
      imagePath: imageFile,
      prompt: prompt,
      output_format: 'png',
      accept: 'image/*'
    });

    const blob = new Blob([rawResult], { type: 'image/png' });
    return URL.createObjectURL(blob);
  } catch (err) {
    return 'Sketch Error: ' + err.message;
  }
}

Control Structure

Maintain the structure while changing the appearance completely.

async function applyStructure(stabilityKey, imageFile, prompt) {
  try {
    const stability = new IntelliNode.StabilityAIWrapper(stabilityKey);

    const rawResult = await stability.controlStructure({
      imagePath: imageFile,
      prompt: prompt,
      control_strength: 0.7,         // Structural adherence (0-1)
      output_format: 'png',
      accept: 'image/*'
    });

    const blob = new Blob([rawResult], { type: 'image/png' });
    return URL.createObjectURL(blob);
  } catch (err) {
    return 'Structure Error: ' + err.message;
  }
}

Image Requirements:

Minimum dimensions: 64x64 pixels.
Supported formats: JPEG, PNG, WebP.

HTML Samples

IntelliNode provides ready-to-use frontend samples:

Chat Playground (index.html): Multi-provider chat interface.
Stability Control Studio (style_studio.html): Image transformation with Style, Sketch, and Structure control methods.
HTML Generator (html_generator.html): AI-powered website generator using LLMs with live preview and download.

📂 Open GitHub Samples

Notes

Avoid embedding raw API keys directly in your front-end code, and let the user enter their keys.
This browser-based approach has been tested with OpenAI, Anthropic and Cohere models.
Some providers block browser requests with CORS; a small backend or the openai_compatible provider pointed at your own proxy solves that.

Frontend Javascript

1. Include Intellinode via CDN​

2. Call the Chatbot​

OpenAI Code​

Anthropic Code​

Cohere Code​

Mistral Code​

Nvidia Code​

Gemini Code​

Tool calling and JSON output​

3. Image Generation & Transformation​

Control Style​

Control Sketch​

Control Structure​

HTML Samples​

Notes​

1. Include Intellinode via CDN

2. Call the Chatbot

OpenAI Code

Anthropic Code

Cohere Code

Mistral Code

Nvidia Code

Gemini Code

Tool calling and JSON output

3. Image Generation & Transformation

Control Style

Control Sketch

Control Structure

HTML Samples

Notes