Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 54 additions & 29 deletions apps/dojo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,48 +22,73 @@ To run the Demo Viewer locally for development, follow these steps:
brew install protobuf
```

Note that running the dojo currently requires the use of `pnpm` (vs `yarn` or `npm`) do to how we handle workspace dependencies.
```bash
npm i turbo
curl -fsSL https://get.pnpm.io/install.sh | sh -
```

```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -
The first time you want to run, you need to build all of the dojos dependencies throught the repository.
```
# from the ag-ui repository root
pnpm i
pnpm build --filter=demo-viewer
```

### Run the Demo Viewer

In a new terminal, navigate to the project root and start the Demo Viewer:
There are 3 ways to run the demo viewer

```bash
pnpm install
pnpm run dev
```
- Run just the demo viewer, and run the agent(s) separately
- Run the dev script for the entire repo, and run the agent(s) separately
- use the `dojo-everything` scripts

The Demo Viewer should now be running at [http://localhost:3000](http://localhost:3000).
#### Run just the demo viewer, and run the agent(s) separately.

### Adding a new integration
In one terminal, you can `cd` into the dojo directory and run `pnpm dev` to just run the dojo
This will not capture updates to dependencies of the dojo
In another terminal, you'll need to run any other agents you want to test separately, see "Run Agents" below.
The dojo will start on port 3000 by default

Note that some agents may run on colliding ports

#### Run the dev script for the entire repo, and run the agent(s) separately
In one terminal, you can run `pnpm dev` from the *repository root*
This WILL automatically rebuild dependencies, for example if you change the mastra integration, it will automatically rebuild and be bundled into the dojo with HMR.
In another terminal, you'll need to run any other agents you want to test separately, see "Run Agents" below.
The dojo will start on port 3000 by default

On a fresh clone of this repo, you'll find that we've created a mock agent that represents all of the events needed to create an ACP compliant agent. To extend this to support
your own integration, you'll need to:
Note that some agents may run on colliding ports

1. Edit `src/examples/your-custom-http-agent.ts` to implement your own agent.
2. Alternatively, edit `src/examples/your-custom-agent.ts` to implement a non http based integration.
3. Read `src/app/api/sse/agentic_chat/route.ts` to understand what events need to be emitted on the agent side.
#### Run Agents
Agent examples for the dojo are generally located in `integrations/{integrationName}/{language}/examples`. A readme there should explain what you need to do to run the example, but it's usually either `npm dev` for typescript packages, or `poetry install && poetry run dev` or `uv sync && uv run dev` for python servers.

## Project Structure
Note that some agents may run on colliding ports

- `src/examples` - Example agents
- `src/app` - Next.js app router files
- `src/components` - Reusable UI components
- `src/demos` - Demo configuration and utilities
- `src/hooks` - Custom React hooks
- `src/types` - TypeScript type definitions
- `public` - Static assets
#### Use the `dojo-everything` scripts

## Technologies
These are the easiest ways to run everything. They will automatically configure all of your ports to not be colliding, provide that information to the dojo, and spin up the dojo.

- Next.js
- React
- TypeScript
- Tailwind CSS
- CopilotKit
```
# In the apps/dojo directory
./scripts/prep-dojo-everything.js
./scripts/run-dojo-everything.js
```

The demo viewer will now run on port 9999.

The one caveat here is that (for precompiled speed while running tests) this runs a production nextjs build, and that build has to be redone if you modify the dojo code at all (or any of the typescript integrations).

You can look in the `run-dojo-everything.js` script and see which ports it runs agents at, and export those as environment variables, which can be found in `apps/dojo/src/env.ts`. Then you can run the dojo via `pnpm dev` at the repo root, to get live updates to typescript integrations and the dojo. There is not HMR on most of the python framework agent examples.

To choose which agents or services the `run-dojo-everything.js` script runs you can use the `--only` flag, like this: `./scripts/run-dojo-everything.js --only adk-middleware,langgraph-fastapi`. The names for these IDs match what is in `src/agents.ts` as well as being findable in the run-dojo-everything script. .

### Adding a new integration
Integrations should go in `integrations/{integrationID}`. There should always be a typescript folder that at least contains the client, and possibly a python (or other language) folder.

To add it to the dojo, please make sure it gets added to
- src/agents.ts
- src/menu.ts
- scripts/prep-dojo-everything.js
- scripts/run-dojo-everything.js
- e2e.yml
- the `apps/dojo/e2e` folder, look in the tests folder of other frameworks, and you should be able to mostly dupiclate these.
Loading