Trae AI a FREE AI Code Editor. Better than CURSOR ?

Trey.ai IDE Summary

Key Concepts:

• Tray.ai IDE: A free, AI-powered IDE for building applications with a user-friendly interface.
• Custom Agents: User-defined AI agents with specific instructions and tool access.
• MCP (Machine Co-Pilot): An AI co-pilot with access to advanced tools like databases (PostgreSQL), GitHub, and Puppeteer.
• Context: Adding external information (files, URLs) to provide the AI agent with more relevant data.
• Rules: Defining global or project-specific rules to guide the AI agent's behavior.
• Models: Access to various AI models (Claude 3.7 Sonnet, Gemini 2.5 Pro, GPT-4.1) and the ability to add custom models.
• Auto Run: Automatically executing terminal commands generated by the AI agent.

1. Introduction to Trey.ai IDE

• The Trey.ai IDE allows users to create full-fledged applications with minimal prompting.
• It's a free tool with an easy-to-use interface.
• Users can create custom agents with access to advanced tools using MCP.
• MCP provides access to more tools and capabilities, allowing for more accurate answers through added context.
• The IDE features smart completions and supports advanced models like Claude 3.7 Sonnet, Gemini 2.5 Pro, and GPT-4.1.

2. Creating and Using Custom Agents

• Step 1: Creating an Agent:
  • Navigate to Settings > Agents > Create Agent.
  • Define the agent's name (e.g., "Developer Agent").
  • Provide a prompt defining the agent's role and environment (e.g., "You are a senior front-end developer developing in Next.js, JavaScript, TypeScript. Coding environment: Next.js, JavaScript, TypeScript, Tailwind CSS, HTML, and CSS").
  • Grant access to built-in tools like File System, Terminal, Web Search, and Preview.
  • Click "Create."
• Example: Using the "Developer Agent" to create an image resizer app with a modern professional design.
  • The agent uses Next.js with TypeScript and Tailwind CSS.
  • It automatically runs terminal commands, creates files (index.html, style.css, script.js), and starts the server.
  • The IDE provides a preview window for testing the application.
  • The example demonstrates resizing images, changing aspect ratios, adjusting image quality, and downloading the resized image.

3. Integrating MCP and PostgreSQL

• Step 1: Adding MCP Tools:
  • Go to Settings > MCP > Add Icon.
  • Select the desired tool (e.g., PostgreSQL).
  • Obtain the connection details (username, password) from a PostgreSQL database provider (e.g., Neon).
  • Paste the connection snippet into the PostgreSQL settings in Trey.ai IDE.
  • Click "Confirm."
• Step 2: Granting Agent Access to MCP:
  • Edit the custom agent (e.g., "Developer Agent").
  • Enable access to PostgreSQL.
  • Click "Save."
• Example: Querying the PostgreSQL database using natural language.
  • The agent interacts with the database, retrieves schema information, and executes SQL queries without requiring the user to write SQL code.

4. Adding Context and Modifying Design

• Adding Context:
  • Click "Context" in the chat interface.
  • Add relevant files (e.g., index.html, style.css, script.js) to provide the agent with the existing design.
• Modifying Design:
  • Provide a design (e.g., an image in "jubilee style") as a reference.
  • Prompt the agent to change the existing design according to the provided design.
• Example: Changing the image resizer app's design based on a provided image.
  • The agent modifies the design, fixes any issues, and automatically restarts the server.
  • The preview window displays the updated interface.

5. Additional Features

• Adding Custom Context:
  • Add documents from URLs or local files.
  • The IDE indexes the content for use as context.
  • Context can be referenced in the chat using # followed by the context type (e.g., #websearch, #file).
• Rules:
  • Define user rules (global) or project-specific rules.
  • Rules guide the agent's behavior (e.g., "Always perform what is necessary").
• Models:
  • Access built-in models or add custom models.
  • OpenRouter is mentioned as a provider that offers access to multiple models.
• Auto Run:
  • Enables automatic execution of terminal commands generated by the agent.
  • A deny list can be configured to prevent the agent from running specific commands (e.g., rm, kill, chmod, rmd).

6. Conclusion

The Trey.ai IDE offers a powerful and user-friendly environment for building applications with AI assistance. Its key features include custom agents, MCP integration, context management, rule definition, and auto-run capabilities. By leveraging these features, developers can significantly accelerate the development process and create sophisticated applications with minimal coding effort. The ability to use natural language to interact with databases and modify designs further enhances the IDE's accessibility and efficiency.