Generative UI Forms for ElevenLabs Conversational AI (not affiliated with ElevenLabs)
npm install 11labs-community-gen-ui-forms> Note: This is a community-created solution and is not affiliated with ElevenLabs. Use at your own discretion.
This package extends the ElevenLabs Conversational AI Widget with dynamic form generation capabilities. It enables your AI agent to create, validate, and manage forms in real-time during conversations, providing a seamless way to collect structured data from users.
- 🎯 Dynamic form generation during conversations
- ✨ Beautiful, modern UI that matches ElevenLabs design
- ✅ Real-time validation with user-friendly messages
- 🎨 Pre-styled components that work out of the box
- 📱 Fully responsive design
- 🔒 Type-safe form schema
- text: Single-line text input
- email: Email address input with validation
- number: Numeric input with optional min/max
- date: Date picker
- datetime-local: Date and time picker
- time: Time picker
- tel: Phone number input
- select: Dropdown with options
- textarea: Multi-line text input
``html`
`html`
To work forms require adding instructions to the system prompt and creating additional tools.
1. Add system prompt from config/prompt.md to the end of your agent system prompt.
2. Add tools by calling API or manually on ElevenLabs' Dashboard:
- create_or_update_form.
- get_form_state.
- close_form`.
That's it! Your agent can now use forms to collect relevant information during conversations.
We welcome contributions! Please feel free to submit a Pull Request.
Usage is provided under the MIT License.