Agent-Native Design

io.github.BuilderIO由 GitHub 账号 BuilderIO 发布v1.0.0更新于 Oct 24, 2026

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

发布方自己的服务：NativeExpress

已验证Streamable HTTP可网页运行效率与工作流媒体与设计

服务详情

标识符: io.github.BuilderIO/agent-native-design
传输: Streamable HTTP
运行时: Web executable
信任: Verified
发布于: Sep 16, 2026

安全提示

MCP 服务会接收对话中的工具调用请求，并可能执行外部操作。启用前请先了解该服务能做什么，并只授予它所需的权限。

注册中心已验证此条目所属的 GitHub 账号 BuilderIO。这并不表明该账号就是产品方。

SourceWeft 的检查只涵盖条目是否完整、端点是否响应；不审查服务器的代码，也不审查其工具的行为。

在 README 中添加徽章

向读者展示该 MCP 服务已收录于 SourceWeft，徽章链接到本页。

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/io.github.BuilderIO%2Fagent-native-design.svg)](https://sourceweft.com/mcp/io.github.BuilderIO%2Fagent-native-design?utm_source=readme&utm_medium=badge)

概览

AI 生成的概览

远程 Agent-Native Design 服务器，让助手在共享工作区中创建和修改视觉设计及交互界面。

可以做什么: 在助手协助下创建和编辑视觉设计
生成并打磨交互式设计与品牌素材
制作包含图表、线框图和原型的设计方案
通过共享 action 层让助手与界面的改动保持同步
适用场景: 当你希望助手在 Agent-Native 工作区内起草或迭代视觉设计、线框图、原型，而不只是输出文字时使用。
运行要求: 需要连接 design.agent-native.com 的远程 streamable HTTP 端点，并通过 OAuth 登录。未声明环境变量或请求头。

安装前请注意

通过 OAuth 登录，助手以你的账号在共享工作区中操作，助手与界面的改动作用于同一份数据；设计修改会写入该工作区。

安装

在 SourceWeft 中

打开控制台中的 Agent-Native Design，将其添加到工作区。
连接所需的凭据。它们会被私密存储，绝不会在公开页面上展示。
为需要使用其工具的对话启用该服务。

Web executable，通过 Streamable HTTP。远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体，或 SourceWeft 对话中。智能体会读取该服务器的安装指南，先向你展示发布者、端点和登录方式，经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/io.github.BuilderIO%2Fagent-native-design/install.md，并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前，先告诉我它的发布者、端点和登录方式，等我确认。不要把 API 密钥写进命令或我会提交的文件；问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。客户端会在首次连接时完成 OAuth 登录。

{
  "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

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:

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}!` };  },});

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:

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