🥳 Integration

Use the xPrompt React component to integrate xPrompt into your app.

We are working on a few other integration methods as well. Please get in touch if the React component is the optimal integration path for you.

Install the React component

Using npm:

npm install @xprompt.ai/react-gpt

Using yarn:

yarn add @xprompt.ai/react-gpt

Using pnpm:

pnpm add @xprompt.ai/react-gpt

Props

Prop	Description	Default
bgColor	Background color of the chat component	#e4e4e4
userColor	User chat message background color	#e4e4e4
userTextColor	User chat message text color	#000000
botColor	Bot chat message background color	#dbdbdb
botTextColor	Bot chat message text color	#000000
inputTextColor	New chat message input control's text color	#C9C9C9
inputBgColor	New chat message input control's background color	#222222
config*	See below for details

config Prop

Identifies the target backend app and provides the authentication data for the backend app. Authentication data is used to execute the REST API calls against the target app. Please create an app specification on www.xprompt.ai and use the name provided in the app spec as the appName below.

{
  "appId": "", <- this UUID identifies the backend app. Create an app spec on www.xprompt.ai
  "authData": { <- authentication data for the backend app —- used for executing the translated REST API calls 
    "location": "query", <- where to include the auth. Options are query | header
    "auth": { <- auth object
      
    }
  }
}

Code Sample

Below is a complete code sample for integrating the chat window into your app using the React component. Be sure to set the correct auth params and the app ID for your app.

import './App.css';
import { ChatWindow, ChatWindowProps } from '@xprompt.ai/react-gpt';

const chatWindowProps: ChatWindowProps = {
  bgColor: "#e4e4e4",
  userColor: "#e4e4e4",
  userTextColor: "#000000",
  botColor: "#dbdbdb",
  botTextColor: "#000000",
  inputTextColor: "#C9C9C9",
  inputBgColor: "#222222",
  config: {
    appId: "XXXX-3052-XXXX-875e-cde2XXX829a",
    authData: { location: "query", auth: { key: "XXXXXXXX", token: "XXXXXXXXX" } },
  }
}

function App() {
    return (
      <div className="App">
        <ChatWindow {...chatWindowProps} />
      </div>
    );
}

export default App;