Superinterface logo
Superinterface
ProductPricingExamplesDocs
GitHub
Discord
Book a demo
Getting started
AI Provider Setup
OpenAI
Anthropic
Azure OpenAI
Assistants
Create assistant
Functions
API Request
Client tool
Firecrawl
Multi-agents
Interfaces
Choose interface
Publish interface
Components
Annotations
Concepts
Why Superinterface
How it works
API reference
React
Installation
Components
Hooks
JavaScript

How to Set Up a Client tool Function in Superinterface

Client tool Functions in Superinterface allow your assistant to interact with the page where the assistant is embedded. It enables it to retrieve user-specific information or automate tasks such as filling out forms. This opens up new possibilities for creating highly interactive and dynamic assistants.
In this guide, we’ll demonstrate how to set up a Client tool function in Superinterface to allow the assistant to interact directly with the frontend of your webpage, using two examples:
Filling out a form field independently by the assistant on the webpage, and
Retrieving an email address when a user is logged into their profile (authenticated).
Example setup for client tool functions.
Example setup for client tool functions.

Step One: Define the JavaScript Function in Your Webpage

To enable your assistant to interact with your webpage, you’ll need to create a functions in the page the assistant can use. These functions should be added directly to the codebase of your webpage where your assistant is embedded. Here's how to do it:

Example 1: Retrieve the User's Email

If your webpage displays a logged-in user's email, you first need to create a function that the assistant will use. Add the following code to your webpage:
<script> // replace 'user@example.com' with the actual email window.getEmailFromBrowser = () => 'user@example.com'; </script>
This function, called getEmailFromBrowser, is added to the global browser context (the window object). When called, it returns the email address, in this case, 'user@example.com'.

Example 2: Fill Out a Form Field

To enable the assistant to fill in a form field on the webpage, you first need to create a function like this:
<script> window.fillNameInput = ({ name }) => { document.getElementById("name-input").value = name; }; </script>
This function, fillNameInput, takes a name parameter and fills it into a text input field with the ID name-input.
Ensure the webpage includes any necessary input fields:
<input id="name-input" placeholder="Enter your name" />

What You’re Doing

Making the Function Accessible: By attaching these functions to the window object, you make them globally available for the assistant to use.
Setting Up the Assistant's Tools: These functions act as tools that your assistant can call when it needs to retrieve data or perform actions on the page.
You’ll use these functions in the next steps to configure and test your assistant. Make sure they are included in the <script> section of your webpage!

Additional Notes

Function Naming: You can name the function anything you like, but it’s essential to use the same name when setting it up in Superinterface under Function Name to ensure proper integration.
Returning a Value: Whatever value your function returns will be passed to the assistant, so ensure it accurately represents the information you want the assistant to use. Depending on your codebase:
If the data is stored in a variable (e.g., userInfo), the function should return that variable’s value. The function then could look like this:
<script> // replace with your actual variable const userInfo = { name: 'John Doe', email: 'user@example.com' }; window.getDataFromBrowser = () => userInfo; </script>
Asynchronous Functions: The function can also be asynchronous. If the required data needs to be fetched from an external source or involves a delay (e.g., a backend API request), you can use async/await to handle the operation and return the final value. The function could look like this:
<script> window.getDataFromBrowser = async () => { // replace with your actual backend API endpoint const response = await fetch('/api/get-user-data'); const data = await response.json(); return data; // Ensure this matches the structure of your API response }; </script>

Step Two: Create and Configure a New Function in Superinterface

Create a new function in your assistant's setup.
    Create or Edit an Assistant: Start by creating a new assistant or editing an existing one in your Superinterface dashboard.
    Navigate to the Functions Tab: Go to the Functions tab and click New Function.
    Choose Client tool: Select Client tool as the function type. This allows the assistant to interact with browser-level functions defined on the webpage.
    Set Up the Open JSON's Schema:
    The schema tells the assistant what the function does and how to use it. You can name the function in the JSON schema anything you like, as it is used only for the assistant’s understanding. For example:
Configure the function for fillNameInput.

Example 1: Retrieve the User's Email

For retrieving an email, the schema could look like this:
{ "name": "getEmail", "description": "Get user email address information." }

Example 2: Fill Out a Form Field

For filling a form field, the schema could look like this:
{ "name": "fillName", "parameters": { "type": "object", "properties": { "name": { "type": "string", "description": "Some name." } } }, "description": "Fills the name input." }
    Set the Function Name:
    The Function Name field in Superinterface must match the name of the function defined in your webpage. For example:
    For the email retrieval function, the field should be getEmailFromBrowser, matching the function in your webpage.
    For the form-filling function, it should be fillNameInput.
    Save the Function: Once you’ve completed the configuration, save the function, and it will be ready to use.

Step Three: Test the Integration

Test the Email Retrieval Function

    Open the assistant’s chat interface on your webpage.
    Trigger the assistant to call getEmailFromBrowser.
    Verify that the assistant retrieves the email (user@example.com) and includes it in its response.

Test the Form-Filling Function

    Open the webpage containing the input field.
    Ask the assistant to fill in a name (e.g., "Jessica").
    Confirm that the input field is updated with the specified value.

Example Code for Both Use Cases

Here’s a complete example combining both scenarios:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { background-image: linear-gradient(45deg, #cfc0ed 25%, #b3ac86 25%, #b3ac86 50%, #cfc0ed 50%, #cfc0ed 75%, #b3ac86 75%, #b3ac86 100%); background-size: 56.57px 56.57px; } </style> <script> window.getEmailFromBrowser = () => 'user@example.com'; window.fillNameInput = ({ name }) => { document.getElementById("name-input").value = name; }; </script> </head> <body> <input id="name-input" placeholder="Enter your name" /> <script async defer src="https://superinterface.ai/script-tags/{{scriptTagId}}?publicApiKey={{apiKey}}"></script> </body> </html>

Tips for Implementation

Use Script Tags: Ensure your client-side functions are defined within <script> tags and attached to the window object for global accessibility.
Browser Context: The assistant can only interact with elements or functions available on the current page.
User Permissions: Always comply with data privacy regulations when handling user information.

Ready to Publish?

Once you've configured and tested your Client tool function, it’s time to publish your assistant. Simply click Publish in your Superinterface dashboard to make your assistant live and ready to interact with your website’s users.
For advanced use cases or more tips on enhancing your assistants, check out Functions.