Accelerate no-code frontend development with JitBlox's new AI assistant

Today I'm excited to announce AI support in JitBlox! Our goal has always been to remove friction from the app development process - helping teams move from idea to working prototype, using industry-leading UI libraries (like Bootstrap and Tailwind CSS) and without compromising on quality or flexibility (no vendor lock-in).

With the introduction of our AI assistant, we are taking it one step further. The new AI capabilities help you directly in the editor: from generating ready-made app and page layouts to enhancing existing pages and components. Instead of manually putting together your layouts, you can now describe what you need in plain language, and JitBlox's AI will translate this into a layout that is easy to customize using our powerful visual designer. The advantages:

• No code to deal with: many AI app builders generate code. This means that you still need to set up a development environment and maintain code. In JitBlox, you elaborate your design in a visual drag-and-drop environment (no worries, there's also a CSS editor for your advanced styling needs).
• A short feedback loop: you see a preview of all changes made with AI before you decide to apply them. And even then, you can always undo and redo them.
• High quality output: JitBlox generates the downloadable source code for your app itself. This code is well-organized, follows best practices (like these Angular recommendations) and just works.

How it works

Our AI assistant can be accessed from various places in the JitBlox designer. When you start designing a completely new app, your starting point is the main layout, which opens by default when you open the designer. The following video shows how to generate the layout for a social networking app.

You can also choose to generate a new page or component directly from the project explorer. Or to add elements to an existing template, which you can do via the template editor's context menu:

Building a good prompt

Strong prompts are crucial when working with AI, as they serve as instructions on how the AI should think, interpret, and respond. For the best results, I recommend reading our AI prompt guide, which explains, among other things, what context our AI assistant adds to your prompt. And because we don't consider AI-generated layouts to be the end goal but rather a powerful starting point, we have also included a number of post-editing tips in our documentation.

AI models and credits

You can choose from several AI models: to start with, we have decided on three AI models from Claude: Haiku 3.5, Sonnet 4.5, and Opus 4.1.

Premium AI models generally produce better results, but also require more processing power. To keep these differences clear, JitBlox works with AI credits: more advanced models consume more credits per request. For example:

• 1000 Claude Haiku 3.5 tokens = 1 credit
• 1000 Claude Sonnet 4.5 tokens = 3 credits
• 1000 Claude Opus 4.1 tokens = 15 credits

When you select an AI model in JitBlox, you'll see a consumption rate listed behind each model. As the cost of the Claude Sonnet 4.5 is higher than our baseline rate, we apply a pricing multiplier of 3x to align with provider pricing.

Every JitBlox user receives 1000 free credits upon registration. If you upgrade to a Pro account, 2000 credits are included each month (which is equivalent to 2 million Claude Haiku 3.5 input tokens).

Other recent updates

In addition to various UX improvements and minor bug fixes, one new feature is especially worth mentioning: the Convert to Page function. This feature allows you to select an element (or multiple adjacent elements) in your main layout and convert it into a new page in just a few simple steps. This comes in handy when you have an AI-generated app layout that contains common parts you would use on every page (such as a header, footer, or sidebar), as well as parts that make up an actual page (a home page, a dashboard):

Clicking Convert to Page will move the selected content to a new Page with a name you specify, and optionally replace your selection with a Page Area on your main layout (a Page Area displays the content of the page to which the user navigates).

Furthermore, our Angular code generator has been updated to follow Angular best practices even more closely. These include the use of Signals, [class] bindings, and the inject() function for injecting dependencies.

Try our AI assistant today

I'm looking forward to seeing what you create. We value your feedback, good or bad, so don't hesitate to share your thoughts with us.

Our AI assistant is still in its beta phase. This means you may encounter behaviors that need refinement as we continue to improve the platform. We appreciate your feedback and patience while we work to make JitBlox AI even better. Also note that AI is currently not available for Material Design projects.

Get started with JitBlox - It's free