Agent-Native Design

io.github.BuilderIOPublished by GitHub account BuilderIOv1.0.0Updated Oct 24, 2026

Agent-Native design tool - create and edit visual designs with agent assistance

The publisher's own server: NativeExpress

VerifiedStreamable HTTPWeb executableProductivity & WorkflowMedia & Design

Overview

AI-generated overview

Remote Agent-Native Design server that lets an assistant create and refine visual designs and interactive UI work in a shared workspace.

What you can do
  • Create and edit visual designs with agent assistance
  • Generate and refine interactive designs and on-brand media
  • Build visual plans with diagrams, wireframes and prototypes
  • Work through a shared action layer so agent and UI changes stay in sync
When to use it
Useful when you want an assistant to draft or iterate on visual designs, wireframes or prototypes inside the Agent-Native workspace rather than only in text.
Requirements
A remote streamable HTTP endpoint at design.agent-native.com; OAuth sign-in is required. No environment variables or headers are declared.
Before you install
Sign-in is via OAuth, so the assistant acts under your account in a shared workspace where agent and UI edits affect the same data. Design edits are written to that workspace.

Installation

In SourceWeft

  1. Open Agent-Native Design in the dashboard and add it to a workspace.
  2. Connect the required credentials. They are stored privately and never shown on public pages.
  3. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/io.github.BuilderIO%2Fagent-native-design/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config. The client completes OAuth sign-in on first connect.

{
  "mcpServers": {
    "agent-native-design": {
      "type": "http",
      "url": "https://design.agent-native.com/mcp"
    }
  }
}

README

[Agent-Native: The agentic application framework]

Agent-Native

Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Define each capability once as an action: the agent uses it as a tool, and the UI calls it from code.

Quick start

bash
npx --yes @agent-native/core@latest create my-agent --standalone --template chat

Follow the getting started guide for a full intro to the framework.

Why build agents with UIs?

Coding agents work with more than a text box. Their environment provides context, tools, files, tests, and previews that make their capabilities and results visible.

Knowledge work needs that same kind of environment. A UI shows what an agent can do and gives people familiar ways to inspect, edit, approve, and share its work.

How Agent-Native works

  • Shared actions. The agent calls each capability as a tool, and the UI calls it from code. Both paths use the same validation, permissions, and implementation.
  • Shared data. Work done by the agent appears in the UI, and work done in the UI is available to the agent.
  • Shared application state. The agent receives relevant UI state, such as the current page, selected record, or active view.

The agent does not click through the UI. It works through the same action layer as the UI.

Example: a shared action

Create actions/hello.ts:

ts
import { defineAction } from "@agent-native/core/action";import { z } from "zod";
// One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.export default defineAction({  description: "Return a friendly greeting.",  schema: z.object({    name: z.string().default("world").describe("Name to greet"),  }),  http: { method: "GET" },  run: async ({ name }) => {    return { message: `Hello, ${name}!` };  },});

The agent receives hello as a tool. React calls the same function with useActionQuery("hello", { name: "Alex" }). Agent-Native also exposes it through HTTP, MCP, A2A, and the CLI.

Included

  • Agent chat: Let people delegate work, ask questions, and review results in the same UI.
  • Authentication and permissions: Control who can access and change shared work.
  • Skills and memory: Give agents reusable expertise and persistent context.
  • Automations: Run agent work on schedules or events.
  • Agent teams: Delegate work to specialist agents in the same workspace or across connected agents.
  • PostgreSQL backend: Use PostgreSQL in production and PGlite for local development on any Nitro-compatible host.

Example: edit a running app visually

Use /visual-edit in Claude Code to edit a running app on a canvas instead of prompting for each small UI nudge. Compare live pages together, then ask Claude to apply the chosen edits to your source. For example:

text
/visual-edit the onboarding flow, plus home at every breakpoint

Review the onboarding screens alongside Home at desktop, tablet, and mobile sizes, adjust a button's color or spacing directly, then ask Claude to apply the pending edits to your source. See the Visual Edit guide for the full walkthrough and sharing details.

Bring your LLM, SQL database, tools, and infrastructure. Everything you build stays yours.

See Agent-Native in action:

https://github.com/user-attachments/assets/ef51644b-6506-46d8-8083-0af7b7e5b65c


Open-source agents

Start from one of these agents or use it as an example for your own. For a source-to-answer architecture example, see Brain’s visual overview.



Clips

[Clips app screenshot]

Record and understand meetings, screens, and voice notes.



Design

[Design app screenshot]

Generate and refine interactive designs.



Slides

[Slides app screenshot]

Create and edit on-brand presentations.



Analytics

[Analytics app screenshot]

Ask questions of your data and build dashboards.



Calendar

[Calendar app screenshot]

Find time, schedule events, and manage bookings.



Mail

[Mail app screenshot]

Prioritize email, draft replies, and follow up.



Assets

[Assets app screenshot]

Create and organize on-brand media.



Content

[Content app screenshot]

Draft, organize, and publish content.



Plans

[Plans app screenshot]

Create and review visual plans with diagrams, wireframes, and prototypes.


Explore the full app gallery, or start with the framework guide.

Documentation and community

Contributing

Want to send a change back? Start with CONTRIBUTING.md. DEVELOPMENT.md covers local setup, workspace structure, and guard scripts.

License

MIT

Source: README.md at commit ee6264c

Tools

0
This server asks you to sign in, so SourceWeft could not read its tools without an account and has not indexed them. What a connected account sees can depend on that account and its permissions.

Version history

1
  1. v1.0.0LatestSep 16, 2026

Score

85% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts

Other Native integrations