Autonomy VS Code Extension Documentation

Welcome to the Autonomy VS Code Extension Documentation! This guide will walk you through the installation process and usage of the Autonomy extension, which enables you to generate code from Figma designs.

Overview

Autonomy is a comprehensive AI-driven development tool. It integrates directly into your IDE, using a large language model (LLM) alongside micro-agents to offer code analysis, improvement suggestions, and auto-refactoring. Emphasizing traceability, Autonomy encapsulates changes within git patches. Its unique strength lies in assimilating project context from supplementary documents like User Stories, Style Guides, and Software Design Documents. Autonomy serves three primary users: ongoing developers, newcomers to the code, and team leads overseeing project management.

Start Here - First Time Setup

Setup

After installing the Autonomy extension, follow these steps to set up Autonomy:

1. Initial Login and Authentication

1. Click on the Autonomy logo in the sidebar to open the Autonomy panel.
2. Select which kind of SSO login you prefer:
   • Connect to Google (recommended)
   • Connect to GitHub (recommended)
   • Choose email and password

For email/password login:

• Find the temporary password sent to you by support@autonomyai.io

⚠️ NOTE: Make sure that the email you sign in with is the same email you got the invitation sent to

2. Magician Configuration Panel

ℹ️ NOTE: This step is optional. The configuration exists to allow you to customize the process and to improve the result

1. Click on the Magician Agent in the agent's carousel menu in the Autonomy panel.
2. In the local component files, you can select the folders and files containing the components you'd like the Magician to work with. You can change this between runs.

Output Directory (Optional)

You can specify an Output Directory - this is where the Magician will place the new files it generates. It's best to choose a directory that is already exposed to your local development server, so that the components can be rendered immediately without additional setup.

💡 Best Practice: Choose a directory where it can be rendered once the local server is running.

Customize Code Style

Change the style of code the Magician creates!

The Magician automatically learns how the code is written in your codebase and matches it. If it learns practices you want to change (often due to looking at legacy code from previous standards), you can easily correct them by editing them in free text!

3. Connect to Figma

1. Click the "Connect to Figma" button near the top of the UI Magician Agent window

Your IDE may open a security dialog window, click "Open" to proceed in your browser.

2. In your browser click "Allow access"

3. That's it! You are all set with setting up Figma!

4. Connect to Jira

You can connect to Jira in two ways:

Option A: From Use Case Tiles

1. Click the "Connect to Jira" button below the use case tiles.

Option B: From Configuration Panel

1. Go to the configuration panel
2. Under "Connected Tools", find the Jira connection option

Connection Process:

Your IDE may open a security dialog window, click "Open" to proceed in your browser.

1. Authenticate via OAuth when prompted

Next Steps

Now that you're all set up, it's time to start your first run and choose the kind of use case you want to work on.

😊 First run: How to: Start a Run with the Magician

📖 Learn more: FAQ: Use Cases in the Magician

Your IDE may open a security dialog window, click "Open" to proceed in your browser.