On this page

Custom Appearance

When developing a conversation application using the AI Agent SDK, you can customize any aspect of the application's appearance by simply creating a CSS file in your project and overriding the corresponding component styles.

For more detailed information, please visit Customizing Appearance and Functionality.

/* Modify the background color of message bubbles */
.t-agent-message-list-row-start .t-agent-bubble-tile-bubble {
  background-color: blue;
}
import './custom-style.css';

const createAgent = () => {
  // ...
  return agent;
};

export default function ChatPage() {
  // ...
}