Remix
Add AI Chat to your Remix app
What is Remix
Remix is a modern web framework for building web applications based on React.
Get an API key
- Go to the Inkeep Dashboard
- Select your project under Projects
- Go to the Integrations tab
- Click on Create integration
- Select Web
- Provide a Name and URL (optional) for the integration
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
Copy and add the apiKey
, integrationId
and organizationId
to your environment variables:
.env
INKEEP_API_KEY="INKEEP_API_KEY"
INKEEP_INTEGRATION_ID="INKEEP_INTEGRATION_ID"
INKEEP_ORGANIZATION_ID="INKEEP_ORGANIZATION_ID"
Get the environment variables
Use loader/action to access your environment variables:
root.tsx
// ...
export const loader = async () => {
return json({
ENV: {
API_KEY: process.env.INKEEP_API_KEY!,
INTEGRATION_ID: process.env.INKEEP_INTEGRATION_ID!,
ORGANIZATION_ID: process.env.INKEEP_ORGANIZATION_ID!
}
});
};
Install the component library
npm install @inkeep/uikit
Customize your settings
First, create a useInkeepSettings.ts
file that will contain a hook that returns configuration for our Inkeep component(s).
Below is an example with common customizations.
Define the component
Next, create an InkeepChatButton.tsx
file for the Chat Button
component.
For a full list of customizations, check out the Chat Button documentation.