--- title: "Build with v0" description: "Connect Inttegro MCP to v0, build live commerce calls in Next.js server code, and publish the application to Vercel." canonical: "https://studio.inttegro.com/ai-builders/v0" format: inttegro-machine-docs/v1 language: "PHP" sdk_version: "v12.0.0" reader_profile: optional reader_manifest: "https://studio.inttegro.com/machine/php/readers/index.json" reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations." preamble_estimated_tokens: 510 model_token_report: "https://studio.inttegro.com/machine/token-report.json" preamble_questions: 5 preamble_source: "curated" recommended_mcp_tools: ["design_integration","check_integration_readiness","get_integration_guide"] estimated_tokens: 2307 token_estimate_method: "utf8_bytes_divided_by_4" --- ## Machine preamble **Summary:** Let v0 use MCP while building the application, but put all live Inttegro calls and secrets in protected server code and verify commerce outcomes before publishing. ### Five questions #### Q1. Does connecting Inttegro MCP make the published app call Inttegro? No. MCP helps v0 during generation; the deployed app needs its own trusted server-side SDK or HTTPS integration. See [what v0 should create](https://studio.inttegro.com/machine/php/ai-builders/v0.md#what-v0-should-create). #### Q2. What should be pasted into v0? Use the [v0-focused prompt](https://studio.inttegro.com/machine/php/ai-builders/v0.md#paste-this-into-v0) to make it inspect the existing app, plan with connected MCP, preserve its business flow, and implement/test a protected server boundary. Never paste an Inttegro API key into chat. #### Q3. Where does the credential live? Keep INTTEGRO_API_KEY in the project's protected deployment environment, not a browser-visible variable, source, or generated client bundle. Review [credential setup](https://studio.inttegro.com/machine/php/ai-builders/v0.md#keep-the-credential-in-the-project) before publishing. #### Q4. Which MCP tools are useful during generation? [design_integration](https://studio.inttegro.com/machine/php/inttegro-mcp/tools.md#design_integration) recommends the first workflow and trust boundary; [check_integration_readiness](https://studio.inttegro.com/machine/php/inttegro-mcp/tools.md#check_integration_readiness) audits declared production controls. Their outputs guide v0; they do not inspect private code, store credentials, or complete a live payment. #### Q5. What must a preview test prove? Run a disposable happy path and a failure path through the generated app, inspect server/client separation, and [look up the order](https://studio.inttegro.com/machine/php/api/orders.md#lookup-an-order) for the authoritative outcome. A generated preview, browser redirect, or successful deploy alone does not establish a correct commerce integration. ## Document content # Build with v0 [v0](https://v0.app/) 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](https://v0.app/) · [Read the v0 documentation](https://v0.app/docs) :::warning 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](https://v0.app/docs/MCP) 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 > **Copyable 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](https://v0.app/docs/agentic-features) 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](https://studio.inttegro.com/machine/php/sdks/typescript.md): ```bash npm install @inttegro/inttegro-sdk ``` ## Keep the credential in the project Add `INTTEGRO_API_KEY` through the project's [environment-variable settings](https://vercel.com/docs/environment-variables). v0 stores project variables outside the prompt and shares the project settings across its chats. Review the official [Projects guide](https://v0.app/docs/projects) 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](https://v0.app/docs/github). ## 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](https://v0.app/docs/deployments) explains previews, production updates, and the Vercel project controls available after publishing.