Skip to content
← All connectors
Developer

Better Design

Use Better Design with AI apps and agents through Vercel Connect. Follow a complete setup guide for secure runtime access.

Create Connector

  1. Install the skill

    $ npx skills add vercel/vercel-plugin --skill vercel-connect

  2. Connect to Better Design

    Via CLIVercel Dashboard(opens in new tab)
    $ vercel connect create better-design --name acme-better-design

  3. Use its data in agents(opens in new tab) and apps(opens in new tab)

    import { getToken } from '@vercel/connect';
    

    const userId = 'user_123';
    

    const token = await getToken('better-design/acme-better-design', {
      subject: { type: 'user', id: userId },
    });

Use Better Design in apps and agents

Give coding agents design systems, UI principles, icons, and UI review.

Read the Better Design developer docs(opens in new tab)

Why use Vercel Connect with Better Design?

  • Credentials on demand

    Request Better Design credentials only when your application or agent needs them instead of copying secrets into application code.

  • Access for the right subject

    Request user-authorized Better Design access so actions follow the identity and permissions of the person using your application.

  • Centralized credential management

    Manage Better Design credentials in one place and retrieve them through a consistent runtime API.

  • Vercel-native controls

    Bind connections to the projects and environments that need them while Vercel OIDC authenticates each runtime request.

Use Better Design with your stack

Follow a complete setup for the Connect SDK or a supported agent framework.

Add Better Design to an existing Vercel application with the Connect SDK.

  1. Install the Connect SDK

    npm install @vercel/connect

  2. Create the Better Design connector

    Run these commands from the project that will use the connection.

    vercel link
    vercel connect create better-design --name acme-better-design
    vercel env pull

  3. Request Better Design credentials

    app/api/route.ts
    import { getToken } from '@vercel/connect';
    

    const userId = 'user_123';
    

    const token = await getToken('better-design/acme-better-design', {
      subject: { type: 'user', id: userId },
    });

More connectors like Better Design

Browse all connectors