One powerful use case of AI agents in Dart is creating your workspace's personal design agent. With this agent you'll be able to assign tasks that then trigger a prototype being quickly created. Some example tasks could be:

Design an interactive date picker
Design a progress bar with a draggable handle
Design a dropdown for choosing numbers
Design a sortable list

Prerequisites

Besides having your Dart account ready to go with access to Agents in settings, you'll also need accounts ready to go on:

Setup

Watch the following video to see step-by-step instructions on setting up the Magic Patterns AI agent in Dart:

Step-by-step instructions

Create an example task to use for testing
Create a webhook node in n8n
1. Copy the Test URL
2. Set the HTTP Method to POST
Create an agent in Dart
1. Name it and upload a profile picture as desired
2. Click add workflow and paste in the URL in the To field. Leave When as "a task is assigned to your agent" and Then as "send a POST request"
3. Use Header: Content-Type and Value: application/json
4. Use Body: {{data}}
In n8n click "Listen for test event", and then in Dart assign the example task to your new agent
1. Check that data appears in the output panel in n8n
2. Click the pin button in the top right corner to keep the data for further steps
Create the design node:
1. Connect the Webhook node to an HTTP Request node. Use the following:
2. Method: POST
3. URL: https://api.magicpatterns.com/api/v2/pattern (This is taken from the Magic Patterns API documentation.)
4. Authentication: Generic Credential Type
5. Generic Auth Type: Header Auth
6. Header Auth: Create new credential
  1. Rename the Header Auth to something like "MP new auth"
  2. Name: x-mp-api-key (from the Magic Patterns API docs)
  3. Value: API key you get from Profile Settings in Magic Patterns
  4. Click to save the new credential
7. Send Body: toggle on
8. Body Content Type: Form-Data
9. Parameter Type: Form Data
10. Name: prompt
11. Value: {{ $json.body.task.title }}{{ $json.body.task.description }} (or drag in the task id and description from the schema menu on the left)
12. test the step to ensure it works
Create the comment finished node
1. Make another HTTP Request node and attach it after the design node
  1. Name it "Comment finished"
2. Method: POST
3. URL: https://app.itsdart.com/api/v0/public/comments (This is taken from Dart's API documentation.)
4. Authentication: Generic Credential Type
5. Generic Auth Type: Header Auth
6. Header Auth: Create new credential
  1. Rename the Header Auth to something like "Dart new auth"
  2. Name: Authorization
  3. Value: "bearer " (with a space) followed by the authentication token from your new agent in Dart.
    To get the authentication token, in Dart go to settings -> Agents -> click the three dots -> Authentication Token -> Create
    It should look something like: bearer dsa_a8ps82...
  4. Click to save the new credential
7. Send Body: toggle on
8. Body Content Type: JSON
9. Specify Body: Using JSON
10. JSON: grab the task ID from the webhook node and the previewURL from the design node and use them in the following
11. ```
{
    "item": {
        "taskId": "{{ $('Webhook').item.json.body.task.id }}",
        "text": "Done, [check out the designs here]({{ $json.previewUrl }})!"
    }
}
```
12. Test the step
Create a comment starting node:
1. Duplicate the existing comment finished node and attach it to the webhook node from the beginning
2. Rename the node as desired
3. Use a slightly different message for the JSON, dragging in the task ID:
4. ```
{
    "item": {
        "taskId": "{{ $json.body.task.id }}",
        "text": "I'm on it!"
    }
}
```
5. Test the step
Save the n8n workflow and mark it as active
Copy the production URL from the Webhook node (instead of the Test URL) and paste it into the Dart agent workflow in the "To" field.

If you have any questions on setting this up or run into any issues, feel free to email us at [email protected]

AI agents

AI design agent

Prerequisites

Setup

Step-by-step instructions