react-copilot-embed-sandbox
v0.2.1
Published
This guide provides instructions on how to integrate the `react-copilot-embed-sandbox` component into various frameworks and vanilla JavaScript projects. The styles applied in the example are excluded to focus on the core integration steps.
Readme
React Copilot Embed Sandbox Integration Guide
This guide provides instructions on how to integrate the react-copilot-embed-sandbox component into various frameworks and vanilla JavaScript projects. The styles applied in the example are excluded to focus on the core integration steps.
Table of Contents
Vanilla JavaScript
Steps:
- Include the required scripts for React and ReactDOM.
- Include the UMD build of
react-copilot-embed-sandbox. - Create a container element for the Copilot component.
- Render the Copilot component using
React.createElement.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Copilot Example</title>
</head>
<body>
<div id="root"></div>
<!-- Include React and ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Include your UMD build -->
<script src="https://cdn.jsdelivr.net/npm/react-copilot-embed-sandbox@latest/dist/index.umd.js"></script>
<!-- Your App Script -->
<script>
// Access global variables
const { Copilot } = window["react-copilot-embed-sandbox"];
// Define your App component
function App() {
return React.createElement(
"div",
null,
React.createElement(Copilot, {
apiKey: "YOUR_API_KEY", // Replace with your API key
copilot: "apex",
})
);
}
// Render the App component
ReactDOM.render(
React.createElement(App),
document.getElementById("root")
);
</script>
</body>
</html>React
Steps:
- Install the
react-copilot-embed-sandboxpackage. - Import and use the
Copilotcomponent in your React application.
Example:
npm install react-copilot-embed-sandboximport React from "react";
import ReactDOM from "react-dom";
import { Copilot } from "react-copilot-embed-sandbox";
function App() {
return (
<div>
<Copilot
apiKey="YOUR_API_KEY" // Replace with your API key
copilot="apex"
/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));Vue
Steps:
- Install the
react-copilot-embed-sandboxpackage. - Use a wrapper component to integrate the React component into Vue.
Example:
npm install react-copilot-embed-sandbox<template>
<div id="app">
<div ref="copilotContainer"></div>
</div>
</template>
<script>
import { Copilot } from "react-copilot-embed-sandbox";
import React from "react";
import ReactDOM from "react-dom";
export default {
mounted() {
ReactDOM.render(
React.createElement(Copilot, {
apiKey: "YOUR_API_KEY", // Replace with your API key
copilot: "apex",
}),
this.$refs.copilotContainer
);
},
beforeDestroy() {
ReactDOM.unmountComponentAtNode(this.$refs.copilotContainer);
},
};
</script>Angular
Steps:
- Install the
react-copilot-embed-sandboxpackage. - Use Angular's
ngAfterViewInitlifecycle hook to render the React component.
Example:
npm install react-copilot-embed-sandboximport { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { Copilot } from "react-copilot-embed-sandbox";
import * as React from "react";
import * as ReactDOM from "react-dom";
@Component({
selector: "app-root",
template: `<div #copilotContainer></div>`,
})
export class AppComponent implements AfterViewInit {
@ViewChild("copilotContainer", { static: false })
copilotContainer!: ElementRef;
ngAfterViewInit() {
ReactDOM.render(
React.createElement(Copilot, {
apiKey: "YOUR_API_KEY", // Replace with your API key
copilot: "apex",
}),
this.copilotContainer.nativeElement
);
}
ngOnDestroy() {
ReactDOM.unmountComponentAtNode(this.copilotContainer.nativeElement);
}
}Svelte
Steps:
- Install the
react-copilot-embed-sandboxpackage. - Use Svelte's
onMountlifecycle function to render the React component.
Example:
npm install react-copilot-embed-sandbox<script>
import { onMount } from "svelte";
import { Copilot } from "react-copilot-embed-sandbox";
import * as React from "react";
import * as ReactDOM from "react-dom";
let copilotContainer;
onMount(() => {
ReactDOM.render(
React.createElement(Copilot, {
apiKey: "YOUR_API_KEY", // Replace with your API key
copilot: "apex",
}),
copilotContainer
);
return () => {
ReactDOM.unmountComponentAtNode(copilotContainer);
};
});
</script>
<div bind:this={copilotContainer}></div>This documentation provides a clear and concise way to integrate the react-copilot-embed-sandbox component into your project, regardless of the framework you're using.