AI Chat Assistant Tutorial

Learn how to leverage Trae's powerful AI assistant to accelerate your development workflow.

Overview

Trae's AI assistant is your intelligent coding companion that can help with:

• Code generation and completion
• Debugging and error resolution
• Code explanation and documentation
• Architecture suggestions
• Best practices recommendations

Getting Started

Opening the AI Chat

Method 1: Keyboard Shortcut

• Windows/Linux: Ctrl+Shift+A
• Mac: Cmd+Shift+A

Method 2: UI Navigation

1. Click the AI Assistant icon in the sidebar
2. Or go to View > AI Assistant

Method 3: Command Palette

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "AI Chat" and select Open AI Assistant

Basic AI Interactions

Simple Code Questions

Example 1: Explaining Code

You: What does this React hook do?

const [count, setCount] = useState(0);

AI: This is the useState hook in React. It creates a state variable called 'count' with an initial value of 0, and provides a setter function 'setCount' to update that state. When setCount is called, it triggers a re-render of the component with the new value.

Example 2: Quick Fixes

You: How do I fix this TypeScript error?

Property 'name' does not exist on type 'User'

AI: This error means the 'name' property is not defined in your User type. You can fix it by:

1. Adding 'name' to your User interface:
   interface User {
     id: number;
     name: string; // Add this line
   }

2. Or using optional chaining if name might not exist:
   user.name?.toLowerCase()

Code Generation

Example 1: Component Generation

You: Create a React component for a user profile card with name, email, and avatar

AI: Here's a React user profile card component:

import React from 'react';
import './UserProfileCard.css';

interface UserProfileCardProps {
  name: string;
  email: string;
  avatar?: string;
}

const UserProfileCard: React.FC<UserProfileCardProps> = ({ 
  name, 
  email, 
  avatar 
}) => {
  return (
    <div className="user-profile-card">
      <div className="avatar-container">
        <img 
          src={avatar || '/default-avatar.png'} 
          alt={`${name}'s avatar`}
          className="avatar"
        />
      </div>
      <div className="user-info">
        <h3 className="user-name">{name}</h3>
        <p className="user-email">{email}</p>
      </div>
    </div>
  );
};

export default UserProfileCard;

Example 2: Function Generation

You: Write a function to validate email addresses

AI: Here's an email validation function:

function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  // Basic format check
  if (!emailRegex.test(email)) {
    return false;
  }
  
  // Additional checks
  if (email.length > 254) {
    return false;
  }
  
  const [localPart, domain] = email.split('@');
  
  if (localPart.length > 64 || domain.length > 253) {
    return false;
  }
  
  return true;
}

// Usage example:
const isValid = validateEmail('user@example.com'); // true
const isInvalid = validateEmail('invalid-email'); // false

Advanced AI Features

Context-Aware Assistance

The AI assistant understands your current project context:

Example: Project-Specific Help

You: How do I add routing to my React app?

AI: I can see you're working with a React TypeScript project. Here's how to add React Router:

1. Install React Router:
   npm install react-router-dom
   npm install @types/react-router-dom

2. Update your App.tsx:
   import { BrowserRouter, Routes, Route } from 'react-router-dom';
   import Home from './components/Home';
   import About from './components/About';

   function App() {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </BrowserRouter>
     );
   }

Code Review and Optimization

Example: Performance Optimization

You: Can you review this component for performance issues?

const UserList = ({ users }) => {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <img src={user.avatar} alt="avatar" />
        </div>
      ))}
    </div>
  );
};

AI: I see a few optimization opportunities:

1. **Memoization**: Use React.memo to prevent unnecessary re-renders
2. **Image optimization**: Add loading="lazy" for images
3. **TypeScript**: Add proper type definitions

Here's the optimized version:

import React from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}

interface UserListProps {
  users: User[];
}

const UserList: React.FC<UserListProps> = React.memo(({ users }) => {
  return (
    <div className="user-list">
      {users.map(user => (
        <div key={user.id} className="user-item">
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <img 
            src={user.avatar} 
            alt={`${user.name}'s avatar`}
            loading="lazy"
            width="50"
            height="50"
          />
        </div>
      ))}
    </div>
  );
});

UserList.displayName = 'UserList';
export default UserList;

Debugging Assistance

Example: Error Debugging

You: I'm getting this error and I don't understand why:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

AI: This error typically occurs when you're trying to call .map() on a variable that is undefined or null. Here are the most common causes and solutions:

1. **Data not loaded yet**:
   // Problem:
   const UserList = ({ users }) => {
     return users.map(user => <div key={user.id}>{user.name}</div>);
   };

   // Solution:
   const UserList = ({ users = [] }) => {
     return users.map(user => <div key={user.id}>{user.name}</div>);
   };

2. **Async data loading**:
   // Problem:
   const [users, setUsers] = useState();
   
   // Solution:
   const [users, setUsers] = useState([]);
   
   // Or with conditional rendering:
   return users ? users.map(...) : <div>Loading...</div>;

3. **API response structure**:
   Check if your API returns the expected array structure.

AI Chat Best Practices

1. Be Specific

❌ Vague:

"My code doesn't work"

✅ Specific:

"My React component throws a TypeError when trying to map over the users array. Here's the error message and my code: [paste code]"

2. Provide Context

❌ No context:

"How do I make an API call?"

✅ With context:

"How do I make an API call in my React TypeScript component to fetch user data from a REST endpoint?"

3. Include Code Snippets

❌ Description only:

"My function isn't working properly"

✅ With code:

"My function isn't working properly:

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

It returns NaN instead of the expected number."

4. Ask Follow-up Questions

You: Thanks for the code! Can you also show me how to add error handling?

AI: Absolutely! Here's the same function with comprehensive error handling:

function calculateTotal(items: Item[]): number {
  try {
    if (!Array.isArray(items)) {
      throw new Error('Items must be an array');
    }
    
    return items.reduce((sum, item) => {
      if (typeof item.price !== 'number' || isNaN(item.price)) {
        console.warn(`Invalid price for item ${item.id}: ${item.price}`);
        return sum;
      }
      return sum + item.price;
    }, 0);
  } catch (error) {
    console.error('Error calculating total:', error);
    return 0;
  }
}

AI-Powered Workflows

1. Test-Driven Development

You: I want to create a function that validates passwords. Can you help me write tests first?

AI: Great approach! Here are comprehensive tests for password validation:

// passwordValidator.test.ts
import { validatePassword } from './passwordValidator';

describe('Password Validator', () => {
  test('should accept valid passwords', () => {
    expect(validatePassword('StrongPass123!')).toBe(true);
    expect(validatePassword('MySecure@Pass1')).toBe(true);
  });

  test('should reject passwords that are too short', () => {
    expect(validatePassword('Short1!')).toBe(false);
  });

  test('should reject passwords without uppercase letters', () => {
    expect(validatePassword('lowercase123!')).toBe(false);
  });

  test('should reject passwords without numbers', () => {
    expect(validatePassword('NoNumbers!')).toBe(false);
  });

  test('should reject passwords without special characters', () => {
    expect(validatePassword('NoSpecialChars123')).toBe(false);
  });
});

Now, would you like me to implement the function that passes these tests?

2. Code Refactoring

You: Can you help me refactor this component to use custom hooks?

const UserProfile = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUser()
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>No user found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

AI: Here's the refactored version using a custom hook:

// hooks/useUser.ts
import { useState, useEffect } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

interface UseUserReturn {
  user: User | null;
  loading: boolean;
  error: Error | null;
  refetch: () => void;
}

export const useUser = (): UseUserReturn => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchUserData = async () => {
    try {
      setLoading(true);
      setError(null);
      const userData = await fetchUser();
      setUser(userData);
    } catch (err) {
      setError(err as Error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUserData();
  }, []);

  return { user, loading, error, refetch: fetchUserData };
};

// UserProfile.tsx
import React from 'react';
import { useUser } from './hooks/useUser';

const UserProfile: React.FC = () => {
  const { user, loading, error } = useUser();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>No user found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

export default UserProfile;

Advanced Tips

1. Multi-turn Conversations

Build complex solutions through iterative conversations:

Turn 1: "Create a todo app component"
Turn 2: "Add the ability to mark todos as complete"
Turn 3: "Add filtering by status (all, active, completed)"
Turn 4: "Add local storage persistence"
Turn 5: "Add drag and drop reordering"

2. Code Explanation

You: Can you explain this complex regex?

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/

AI: This regex validates strong passwords. Let me break it down:

/^                     - Start of string
(?=.*[a-z])           - Positive lookahead: must contain lowercase letter
(?=.*[A-Z])           - Positive lookahead: must contain uppercase letter
(?=.*\d)              - Positive lookahead: must contain digit
(?=.*[@$!%*?&])       - Positive lookahead: must contain special character
[A-Za-z\d@$!%*?&]{8,} - Match 8+ characters from allowed set
$/                     - End of string

The lookaheads ensure all requirements are met without consuming characters.

3. Architecture Discussions

You: I'm building a large React app. What's the best state management approach?

AI: For large React apps, here are the main options:

1. **Redux Toolkit (Recommended for complex apps)**:
   - Predictable state updates
   - Excellent DevTools
   - Great for apps with complex state logic
   - Time-travel debugging

2. **Zustand (Recommended for medium apps)**:
   - Simpler than Redux
   - Less boilerplate
   - TypeScript-friendly
   - Good performance

3. **React Context + useReducer (For simpler apps)**:
   - Built into React
   - Good for theme, auth, or simple global state
   - Can cause performance issues with frequent updates

For your use case, I'd recommend Zustand if you want simplicity, or Redux Toolkit if you need advanced features like middleware, persistence, or complex async logic.

Would you like me to show you how to set up either of these?

Troubleshooting AI Chat

Common Issues

AI not responding:

1. Check your internet connection
2. Refresh the IDE
3. Try rephrasing your question

Incomplete responses:

1. Ask for continuation: "Please continue"
2. Be more specific in your request
3. Break complex requests into smaller parts

Outdated suggestions:

1. Specify the version you're using
2. Mention current best practices
3. Ask for the latest approach

Getting Better Results

1. Include error messages when debugging
2. Specify your tech stack (React, Vue, Angular, etc.)
3. Mention your experience level (beginner, intermediate, advanced)
4. Ask for explanations when you don't understand
5. Request alternatives when the first solution doesn't fit

Next Steps

Now that you've mastered AI chat, explore:

1. Code Generation Tutorial - Advanced AI-powered development
2. IDE Functions - Discover more Trae features
3. Project Development - End-to-end development workflow

Conclusion

Trae's AI assistant is a powerful tool that can significantly accelerate your development workflow. The key to getting the most out of it is to:

• Be specific and provide context
• Iterate and refine your requests
• Use it for learning and understanding
• Combine AI suggestions with your own expertise

Happy coding with AI! 🤖✨