---
title: ToolRouter — Agent Use Case Guide
description: Step-by-step guide for completing a task with a specific AI agent using ToolRouter.
url: https://toolrouter.com/tools/sound-effect-generator/use-cases/create-ui-sound-effects/copilot
---
# How to Create UI Sound Effects with Copilot

Copilot generates UI sound effects within your IDE and can produce the React hooks or event listeners to play them in the same session. This tight integration between audio assets and playback code keeps your UI sound implementation part of your development workflow.

## Setup

{"mcpServers":{"toolrouter":{"command":"npx","args":["-y","toolrouter-mcp"]}}}

## Steps

1. Add ToolRouter to Copilot MCP config
2. In Copilot Chat: "Generate UI sound effects for these interactions" and list them
3. Copilot creates each sound file
4. Ask for the integration code to play sounds on user interactions
5. Download files and add the playback code to your project

## Example Prompt

```
Generate UI sounds for a React app: button press, form submit success, validation error, and navigation transition.
```

## Tips

- Copilot can generate the audio files and the React hooks to play them together
- Store UI sounds as small base64 strings for instant loading without network requests
- Test sounds on multiple devices -- they should sound good on phone and laptop speakers
