apps/docs/src/content/docs/en/guides/agentkit/inngest-agentkit-coding-agent.mdx
import { Image } from 'astro:assets'
import notesAppResult from '../../../../../assets/docs/images/inngest-agentkit-notes-app.gif'
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.
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.
Clone the repository and navigate to the example directory:
git clone https://github.com/daytonaio/daytona.git
cd daytona/guides/typescript/agentkit-inngest/coding-agent/anthropic
Get your API keys:
Copy .env.example to .env and add your keys:
DAYTONA_API_KEY=your_daytona_key
ANTHROPIC_API_KEY=your_anthropic_key
:::note[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:
npm install
Run the agent:
npm run start
Build the Docker image:
docker buildx build . -t coding-agent
Run the container:
docker run --rm -it coding-agent
network.run(...) in src/index.ts to change the agent's task.enableDebugLogs=true for detailed agent flow tracking.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:
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={notesAppResult} alt="Notes app demo generated by coding agent" width={600} style="max-width: 100%; height: auto; margin: 1rem 0;" />
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:
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
Agent message:
Now, I'll navigate to the project directory and install dependencies:
Tool used:
shellTool was called with command:
cd notes && npm install
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)
Agent message:
Now, I'll start the development server:
Tool used:
startDevServerTool was called with command:
cd notes && npm run dev
Agent message:
Let's check the dev server health:
Tool used:
checkDevServerHealthTool was called to verify that the development server is running and accessible.
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: