Building A Financial Dashboard with Devin AI - Here's What Happened

Devon AI: Building a Financial Dashboard - A Blind Exploration

Key Concepts:

• Devon AI: An autonomous AI software engineer.
• Financial Dashboard: An application displaying stock data, candlestick charts, and technical indicators.
• FastAPI: Python web framework used for the backend.
• React: JavaScript library used for the frontend.
• TypeScript: A superset of JavaScript which primarily provides optional static typing, classes and interfaces.
• Vit: A build tool that aims to provide a faster and leaner development experience for modern web projects.
• Tailwind CSS: A utility-first CSS framework.
• Yahoo Finance API: Data source for stock information.
• Y Finance package: Python library for accessing Yahoo Finance data.
• Candlestick Chart: A financial chart showing open, high, low, and close prices.
• Technical Analysis Indicators: SMA (Simple Moving Average), EMA (Exponential Moving Average), RSI (Relative Strength Index), Bollinger Bands, MACD (Moving Average Convergence Divergence).
• ACU (Agent Compute Units): Units used to measure the computational cost of Devon AI tasks.
• UV: A fast package installer and resolver for Python.
• Trading View: A charting platform & social network used by traders & investors.
• Recharts: A composable charting library built on React components.

1. Introduction and Goal

The video documents a blind exploration of Devon AI, an autonomous AI software engineer, by tasking it with building a financial dashboard application from scratch. The goal is to evaluate Devon AI's capabilities as a "junior developer" or "intern" capable of handling basic software engineering tasks. The application should allow users to input stock ticker symbols, date ranges, and technical analysis indicators to generate interactive candlestick charts and historical price data.

2. Devon AI Overview

Devon AI is presented as a fully autonomous AI software engineer, distinct from co-pilots. It operates within its own environment, writing code, executing commands, deploying applications, and creating pull requests. The philosophy is not to replace engineers but to provide an assistant for outsourcing fundamental tasks. Devon AI is sponsoring the video, but the exploration is presented as unbiased, showcasing both successes and failures.

3. Setting Up the Project

• Repository Creation: A new private GitHub repository named "Devon-Financial-Dash" is created with a readme file.
• GitHub Integration: Devon AI is connected to the repository through GitHub integration, granting it access to the codebase.
• Virtual Machine: Devon AI operates within a virtual machine, ensuring that its actions do not affect the user's local system.
• Parallelism: Devon AI can handle multiple tasks simultaneously, allowing for parallel development.

4. Initial Task: Basic Financial Dashboard

The initial task given to Devon AI is to build a basic financial dashboard with the following specifications:

• Backend: Python and FastAPI.
• Frontend: React, TypeScript, Vit, and Tailwind CSS.
• Data Source: Yahoo Finance API using the Y Finance package.
• Functionality:
  • A text box for entering the ticker symbol (e.g., AAPL).
  • Two date pickers for selecting the start and end dates.
  • A button to trigger the data retrieval and chart rendering.
  • A candlestick chart displaying the stock price for the specified time frame.

5. Devon AI's Execution and Iteration

• Autonomous Operation: Devon AI autonomously executes the task, accessing knowledge, running commands, writing code, and deploying the application.
• Real-time Monitoring: The user can monitor Devon AI's progress through various views, including progress logs, shell output, VS Code interface, and a browser preview.
• Dynamic Intervention: The user can intervene and modify the task specifications during execution. For example, the user initially requested poetry but then changed to UV.
• Cost Tracking: The cost of individual actions in ACUs (Agent Compute Units) is displayed, providing insights into resource consumption.
• Pull Request Generation: Devon AI automatically commits changes and creates a pull request with a summary of the implemented features, technical decisions, and a review checklist.
• Deployment: Devon AI deploys the backend and frontend, making the application accessible through a URL.

6. Addressing Issues and Refinement

• Initial Issues: The initial implementation has issues with date formatting and chart rendering (displaying a line chart instead of a candlestick chart).
• Iterative Improvement: The user provides feedback, and Devon AI attempts to fix the issues and improve the application.
• Candlestick Chart Implementation: Devon AI researches candlestick charts and implements a proper candlestick chart using Trading View's lightweight charts library.
• Bug Reporting and Fixing: The user reports a bug where the chart fails to render after changing the input without reloading the page. Devon AI attempts to fix the bug.
• Dark Mode Implementation: The user requests a dark mode theme for the application, which Devon AI implements.
• Price History Feature: The user requests a scrollable box on the right side displaying the price history, which Devon AI implements.

7. Technical Analysis Indicators

• Adding Indicators: The user requests the addition of technical analysis indicators, including SMA, EMA, RSI, and Bollinger Bands.
• Simplifying the Task: Due to issues with the initial implementation, the user simplifies the task by focusing on SMA, EMA, and Bollinger Bands.
• Implementation Issues: The implementation of technical analysis indicators has several bugs, including missing visualizations and chart disposal issues.

8. Ask Devon: Codebase Research

• Deep Research: The "Ask Devon" feature is explored, allowing the user to ask questions about the codebase and receive detailed answers with sources.
• Example Question: The user asks how the Trading View package is integrated into the project.
• Detailed Response: Devon AI provides a detailed response with sources, explaining the implementation details.

9. Final Result and Conclusion

The video concludes with a partially functional financial dashboard. While the application has some bugs and limitations, it demonstrates Devon AI's ability to autonomously build and deploy a complex application from scratch. The user highlights the difference between Devon AI and co-pilots, emphasizing Devon AI's autonomous operation and the ability to outsource tasks to it. Common use cases include refactoring, bug fixes, and parallel development.

10. Notable Quotes

• "Devon AI is different than a lot of these coding assistant tools because the philosophy behind Devonai is a different one. You're not having a co-pilot here... Devon is fully autonomous as an AI software engineer."
• "The goal of Devon AI is not to replace engineers but to give you something like a little software engineering intern... that can do basic tasks that you can outsource some more fundamental tasks to that you don't want to do yourself."
• "This is literally like a software engineering intern. I don't even get like the code to approve it and push it myself."

11. Key Takeaways

• Devon AI is a promising tool for automating basic software engineering tasks.
• It can autonomously build and deploy applications from scratch.
• It can handle multiple tasks simultaneously.
• It can be dynamically instructed and corrected during execution.
• It can be used for codebase research and knowledge discovery.
• It is not a replacement for engineers but a tool to augment their capabilities.