dt-agent

Your AI partner for full-stack application development.

Overview

dt-agent is a VS Code extension acting as an AI agent to assist with various development tasks. It helps generate project documentation, mobile apps, web apps, backend infrastructure, and aids in full-stack development and project management.

Note: App generation works best with advanced coding models like Claude 3.5, GPT-4o, and Gemini 2.5 Pro.

Features

• Mobile App Generation: Create mobile apps using React Native and Expo.
• Web App Generation: Build web apps using React and Next.js.
• Backend Generation: Set up backend services and infrastructure (e.g., using Supabase for storage and authentication).
• Documentation Generation: Create project documentation automatically.
• Full-Stack Assistance: Handle various tasks across the development stack.
• Project Management Support: Assist with project planning and organization aspects.
• Architecture Design: Generate application architecture diagrams and component designs.
• Code Generation: Automatically generate TypeScript code for components.
• Project Setup: Handle initial project setup and dependency management.
• Tech Stack Configuration: Option to customize your technology stack.

Requirements

• Node.js v18.0.0 or higher
• Visual Studio Code 1.95.0 or higher

Installation

Install the extension from the Visual Studio Code Marketplace

Usage

There are two main ways to use the dt-agent:

1. Using Integrated Copilot Chat

1. Open the Copilot Chat window in VS Code.
2. Select a powerful model (e.g., Claude 3.5 Sonnet, GPT-4o).
3. Type @dt-agent-mobile or @dt-agent-web to start a chat session.
4. Use available commands (see below) or describe your needs in natural language.

Chat Participants:

• @dt-agent-mobile: dt-agent Mobile - Focused on React Native/Expo apps.
• @dt-agent-web: dt-agent Web - Focused on React/Next.js apps.

Available Commands:

• /create: Start the process of creating a new application.
  • Example: @dt-agent-mobile /create A simple notes app
  • Example: @dt-agent-web /create twitter clone
• /run: Attempt to run the generated application (if applicable).
• /help: Get help with using the extension.

Sample Prompts:

• @dt-agent-mobile /create Spelling bee app for kids K-5. Use Anthropic API to generate words based on grade.
• @dt-agent-web /create blogging platform with user authentication

2. Using Your Own API Key (BYOK)

1. Navigate to VS Code Settings (Cmd+, or Ctrl+,).
2. Search for "dt-agent".
3. Enable the "Use your own model" option.
4. Select your preferred API Provider (Anthropic, OpenAI, OpenRouter).
5. Choose the specific Model.
6. Enter your API Key securely.
7. Open the Command Palette (Cmd+Shift+P or Ctrl+Shift+P).
8. Select dt-agent: Create a mobile app or dt-agent: Create a web app.
9. Enter a detailed prompt describing the application you want to build.
10. Monitor the VS Code status bar and Output panel (select "dt-agent" from the dropdown) for progress and logs.

Generation Process:

The extension typically follows these steps:

1. Analyzes the prompt to understand requirements and features.
2. Creates a project folder based on the chosen tech stack.
3. Generates an application architecture diagram (if applicable).
4. Generates code for components, screens, services, etc.
5. Installs necessary dependencies (npm install or yarn install).
6. Provides the completed application code, ready to run.

Running the Generated App:

• Mobile App (Expo): Use the Expo Go app on your device or an emulator. Run npx expo start in the project's terminal.
• Web App (Next.js): Run npm run dev in the project's terminal.
• Web App (React): Run npm start in the project's terminal.

Troubleshooting

• Common Errors: After generation, you might encounter issues. Check the terminal output for specific error messages.
• TypeScript Errors: Review the generated .ts or .tsx files for type errors and correct them.
• Missing Dependencies: Ensure package.json includes all required libraries and run npm install or yarn install again if needed.
• Deprecated Libraries: Check for outdated packages and update imports or code as necessary.

Development

This extension is built using:

• TypeScript
• VS Code Extension API
• Webpack
• React (for Webviews)

See DEVELOPMENT.md for details on setting up the development environment and contributing.

Issues & Suggestions

Found a bug or have an idea? Please open an issue or submit a pull request on our GitHub repository.

License

This project is proprietary to dt-workspace. All rights reserved. See the LICENSE file for details.