Skip to main content

​
Advanced customization

The Code Editor provides direct access to your agent’s underlying code for precise customization beyond natural language descriptions.

​
File structure overview

Directory organization

  • src/: Main source directory
    • components/: UI components
    • pages/: Interface files
    • styles/: CSS files
  • config/: Behavior configuration
  • index.tsx: Main entry point
  • components/*.tsx: UI components
  • styles/globals.css: Global styling
  • config/agent.json: Core configuration
Incorrect changes can affect functionality. Consider duplicating your agent before making significant modifications.

​
Basic operations

1

Access editor

Click “Code” or “Code Editor” from your agent’s dashboard.
2

Browse files

Use the file tree on the left to select files.
3

Edit code

Make changes in the editor with syntax highlighting.
4

Save work

Click “Save” or press Ctrl+S (Cmd+S on Mac).
5

Test changes

Use “Test Agent” to verify behavior.

​
Common customizations

// Example: Customizing the welcome message in index.tsx
export default function Home() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome to my application</p>
    </div>
  );
}
Start with small changes and test frequently to ensure your agent continues functioning as expected.
⌘I