Misc Blog

Powering AI Applications With The Petal Stack (Phoenix, Elixir, TailwindCSS, Alpine.js, LiveView): A Modern Approach

In the rapidly evolving landscape of web development and artificial intelligence (AI), selecting the right stack for your project can be pivotal. For those venturing into building AI-powered applications, the combination of Phoenix/Elixir for the backend and (TailwindCSS, Alpine.js, LiveView) for the frontend emerges as a powerful and efficient choice.


3 months ago

In the rapidly evolving landscape of web development and artificial intelligence (AI), selecting the right stack for your project can be pivotal. For those venturing into building AI-powered applications, the combination of Phoenix, Elixir, TailwindCSS, Alpine.js & LiveView emerges as a powerful and efficient choice. This blog delves into why embracing Petal can be your best bet for developing modern, scalable, and real-time AI applications.

The Case for Phoenix/Elixir in AI Development

At the heart of any AI application is the need for robust backend performance, capable of handling concurrent processes and real-time data with ease. Enter Phoenix/Elixir, a duo that stands out for its exceptional performance, scalability, and real-time capabilities, powered by the Erlang VM (BEAM).

Performance and Scalability

Elixir, a dynamic, functional language designed for building scalable and maintainable applications, leverages the Erlang VM. This setup is renowned for its fault tolerance, low-latency, and distributed computing capabilities. In the context of AI, where processing large volumes of data efficiently is crucial, Elixir’s ability to handle numerous simultaneous operations makes it an excellent choice.

Real-time Capabilities

Phoenix, the web framework built on Elixir, introduces LiveView, a game-changer for developing interactive, real-time web applications without relying heavily on JavaScript. This feature is particularly beneficial for AI applications, where instantaneous data processing and feedback are essential. Imagine a live dashboard displaying analytics or a chatbot interacting seamlessly with users; Phoenix LiveView makes these scenarios not only possible but straightforward to implement.

Ecosystem and Community

The Elixir ecosystem, though younger than some of its counterparts, is vibrant and growing, with a plethora of libraries and tools catering to various aspects of AI and machine learning. From numerical computing and tensor operations to specific AI-focused libraries, the community’s contributions make diving into AI projects with Elixir more accessible than ever. You are always welcome to join the Petal community and ask any questions you may have.

Petal: Elevating the Frontend Experience

Petal, shorthand for Phoenix, Elixir, TailwindCSS, Alpine.js, and LiveView, represents a cohesive stack that streamlines the creation of modern web interfaces.

Rapid Development with Petal Components

Petal Components (docs) are a collection of pre-built HEEX components styled with Tailwind CSS. These components drastically reduce the time required to translate design into functional, attractive web elements. For developers working on AI projects, this means more time can be spent on refining the AI aspects of the application, knowing that the frontend will not only look good but can be put together quickly and efficiently.

Advanced Features with Petal Pro

For those embarking on more complex AI projects, Petal Pro (available here) offers a comprehensive Phoenix boilerplate that includes features like social logins, multi-tenancy, styled components, Oban support, and Stripe Billing. These features address common requirements for SaaS applications, allowing developers to focus on the unique aspects of their AI projects without reinventing the wheel for these foundational elements.

Dynamic UIs with LiveView

LiveView’s role in creating dynamic, real-time user interfaces is even more pronounced in the context of AI applications. Whether it’s updating users on real-time analytics, providing immediate feedback from AI algorithms, or creating interactive, AI-driven experiences, LiveView enables developers to build these features with minimal hassle and maximum efficiency.

Embarking on Your AI Journey with Petal

Integrating AI capabilities into your application is an exciting venture. Petal not only make this process more manageable but also ensure that your application can scale and adapt to the demands of AI processing and real-time interactions.

Getting Started

For those new to Petal, the journey begins with understanding the basics of Elixir and familiarizing yourself with the Phoenix framework. From there, exploring Petal Components and experimenting with LiveView will open up new possibilities for your frontend development.


It’s possible to build all kinds of AI powered applications with Petal. E.g a real-time recommendation engine, a dynamic data visualization tool, or a responsive chatbot. However, I thought I’d point out some real world applications to give you a true sense of the possibilities and something tangible as a proof of concept.

Open AI Prompt - Petal recipe

Ask Cartman anything and he’ll give you a respone (Cartman style). We’ve provided a recipe so that you can cutomize it and incorporate it into your own Petal apps.

Rizz - An intelligent lead generation platform

Built by Fred Wu in just a few months in his spare time, Rizz is great for searching and engaging with relevant content related to your business/product on social media platforms like Reddit..

It works relatively simply. You enter a few details about your product, service or brand, your target audience, and your goals. You then do a search for relevant keywords and leads will automatically start poping up in your inbox. The best part is that Rizz will automatically write a personalised, context-aware response to your lead and if required, you can touch it up and post it directly from the Rizz platform.

Persumi - A writing and blogging with AI

Another creation by Fred in just a matter of months, Persumi is a modern blogging platform that leverages AI to summarise blog articles and turn them into audio. You can essentially create a podcast out of a piece of writing in a matter of seconds.

Enhancing Your LLM Apps with Key Elixir Libraries

When building Large Language Model (LLM) applications with Elixir, the community provides several powerful libraries that can significantly enhance your project’s capabilities. Here’s a brief overview of some noteworthy libraries and resources.


Designed to streamline the integration of LLMs into Elixir applications, LangChain offers a robust framework for creating data-aware (connect a language model to other sources of data) and agentic (allow a language model to interact with its environment) applications.

It simplifies the process of chaining different processes, integrations, and services with LLMs, providing modular components and structured assemblies for specific tasks.

Whether you’re building complex applications or need to tailor existing solutions, LangChain equips you with the tools for a seamless development experience.


A spiritual port of the Instructor Python library, Instructor_ex facilitates structured prompting for LLMs to produce JSON outputs aligned with Ecto schemas.

This library is particularly useful for ensuring that LLM responses adhere to your data structures, with built-in validation and error handling mechanisms for more reliable interactions. It’s compatible with various LLM backends, including the OpenAI API, making it a versatile choice for Elixir developers.


Livebook automates code and data workflows utilizing an interactive notebook that leverages the power of Elixir. It’s an excellent tool for sharing knowledge, deploying apps, visualizing data, running machine learning models, debugging systems, and more.

LiveBook eliminates the need for manual scripting and outdated documentation, offering a dynamic and collaborative environment for development.


Bumblebee extends the capabilities of the Elixir ecosystem into the realm of machine learning, providing access to pre-trained neural network models via Axon.

It integrates with Hugging Face Models, allowing easy download and application of machine learning tasks with minimal code.

Whether you’re exploring machine learning for the first time or integrating advanced models into your applications, Bumblebee offers a straightforward and powerful solution.

Incorporating these libraries into your LLM applications not only enhances their functionality but also streamlines the development process, enabling you to focus on creating impactful and innovative AI-driven solutions.


Choosing Petal for your next AI application offers a blend of performance, scalability, and development efficiency that is hard to match. This stack not only supports the demanding nature of AI processing but also ensures that your application remains responsive, attractive, and engaging for users.

As you embark on your AI development journey, remember that the power of this technology stack is not just in its individual components but in how they come together to create something greater than the sum of their parts. Petal are more than just tools; they are a foundation for building the future of AI applications.

The end

More posts