---
title: "Add it to your coding agent"
description: "Lesson 14.1 of Creator Terminal's lesson films (Agents and the command line): Add Creator Terminal to Codex or Claude Code with one line, then ask your agent for an animation in your own project."
canonical: "https://terminal.lottiefiles.com/add-it-to-your-coding-agent/"
last_updated: 2026-11-08
---

# Add it to your coding agent

> Lesson 14.1 of Creator Terminal's lesson films (Agents and the command line): Add Creator Terminal to Codex or Claude Code with one line, then ask your agent for an animation in your own project.

- The film (1:42): https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/88ead43daba6/14.1-add-it-to-your-coding-agent.mp4
- Vertical cut: https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/873be07f545e/14.1-add-it-to-your-coding-agent-vertical.mp4
- Captions: https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/b86a1bf89bac/14.1-add-it-to-your-coding-agent.vtt
- The page: https://terminal.lottiefiles.com/add-it-to-your-coding-agent/
- A file the film uses: https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/a2a7d53ad151/kinlo.zip

## Step by step

Creator Terminal is also an MCP server: a set of tools that any coding agent that speaks MCP can
use, such as Claude Code, Codex, Cursor or Claude Desktop. Add it once, and you can ask your agent
for an animation the way you ask it for code, right in your project's folder. It makes real layers,
keys and eases, so what it makes opens in Creator Terminal for you to change. In this tutorial
you'll add it to Codex, check it's there, and see what Codex made for a small travel app, Kinlo,
when we asked it for a loader.

### Before you start

- Creator Terminal, installed ([Install Creator Terminal](/install/)).
- A coding agent, installed and signed in: Claude Code (`claude`), Codex (`codex`), or another app
  that speaks MCP.
- To follow along with the same project, `kinlo.zip` from **Follow along** on this page: unzip it,
  and open a terminal in its folder.

### 1. Open your project

Open a terminal in your project's folder, the one your coding agent works in. For Kinlo:

```sh
cd Documents/kinlo
```

![A terminal in the Kinlo project's folder.](https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/d062f0f97bf0/add-it-to-your-coding-agent-a-terminal-in-the-kinlo-project-s-folder.webp)

### 2. Add it to your agent

`creator-tui mcp` is the server. Add it to your agent once, with the line for your app:

```sh
codex mcp add creator-tui -- creator-tui mcp
```

Codex answers **Added global MCP server 'creator-tui'.** In Claude Code, it's the same line,
starting with `claude`:

```sh
claude mcp add creator-tui -- creator-tui mcp
```

![Codex adding Creator Terminal as an MCP server, with one line.](https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/f1ac201676d7/add-it-to-your-coding-agent-codex-adding-creator-terminal-as-an-mcp-server.webp)

Other apps keep their servers in a settings file. In Claude Desktop or Cursor, add this to their
MCP settings, with the full path to `creator-tui` (`which creator-tui` prints it), as an app opened
from the Dock may not look where the install put it:

```json
{
  "mcpServers": {
    "creator-tui": { "command": "/Users/you/.local/bin/creator-tui", "args": ["mcp"] }
  }
}
```

The manual's [Other AI apps](/docs/mcp/) page has the line for VS Code and OpenCode, and where each
app keeps its settings.

### 3. Check it's there

List your agent's servers:

```sh
codex mcp list
```

**creator-tui** is in the list, **enabled**. (In Claude Code, `claude mcp list` says it's
**Connected**.) That's all the setup there is.

![Codex's servers: creator-tui, enabled.](https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/3ddb35f95891/add-it-to-your-coding-agent-codex-s-servers-creator-tui-enabled.webp)

### 4. Ask for it

Open your agent in the project (`codex` or `claude`) and ask for an animation the way you'd ask
for code: what it's for, how long, its colours, and where to save it. We asked Codex:

```text
Make a loading animation for Kinlo's trip search, with Creator Terminal: two seconds, looping seamlessly, in Kinlo's own colours (the README has them). Make it in a new document at animations/loader.ctd, and export a dotLottie of it to public/loader.lottie for the app.
```

Codex read the README for Kinlo's colours, made a new document, and built the loader with Creator
Terminal's tools: a coral badge, a sun with its position keyed, and two waves whose shapes change
and change back. It looked at its frames to check that the loop's first and last match, then saved
the document and exported the dotLottie.

With no Creator Terminal open, your agent works in a document of its own, saved as it goes. With
Creator Terminal open, it works in the document in front of you instead, where you can watch: the
layer it touches is selected, the playhead goes where it keys, and everything it did is one undo
step until you edit or save, so `u` takes it all back.

### 5. See what it made

About a minute later it was done. List the two folders:

```sh
ls animations public
```

`loader.ctd` is the document it made, and `loader.lottie` the dotLottie for the app, both where we
asked.

![The document in animations and the dotLottie in public.](https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/bcb10e1a5e75/add-it-to-your-coding-agent-the-document-in-animations-and-the-dotlottie-in.webp)

### 6. Open it in Creator Terminal

```sh
creator-tui animations/loader.ctd
```

Press `space` to play it: a sun bobbing over a rocking wave, from Kinlo's logo, looping every two
seconds.

![The loader open in Creator Terminal: a sun over a wave on a coral badge.](https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/5e6751068b5b/add-it-to-your-coding-agent-the-loader-open-in-creator-terminal-a-sun.webp)

### 7. Make it yours

Press `space` to stop, and click the sun on the stage (the canvas). It's a layer like any other:
the rail on the right (the Properties panel) shows its values, and the score at the bottom (the
timeline) shows its keys (keyframes). Change anything by hand, or ask the copilot (`/`).

![The sun selected: its values on the rail and its keys in the score.](https://terminal.lottiefiles.com/media/14.1-add-it-to-your-coding-agent/922ab3327eb9/add-it-to-your-coding-agent-the-sun-selected-its-values-on-the-rail.webp)

### What you learned

- `creator-tui mcp` is an MCP server. Add it to your agent with one line:
  `codex mcp add creator-tui -- creator-tui mcp`, or the same with `claude`.
- Ask your agent for an animation the way you ask for code. What it makes is a document of layers
  and keys, and exports for your app, where you ask for them.
- With Creator Terminal open, your agent works in the document in front of you; `u` undoes all of
  it.

The manual's [Other AI apps](/docs/mcp/) page has every tool your agent gets, and its own `ask`,
which hands a whole brief to Creator Terminal's copilot.

## In this lesson

### Your project (0:08)

Here's Kinlo, a little travel app. Its code is in this folder, and this is where your coding agent works.

### Add it (0:17)

Creator Terminal is an MCP server, a set of tools any coding agent can use. Add it to yours with one line. This is Codex. In Claude Code, it's the same line, starting with claude.

### Check it (0:30)

List your agent's servers, and there it is, creator-tui, enabled. That's all the setup there is.

### Ask for it (0:39)

Now ask your agent for an animation, just as you'd ask for code. We asked Codex for a two-second loader, in Kinlo's own colours, saved in the project. It read the README for the colours, then made it with Creator Terminal's tools, layers, keys and eases, and looked at its frames as it went.

### What it made (0:57)

About a minute later, it was done. Here's the document it made, and a dotLottie for the app, right where we asked.

### Open it (1:05)

Open the document in Creator Terminal, with creator-tui and its name. Here's the loader Codex made. Press space. A sun bobbing over a rocking wave, straight from Kinlo's logo.

### It's yours (1:19)

Press space to stop, and click the sun. It's a layer like any other, with its keys in the score, yours to change, by hand or with the copilot. And with Creator Terminal open, your agent works right here, in the document in front, where you can watch it.