Bricksforge Assistant (AI)
The Bricksforge Assistant helps you with AI in different areas of Bricksforge. For example, you can use a prompt to create animations trough the Bricksforge Panel. It uses the OpenAI gpt-3.5-turbo-0613 model and the function calling possibilities to generate the output. You can find more information about it here.
How to Use
To use the Bricksforge Assistant, you need your own OpenAI API key. This way, you’ll be charged only for your own usage. You can generate one after signing up on the OpenAI website.
After you have your API key, you can add it to Bricksforge clicking the settings icon of the extension. If you have done that, the status should change to “Connected”. Now, you’ll be able to use the AI features.
AI Implementations
Currently, we have integrated the following AI features:
Animations
You can use the Bricksforge Assistant to create one or multiple animations for a timeline. Follow these steps to create an animation:
- Open the Bricksforge Panel and switch to the tab “Timelines”.
- Create a new timeline or open an existing one.
- Click the “AI” button beside the ”+” button.
- Enter a prompt and click “Create Animation”.
The prompt should be a description of the animation you want to create. For example, you could use Move the element 200 pixels to the right
.
The AI will then generate the animation and add it to the timeline. First of all, it will try to use existing controls to create the animation.
If for a specific key no control exists, it will use the “Animation Object” field to add the animation data.
If for your desired animation two or more animation tweens are needed, the AI will take care of that. For example, if you want to move an element to the right and then to the bottom, the AI will create two tweens for that. The first one will move the element to the right and the second one will move it to the bottom.
Tips
Animation Selector
If you don’t use a specific selector in your prompt, the AI will use the trigger selector of your timeline. If you want to use a different selector, you can add it to the prompt. For example, you could use Move the element .header-xy 200 pixels to the right
.
Then, the AI will use the selector .header-xy
instead of the trigger selector.
Be concrete
Be concrete in your prompt. If you know what you want to do, you should describe it as concrete as possible.
For example, you could include the information about the animation method. If you need a fromTo
instead of a from
tween, you could use Move the element 200 pixels to the right using fromTo
.
Or, if you want to add delay between the animation steps, you could write: Move the element 200 pixels to the right, wait 500ms and then move it 200 pixels to the bottom
.
The more concrete you are, the better the AI can understand what you want to do.