> ## Documentation Index
> Fetch the complete documentation index at: https://docs.demiurg.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Editor

> Fine-tune your agent with custom code and advanced configurations

## Advanced customization

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

## File structure overview

<AccordionGroup>
  <Accordion title="Directory organization" icon="folder-tree" defaultOpen>
    * **src/**: Main source directory
      * **components/**: UI components
      * **pages/**: Interface files
      * **styles/**: CSS files
    * **config/**: Behavior configuration
  </Accordion>

  <Accordion title="Key files" icon="file-code">
    * **index.tsx**: Main entry point
    * **components/\*.tsx**: UI components
    * **styles/globals.css**: Global styling
    * **config/agent.json**: Core configuration
  </Accordion>
</AccordionGroup>

<Warning>
  Incorrect changes can affect functionality. Consider duplicating your agent before making significant modifications.
</Warning>

## Basic operations

<Steps>
  <Step title="Access editor">
    Click "Code" or "Code Editor" from your agent's dashboard.
  </Step>

  <Step title="Browse files">
    Use the file tree on the left to select files.
  </Step>

  <Step title="Edit code">
    Make changes in the editor with syntax highlighting.
  </Step>

  <Step title="Save work">
    Click "Save" or press Ctrl+S (Cmd+S on Mac).
  </Step>

  <Step title="Test changes">
    Use "Test Agent" to verify behavior.
  </Step>
</Steps>

## Common customizations

```jsx
// 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>
  );
}
```

<Tip>
  Start with small changes and test frequently to ensure your agent continues functioning as expected.
</Tip>