Build Coding Agent Using AgentKit and Daytona

This guide demonstrates how to set up and use a fully autonomous coding agent that performs software development tasks in a Daytona sandbox environment. The agent is built using AgentKit and leverages Daytona sandboxes for secure, isolated execution. It can create web apps, run tests, execute scripts, and more; automating multi-step workflows based on user prompts.

1. Workflow Overview

You provide a natural language prompt describing the software task. The agent reasons about your request, plans the steps, and executes them securely in a Daytona sandbox; handling everything from project setup to live previews.

2. Project Setup

Clone the Repository

First, clone the integration repository :

git https://github.com/daytonaio/inngest-agentkit-coding-agent.git
cd inngest-agentkit-coding-agent

Configure Environment

Get your API keys:

• Daytona API key: Daytona Dashboard
• Anthropic API key: Anthropic Console

Copy .env.example to .env and add your keys:

DAYTONA_API_KEY=your_daytona_key
ANTHROPIC_API_KEY=your_anthropic_key

Local Usage

Install dependencies:

npm install

Run the agent:

npm run start

Docker

Build the Docker image:

docker buildx build . -t coding-agent

Run the container:

docker run --rm -it coding-agent

3. Configuration

• Prompt Setting: Edit the main prompt in network.run(...) in src/index.ts to change the agent’s task.
• Debug Logs: Set enableDebugLogs=true for detailed agent flow tracking.

4. Example Usage

Try the default prompt in src/index.ts:

const result = await network.run(
  `Create a minimal React app called "Notes" that lets users add, view, and delete notes. Each note should have a title and content. Use Create React App or Vite for setup. Include a simple UI with a form to add notes and a list to display them.`
)

The agent will:

• Scaffold the app
• Install dependencies
• Start the dev server
• Generate a preview link

Terminal output example:

✔️ App is ready!
Preview: https://5173-3a828150-1573-42e3-bf9f-9793a2c2c0c2.proxy.daytona.works

The image below shows the result generated in this run:

5. Understanding the Agent’s Execution Flow

The agent operates by leveraging a large language model (LLM) under the hood and has access to a suite of specialized tools. These tools enable the agent to perform everything needed inside the Daytona sandbox environment; from project setup to app deployment. At each step, the agent reasons about the current goal, decides which tool to call, and orchestrates the workflow to achieve the desired outcome.

Below is a step-by-step breakdown of how the agent builds the demo Notes app showing each iteration, the agent’s message, and the tool used:

Project Initialization

Agent message:

I'll create a React app for Notes using Vite, which provides a faster and more modern setup compared to Create React App. I'll break this down into steps:
- First, I'll create the project using Vite
- Install necessary dependencies
- Create the components for the Notes app
- Implement the core functionality

Let's get started:

Tool used:

shellTool was called with command:

npm create vite@latest notes -- --template react

Install Dependencies

Agent message:

Now, I'll navigate to the project directory and install dependencies:

Tool used:

shellTool was called with command:

cd notes && npm install

Create Components & Update App Structure

Agent message:

Now, I'll create the necessary components and update the app structure:
1. Update App.jsx
2. Update App.css for basic styling

Tool used:

uploadFilesTool was called to upload:

App.jsx (main component logic)
App.css (basic styling)

Start Development Server

Agent message:

Now, I'll start the development server:

Tool used:

startDevServerTool was called with command:

cd notes && npm run dev

Check Dev Server Health

Agent message:

Let's check the dev server health:

Tool used:

checkDevServerHealthTool was called to verify that the development server is running and accessible.

App Summary & Features

Agent message:

Great! I've created a minimal React Notes app with the following features:
- Add notes with a title and content
- View the list of notes
- Delete individual notes
- Basic responsive styling

Key details:
- Used Vite for project setup
- Implemented state management with React hooks (useState)
- Simple form for adding notes
- Notes are stored in local state
- Each note has a unique ID, title, and content
- Delete functionality for individual notes

DEV_SERVER_PORT=5173

TASK_COMPLETED

The app is now running and ready to use. Users can:
1. Enter a note title in the first input
2. Enter note content in the textarea
3. Click "Add Note" to save the note
4. View notes in the list below
5. Delete notes by clicking the "Delete" button next to each note

Would you like me to explain any part of the implementation or make any modifications?

Notice DEV_SERVER_PORT and TASK_COMPLETED fields in the agent output message.

DEV_SERVER_PORT value is auto-detected by the agent and used to generate the preview link for your app.

TASK_COMPLETED signals that the task is finished which is used inside the agent routing logic.

Key advantages:

• Secure, isolated execution
• Multi-language support
• Auto-detects dev server, starts it, and generates preview link
• Detailed debug logs for agent actions