Introduction
The PlayAI web embed allows you to integrate AI-powered interactions into your web application. This guide will walk you through the process of setting up and using the PlayAI web embed in your React application.Installation
First, install the@play-ai/agent-web-sdk
package:
Basic Usage
Here’s a step-by-step guide to implement the play.ai web embed in your React application:1
Create an agent
If you haven’t already, create an agent on https://play.ai.
2
Import the necessary dependencies
3
Define your web embed ID
YOUR_WEB_EMBED_ID
with the actual ID provided by play.ai, which can be found in the Agent editor.
Find your web embed ID on the last page of the Agent editor under 'Deploy Web'
4
Define custom events (optional)
5
Implement the custom event handler (optional)
6
Initialize the web embed
useEffect
hook initializes the web embed when the component mounts. See all the parameters that can be passed to openEmbed()
here.7
Render the component
Full Example
Here’s the complete example of a React component using the play.ai web embed.Customization
You can customize the behavior of your AI agent by modifying the agent greeting and prompt. In this example, the agent is instructed to change the text on the page and end the call immediately after doing so.
The greeting and prompt for the Change Text demo agent