Talk to your Botpress bot, and give it a voice to talk back! This simple project is a template showing how you can integrated 3rd party services to bring speech to Botpress bots. All of the services used have very generous free tiers, so this project is free to spin up.
- Botpress Cloud for the chatbot itself. Botpress is a cloud-hosted, GPT-native platform for quickly building chatbots.
- Cloudflare AI Workers for speech-to-text. Cloudflare AI Workers offer inference APIs for popular large language models. They have a very generous free tier, too!
- Elevnlabs for text-to-speech. They provide great-sounding voices and have a generous free tier.
This project uses Node.js and React.
git clone github.com/
Copy .env.example and rename it to .env.
You need your bot's BotID and ClientID. The easiest way to get this is to publish your bot, then go to the Admin panel > Integrations > Webchat > Configurable
Open Chatbot.tsx and add your botId and clientId to lines 25 and 28, respectively. If you have custom CSS, you can add its link to line 34. The botpress styler makes it easy to generate a CSS for your bot!
Your cloudflare account id is visible in the sidebar when you visit your cloudflare dashboard.
For your API key, click the 'manage API tokens' and then make a new API key.
Save these to the appropriate lines in your new .env file from step 2.
After signing up for elevenlabs, you can visit their voice library to find a voice you like. After adding it to your account, you can find the voice ID by hovering over the icon in the top right corner.
To get your elevenlabs API key, go to your profile and click on API keys. You can find your API key there.
Save these to the appropriate lines in your new .env file from step 2.
npm run start