MCP · Setup guide

Connect your AI assistant to DesignPal.

One command. Sign in with Google. Start describing the website you want — right inside the assistant you already use.

npx -y @designpal/agent-skills init
5 min setupNo API keyOAuth 2.1
Quick start

Three steps. Then you’re shipping.

You’ll need Node.js 18+ and a Google account. The CLI handles the rest.

  1. 1

    Initialize the server

    Run the initialization command at the root of your project.

    bash
    # Claude Code (default)
npx -y @designpal/agent-skills init

# Or pick a specific host
npx -y @designpal/agent-skills init cursor
npx -y @designpal/agent-skills init vscode
npx -y @designpal/agent-skills init windsurf
npx -y @designpal/agent-skills init codex
  2. 2

    Connect your AI assistant

    Open your MCP client and finish the connection.

    Claude Code

    Run /designpal to start a project — the CLI installs this slash command for you. Or run /mcp to inspect the server.

    Cursor / VS Code / Windsurf / Codex

    The CLI writes the right host-specific MCP config — you finish OAuth from that client’s MCP panel. In VS Code, use GitHub Copilot in Agent mode.

    What happens next
    A browser window opens to designpal.devfor the OAuth consent screen. Sign in with Google — that’s the only credential step. Your client caches the access token and refreshes it silently after that.
  3. 3

    Generate your first design

    Open your assistant and prompt it directly. It will route the call through the MCP server.

    Use DesignPal to build a landing page for a productivity app called FocusFlow. Dark, minimal aesthetic. Hero with an animated video background, a features section, and a CTA at the bottom.
    Free trial
    New accounts get one free animated section preview — enough to see DesignPal in motion. After that, plans start at $25/mo. See pricing.

    The assistant asks a few short follow-ups (sections, animation, brand) and then either previews one section or generates the whole page. Refine anything afterwards in plain English.

19 tools

Tools reference. Everything the MCP exposes.

Your assistant calls these on your behalf — you don’t need to memorise them. Click any row to see its inputs.

01

Account

Check your balance and manage your subscription.

designpal_check_credits

Returns your credit balance, plan, subscription status, and (for free users) pre-baked Stripe checkout URLs.

designpal_subscribe

Returns a Stripe checkout link for a plan, or a billing-portal link if you're already subscribed.

Inputs
  • planstring

    hobby · pro · ultra

  • periodstring

    monthly · yearly

02

Project setup

Start a project and walk through the 5-phase elicitation.

designpal_start_project

Creates a new project from a description and returns the phase-1 elicitation questions for the assistant to ask.

Inputs
  • descriptionstringrequired

    What the user wants to build, in their own words.

  • namestring

    Optional project name; otherwise inferred from description.

designpal_set_preferences

Saves answers for one phase and returns the next phase's questions — or, when phase 5 is complete, a full credit-cost estimation.

Inputs
  • project_idstringrequired

    Project ID returned by start_project.

  • answersobjectrequired

    Map of question_id → answer for the current phase.

designpal_list_projects

Lists the user's projects with status, section count, and timestamps.

Inputs
  • status_filterstring

    draft · ready · generating · complete

  • limitnumber

    Max results (default 20).

designpal_load_project

Loads a full project's state (sections, preferences, asset URLs) into the conversation.

Inputs
  • project_idstringrequired

    Project to load.

03

Generation

Run the AI image+video pipeline.

designpal_preview_sectionCosts credits

Kicks off async generation (image + video) for a single section. Returns a request reference within ~3 seconds; poll with check_status.

Inputs
  • project_idstringrequired

    Project ID.

  • section_indexnumberrequired

    Zero-indexed section to generate.

  • image_prompt_overridestring

    Pin the image prompt verbatim.

  • motion_prompt_overridestring

    Pin the motion prompt verbatim, skipping the vision pass.

designpal_generateCosts credits

Generates the entire project. Call with confirmed: false first to preview prompts and cost — then with confirmed: true to actually run.

Inputs
  • project_idstringrequired

    Project to generate.

  • confirmedbooleanrequired

    false → dry-run preview · true → execute.

  • prompt_overridesobject

    Optional per-section prompt pins.

designpal_check_status

Polls async progress, advances in-flight sections, atomically deducts credits when all sections reach a terminal state, and returns the final HTML page.

Inputs
  • project_idstringrequired

    Project to poll.

  • section_indexnumber

    Limit polling to one section.

04

Structure

Add, remove, reorder, and regenerate sections.

designpal_add_sectionCosts credits

Adds a new section. Static sections are free; animated sections trigger generation immediately.

Inputs
  • project_idstringrequired

    Project to extend.

  • section_configobjectrequired

    name · type · isAnimated · copy · etc.

  • insert_atnumber

    Zero-indexed insertion point; default appends.

  • image_prompt_overridestring

    Pin image prompt.

  • motion_prompt_overridestring

    Pin motion prompt.

designpal_remove_section

Removes a section. No credit refund.

Inputs
  • project_idstringrequired

    Project ID.

  • section_indexnumberrequired

    Zero-indexed section to remove.

designpal_reorder_sections

Reorders sections in-place. Free.

Inputs
  • project_idstringrequired

    Project ID.

  • new_ordernumber[]required

    Permutation of section indices.

designpal_regenerate_sectionCosts credits

Regenerates one section, applying natural-language feedback to the previous prompt.

Inputs
  • project_idstringrequired

    Project ID.

  • section_indexnumberrequired

    Section to regenerate.

  • feedbackstringrequired

    What to change.

  • image_prompt_overridestring

    Pin image prompt.

  • motion_prompt_overridestring

    Pin motion prompt.

05

Editing

Refine copy, styles, animation, and assets.

designpal_refine

Free-form refinement. Font/color/style changes are free; visual regeneration costs credits. Preview with apply: false first.

Inputs
  • project_idstringrequired

    Project to refine.

  • refinementstringrequired

    What to change.

  • applyboolean

    false → preview the diff · true → apply.

designpal_edit_copy

Edits headline, body, or CTA text in one section. Free.

Inputs
  • project_idstringrequired

    Project ID.

  • section_indexnumberrequired

    Section to edit.

  • changesobjectrequired

    headline · body · cta

designpal_edit_styles

Changes global styles (font, colors, density, dark/light, text overlays). Pure CSS — free.

Inputs
  • project_idstringrequired

    Project ID.

  • style_changesobjectrequired

    fontStyle · colors · layoutDensity · darkMode · textOverlays

designpal_edit_animation

Tweaks animation playback (scroll speed, trigger offset, loop, direction, easing) without regenerating video. Free.

Inputs
  • project_idstringrequired

    Project ID.

  • section_indexnumberrequired

    Section to edit.

  • paramsobjectrequired

    scrollSpeed · triggerOffset · loop · direction · easing

designpal_upload_asset

Places a static user-supplied image into a section. Free.

Inputs
  • project_idstringrequired

    Project ID.

  • section_indexnumberrequired

    Target section.

  • image_urlstringrequired

    Public URL of the image.

  • placementstring

    background · inline · overlay

designpal_animate_uploadCosts credits

Animates a user-uploaded image via AI video. Charges video seconds only — no image credit consumed.

Inputs
  • project_idstringrequired

    Project ID.

  • section_indexnumberrequired

    Target section.

  • image_urlstringrequired

    Public URL of the image to animate.

  • durationnumberrequired

    Video length in seconds.

  • motion_promptstring

    Custom motion description.

  • motion_presetstring

    Named preset (e.g. drift, push-in, pan-left).

  • scroll_triggeredboolean

    Scrub the video to scroll position.

Help

Troubleshooting.

The browser doesn't open for sign-in
Make sure your default browser is set, and that nothing is blocking http://127.0.0.1 / localhost callbacks. The CLI prints the consent URL — paste it manually if the auto-launch fails.
I get a "no credits" error on my second clip
New accounts get one free animated preview. After that, generation requires a plan. Run designpal_check_creditsin your assistant — if you’re on the free plan, the response includes pre-baked checkout URLs you can click.
I want to use a different Google account
Re-run the install command: npx -y @designpal/agent-skills init. The CLI prompts you to sign in again. Each DesignPal account is keyed to one Google identity — switching accounts means switching project history.
I'm behind a corporate proxy
Set HTTPS_PROXY in your shell environment before launching the client. The CLI and the underlying MCP transport both respect standard HTTP(S)_PROXY variables.
Manual setup — the MCP URL
If you’d rather wire the server up by hand, the URL is https://designpal.dev/api/mcp. Add it to your client’s MCP config as an HTTP-transport server. OAuth discovery happens automatically — you’ll still get the browser sign-in.
What’s next

You’re connected.

Dashboard

See your projects

Open everything you've generated in one place.

Go to dashboard
Pricing

Pick a plan

After your free preview, plans start at $25/mo.

See pricing
Showcase

See what's possible

Browse the kinds of sites DesignPal builds best.

View showcase