# Source: https://www.daytona.io/docs/en/guides/agentkit/inngest-agentkit-coding-agent.md

import { Image } from 'astro:assets'

import notesAppDemo from '../../../../../assets/docs/images/inngest-agentkit-coding-agent-notes-app-demo.png'

This guide demonstrates how to set up and use a fully autonomous coding agent that performs software development tasks in a [Daytona](https://daytona.io) sandbox environment. The agent is built using [AgentKit](https://agentkit.inngest.com/) 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](https://github.com/daytonaio/inngest-agentkit-coding-agent.git) :

```bash
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](https://app.daytona.io/dashboard/keys)
- **Anthropic API key:** [Anthropic Console](https://console.anthropic.com/)

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

```bash
DAYTONA_API_KEY=your_daytona_key
ANTHROPIC_API_KEY=your_anthropic_key
```

#### Local Usage

:::caution[Node.js version]
Node.js 18 or newer is required to run the coding agent locally. Please ensure your environment meets this requirement before proceeding.
:::

Install dependencies:

```bash
npm install
```

Run the agent:

```bash
npm run start
```

#### Docker

Build the Docker image:

```bash
docker buildx build . -t coding-agent
```

Run the container:

```bash
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`:

```typescript
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:

<Image
  src={notesAppDemo}
  alt="Notes app demo generated by coding agent"
  width={600}
  style="max-width: 100%; height: auto; margin: 1rem 0;"
/>

### 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