How to Install and Run Agent Native Slides Locally
Step-by-step guide to installing Agent Native Slides locally with Node, PNPM, and a connected model, including Ollama support.
What is Agent Native Slides?
Agent Native Slides is an open-source example app built on Agent Native, a TypeScript framework from Builder for creating applications that an AI agent and a human can both work inside. Instead of treating the agent as a separate chat window bolted onto your software, Agent Native wires the agent into the same actions, data, and UI state that the person using the app sees. The Slides app is the reference example: a presentation editor where you can manually edit a heading, drag a slide into a new position, then ask the agent to keep working from that exact updated version, not from an outdated copy.
TL;DR
- Agent Native Slides is a self-hostable starter project you install with a single
npxcommand, not a hosted-only product. - The install requires Node 22.22 or later and PNPM, with
corepack enableas the fallback if PNPM isn’t already available. - After running
pnpm dev, the local app opens in your browser and offers a “continue as local dev” onboarding path before you connect a model. - You can connect a model through Builder’s own provider, your own API key connection (such as OpenRouter), or a local Ollama model.
- The framework is free and open source, but any model calls you make still carry the usual provider or compute costs.
- The real value shows up when you open the generated project in a coding agent like Claude Code or Codex and ask it to extend the app’s shared actions.
- The example apps are labeled alpha, so treat agent-driven edits as something to review, not something to trust blindly.
What do you need installed before you start?
You need two things on your machine: a current Node.js version (22.22 or later) and PNPM as your package manager. If PNPM isn’t already installed, the project’s getting-started guide points you to corepack enable, which ships with modern Node installs and lets you activate PNPM without a separate global install. Once both are available, everything else happens inside a project folder that the setup command generates for you.
There’s no database server or container setup required to get a local copy running. The starter project is meant to be cloned down, installed, and run with a couple of terminal commands, and the actual app code lives in your own repository afterward, not in a hosted black box.
How do you install Agent Native Slides locally?
Open a terminal in the folder where you keep your projects and run the scaffolding command for the Slides template. The command uses npx with the --yes flag so it doesn’t pause for confirmation, pulls the latest @agent-native/core package, and generates a new project directory using the standalone deployment mode and the slides template.
Once the command finishes, move into the generated folder with cd, then install dependencies with pnpm install. After that completes, start the local dev server with pnpm dev. The terminal prints a local address (the usual localhost URL with a port number). Open that address in your browser and you’ll land on the app’s local onboarding screen.
From there, choose “continue as local dev.” This is the point where the app asks you to connect a model, which is a separate step from simply having the server running.
How do you connect a model, including Ollama?
The local onboarding flow gives you three documented paths for connecting a model: use Builder’s own hosted model access, connect your own provider (an API key setup, with OpenRouter being one example used in walkthroughs of the hosted version), or point the app at a local Ollama model running on your machine.
If you’ve used Ollama before, this is the more self-contained option: no API key, no external billing, just a model running locally that the app talks to over your machine’s own network. If you go with a hosted provider instead, make sure the connection step actually completes. It’s easy to sign into the app itself and assume you’re ready, when the composer is still waiting on a model connection. If the prompt box in the UI still reads something like “connect agent” or “connect keys,” go back into model settings and confirm both the provider connection and a selected default model before trying to generate a deck.
The framework itself doesn’t charge anything, it’s free and open source. What costs money, if anything, is the model usage itself: hosted provider calls bill through that provider’s normal pricing, and Builder’s own setup offers some free credits, though the exact allowance is something you should check at sign-in rather than assume.
Remy doesn't write the code. It manages the agents who do.
Remy runs the project. The specialists do the work. You work with the PM, not the implementers.
What does the generated project look like once it’s running?
Inside the generated folder, the structure follows Agent Native’s core pattern: actions, schemas, and a run function for each operation the app supports. For Slides, the key operation is a slide update action. It’s defined with a description of what the operation does, a schema that specifies its inputs (things like a deck ID and slide ID, plus either a targeted text replacement or full new slide content), and a run function that performs the edit, checks editor access, and notifies any connected clients once the change saves.
This is the part worth reading closely if you’re planning to build your own app on the framework rather than just running the Slides demo. React components call these actions through hooks (a read hook and a mutation hook), and the same actions are also exposed over HTTP and MCP, so an external agent can call the identical operation that your UI calls. The browser editor in Slides actually routes manual edits through a more granular “patch deck” action, while the embedded agent uses the higher-level “update slide” action, but both operations work against the same stored deck and the same locking mechanism. That shared foundation is what keeps a manual edit and an agent edit from stepping on each other.
How do you customize or extend the app after installing it?
Once the project is running locally, the natural next step is opening it in a coding agent like Claude Code or Codex and asking it to extend the app. The pattern that works best is specific: ask the coding agent to inspect the existing project structure first, then describe a concrete feature in plain language, referencing the existing action patterns so the new feature fits the same shared-action model rather than creating a parallel, disconnected system.
A reasonable test feature is a small review checklist attached to each deck, something a person can tick through the UI and the embedded agent can also read and update through the same saved record. After the coding agent implements it, run the app locally, tick an item yourself, then ask the agent which items remain incomplete. If the agent’s answer matches what you just changed by hand, the shared state is wired correctly. If it doesn’t, that’s a sign the new feature isn’t actually hooked into the same action and context layer as the rest of the app, and it needs another pass.
Is it worth running this locally versus using it hosted?
Other agents start typing. Remy starts asking.
Scoping, trade-offs, edge cases — the real work. Before a line of code.
Running it locally makes the most sense if you intend to modify the app itself, since the point of the open-source starter is that the code lives in your own repository and a coding agent can extend it. If you just want to try the editing and agent-handoff workflow without touching code, the hosted version requires less setup. Either way, start small: build a short deck, avoid generating unnecessary images, and focus on understanding how edits move between the manual interface and the agent before layering on custom features. The example apps are explicitly labeled alpha, so expect to still do your own evaluation of model behavior, prompt wording, and how your custom actions handle edge cases like empty fields or conflicting edits.
Frequently Asked Questions
What Node.js version does Agent Native Slides require?
Node 22.22 or later, along with PNPM as the package manager for installing dependencies and running the dev server.
Can I run Agent Native Slides without an internet-based model provider?
Yes. The local setup documents a local Ollama model as one of the supported connection options alongside Builder’s own provider and bring-your-own-key setups.
Is Agent Native Slides free to use?
The framework and the Slides starter project are free and open source. Costs come from whichever model provider you connect, since token usage or hosted compute typically carries its own pricing.
What exactly does the “update slide” action do?
It’s a defined operation with a schema (deck ID, slide ID, and either a targeted text replacement or new slide content) and a run function that checks editor access, applies the change, and notifies connected clients, allowing both the UI and the embedded agent to edit the same deck safely.
Do I need to know React to customize the app?
The framework is built on React and exposes actions through React hooks, so familiarity with React helps for deep customization. That said, using a coding agent to describe desired features in plain language and have it follow the existing action patterns lowers that barrier considerably.