VoiceVision - AI Assistant with Client Side Function Call
How to create a AI assistant with Client Side Function Call
Integrating Client-Side Function Calls into Your AI Assistant with VoiceVision
In this tutorial, we’ll guide you through integrating client-side function calls into your AI assistant. By leveraging this feature, you can enable real-time interactions, allowing your AI assistant to execute predefined functions dynamically.
What Are Client-Side Function Calls?
Client-side function calling enables AI models to interpret user inputs in real-time and trigger specific functions directly on the client’s device. This improves interactivity and responsiveness, creating a more engaging user experience.
Important Note:
Client-side function calling is only available when using the real-time voice option in your assistant. Before proceeding, ensure that real-time voice interactions are enabled.
Creating a Real-Time T-Shirt Designer Assistant
In this tutorial, we’ll demonstrate how to build a real-time T-shirt designer assistant. Users can modify the following design options in real-time:
- T-shirt Color
- Text
- Text Color
- Logo Color
This setup allows users to experience live design modifications while interacting with the AI assistant.
Step 1: Create a New Assistant with Client-Side Function Calls
Navigate to the Assistant Dashboard.
Click the “New Assistant” button.
Select the ‘Simple Assistant’ option.
Enter a Display Name and Welcome Message.
Enter an Instruction Prompt.
Ensure your instruction prompt includes a function call mapping system.
You can refer to our sample instruction prompt on the documentation page.
Select an AI Model.
Enable the Voice Option and choose a Voice Name.
Click the “Create” button.
Step 2: Configure Advanced Settings for Real-Time AI Interaction
Go to the Assistant’s Settings Page.
Click on the ‘Advanced Settings’ tab.
Enable the ‘Real-Time AI Voice Assistant’ option.
Select the AI Model.
Enable ‘Client-Side Function Call’ option.
Enter the Client-Side Function JSON value.
You can find our sample JSON format in the documentation.
Enable the ‘Push to Talk’ option for an improved user experience.
Click “Save” to update your assistant.
Step 3: Download and Explore the Sample Application
The "T-shirt Design Change" application is available on our GitHub page (https://github.com/voicevisionchat/t-shirt-design). You can download it and explore how it interacts with client-side functions. Web Application Project Code : AI T-Shirt Designer
Step 4: Integrate the Assistant into Your Web Application
To integrate your AI assistant chatbot into a web application, use our embedded JavaScript code. Check our sample application for a detailed implementation guide.
Instruction prompt
You are an AI Assistant designed to help users create their custom T-shirts. Your role is to provide guidance on T-shirt design,
user can change the below elements in T-shirt design
1. t-shirt color : convert color name to Three.js color (X11 color name) 140 color names are supported
2. text : make sure text should be max 3 words
3. text color : convert color name to Three.js color (X11 color name) 140 color names are supported
4. logo Color : convert color name to Three.js color (X11 color name) 140 color names are supported
Offer creative suggestions based on user preferences and ensure a smooth design process. ask user which element they want to change. If the user requests a change in any one of the four design elements, invoke the tool function as shown below:
{
"tool_call_map" : [
{
"tool_name" : "change_color",
"change_request" : "t-shirt color"
},
{
"tool_name" : "change_text",
"change_request" : "text"
},
{
"tool_name" : "text_color",
"change_request" : "text color"
},
{
"tool_name" : "logo_color",
"change_request" : "logo color"
},
]
}
Stay Focused: Only assist with T-shirt design; do not answer unrelated questions.
Engagement: Ask clarifying questions to understand user preferences and provide relevant recommendations.
Concise Guidance: Keep responses clear and actionable while encouraging creativity.
If speaking in another language, use a native accent.Client-side function call JSON
{
"tools": [
{
"type": "function",
"name": "change_color",
"description": "change the t-shirt color, when the user is asking about it",
"parameters": {
"type": "object",
"properties": {
"color": {
"type": "string",
"description": "The name of the color to change t-shirt color"
}
},
"required": [
"color"
]
}
},
{
"type": "function",
"name": "change_text",
"description": "change the t-shirt text content, when the user is asking about it",
"parameters": {
"type": "object",
"properties": {
"text": {
"type": "string",
"description": "The name of the t-shirt text content"
}
},
"required": [
"text"
]
}
},
{
"type": "function",
"name": "change_text_color",
"description": "change the t-shirt text color, when the user is asking about it",
"parameters": {
"type": "object",
"properties": {
"text_color": {
"type": "string",
"description": "The name of the t-shirt text"
}
},
"required": [
"text_color"
]
}
},
{
"type": "function",
"name": "change_logo_color",
"description": "change the t-shirt logo color, when the user is asking about it",
"parameters": {
"type": "object",
"properties": {
"logo_color": {
"type": "string",
"description": "The name of the t-shirt logo color"
}
},
"required": [
"logo_color"
]
}
},
{
"type": "function",
"name": "reset_design",
"description": "When the user says that they want reset the design, restart the design. clear out all design and reset with default design",
"parameters": {}
}
]
}