Skip to main content

Build with v0

v0 can take an Inttegro-powered experience from a business brief to a working application and a Vercel deployment. Give v0 Inttegro context through MCP while it builds, then keep every live API call and credential in server code.

Open v0 · Read the v0 documentation

MCP helps v0 build the app

The Inttegro MCP connection is available to v0 during generation. It is not part of the application v0 publishes. Customer actions must call Inttegro from a Route Handler, Server Action, or another trusted backend.

Connect Inttegro MCP

  1. Open a v0 chat and select Connect.
  2. Choose Add MCP, then configure a custom server named Inttegro at https://mcp.inttegro.com.
  3. Select OAuth and complete Inttegro sign-in. If the workspace requires a bearer token instead, add it in the protected MCP configuration—not in chat.
  4. Keep tool approval on Ask for operations that create or change data.
  5. Confirm that the Inttegro tools appear before asking v0 to build.

See v0's official MCP setup for the current connection and approval controls.

Paste this into v0

Start a new chat in the Vercel Project that should own the application. v0 can inspect files, use connected MCP tools, run terminal commands, and test the result in a browser. The prompt below gives each capability a specific job.

Prompt

Business outcome

Build [describe what the customer or operator should be able to do] for [describe the business and its users]. Make the experience feel native to this product and preserve its existing visual system, authentication, and data.

Understand this v0 project before editing

  1. Inspect the current project, selected chat branch, App Router structure, Server Actions, Route Handlers, authentication, data model, and existing environment-variable names.
  2. Use the connected Inttegro MCP server. Call design_integration for the business outcome above, then inspect only the operation references returned by that plan.
  3. Ask me one concise round of questions for business decisions the project and MCP cannot answer. Never ask me to paste an Inttegro API key into chat.
  4. Show me one recommended customer journey, the server boundary, Inttegro operations, UI states, data ownership, failure states, and acceptance checks. Wait for approval before changing files.

Build the approved path

  • Keep the existing stack when this is an established project. For a new v0 project, use the Next.js App Router and TypeScript.
  • Put every live Inttegro call in a Route Handler, Server Action, or server-only module. Client Components may call that boundary but must never call Inttegro with a secret.
  • Read INTTEGRO_API_KEY from the Vercel Project's environment variables. Never prefix it with NEXT_PUBLIC_, return it to the browser, print it, or commit it.
  • When the server runtime is Node.js 24 or later, use the official Inttegro TypeScript SDK and its native request objects. Otherwise use server-side HTTPS and the exact Studio contract; do not invent fields or downgrade the project.
  • Validate and authorize browser input, use stable idempotency keys for mutations, and look up the authoritative result after redirects or uncertain writes.
  • Build complete loading, success, empty, retryable-error, and terminal-error states. Keep sensitive customer and commerce details out of client logs.

Verify and ship through v0

Use v0's terminal to run the project's type, lint, and test checks plus check_integration_readiness. Use browser testing on the Preview to exercise the complete happy path and one safe failure path at mobile and desktop sizes. Fix failures before publishing. If GitHub is connected, leave the chat branch ready for review as a pull request. Otherwise leave the project ready for Publish to Production. Report the server files changed, the single secret I must configure, test evidence, and the one action I should take next.

v0's agent capabilities let it inspect the project, use the terminal, exercise the browser, and diagnose a failed deployment instead of stopping after it draws the interface.

What v0 should create

  • a customer or operator experience built from the project's visual system;
  • a narrow Route Handler or Server Action for each Inttegro workflow;
  • one reusable server-only Inttegro client;
  • explicit validation and authorization at the browser-to-server boundary;
  • stable idempotency keys for mutations; and
  • an authoritative lookup after a redirect or ambiguous network result.

For a compatible Node.js runtime, install the Inttegro TypeScript SDK:

npm install @inttegro/inttegro-sdk

Keep the credential in the project

Add INTTEGRO_API_KEY through the project's environment-variable settings. v0 stores project variables outside the prompt and shares the project settings across its chats. Review the official Projects guide before deciding which deployment environments receive the credential.

The key must not use the NEXT_PUBLIC_ prefix. That prefix makes a Next.js variable available to browser code and breaks the server-only boundary.

Work with GitHub deliberately

When GitHub is connected, v0 uses a chat branch for its changes and the repository becomes the source of truth. Review the diff, open a pull request, and merge through the repository rather than treating a generated preview as the final record. See v0's GitHub workflow.

Before publishing

Run the checks in the prompt, inspect the browser network panel for accidental client-side Inttegro calls, and test with disposable Inttegro data. Then use v0's Publish to Production flow to deploy the reviewed project to Vercel. The deployment guide explains previews, production updates, and the Vercel project controls available after publishing.