Build & Deploy a Frontend App for Claude Agents using Claude Code

Prompt to Generate a Complete Frontend App

Email Draft Testing Prompt (Agent Task)

Steps to Integrate an Agent into Frontend Using Claude Code

1. Open the Claude Console and select the Managed Agent you have built.
2. Click on the 'Integrate' tab or section to view the deployment instructions.
3. Find the 'Scaffold in Claude Code' section and click the 'Copy' button on the provided prompt.
4. Open your terminal and create a new project folder (e.g., 'mkdir email-managed-agent').
5. Navigate into that folder and launch Claude Code.
6. Paste the copied scaffold prompt into Claude Code and press Enter.
7. If Claude Code asks for an API Key, do not close the original Quick Start screen. Open a new tab and navigate to 'Manage' > 'API Keys' in the Anthropic Console.
8. Click 'Create API Key', give it a name (e.g., 'email-managed-agent'), copy the key, and save it in a safe place.
9. Set the API key in your Claude Code environment as instructed in the terminal.
10. Inform Claude Code that the API key has been set by typing 'I've set the API key, ready to go'.
11. Wait for Claude Code to finish automatically generating the folder structure and frontend code.
12. Once ready, run the application locally using the command provided by Claude Code (usually 'npm run dev' or similar).
13. Open your web browser and access the displayed localhost URL to see your agent's frontend.