skills.rest
velt-js
velt-jsOFFICIAL
Explore all skills by this author →
Website𝕏@veltjsGitHub

velt-setup-best-practices

Configures Velt collaboration SDK installation, authentication, and document initialization across web frameworks.

1|Updated Jan 23, 2026
Search Tags:#multi-tenant#Next.js#setup#JWT authentication#velt#collaboration sdk#veltprovider
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-setup-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-setup-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-setup-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-setup-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @veltdev/react, @veltdev/client, @veltdev/types, and includes references (resource) components.

What problem does it solve? Integrating the Velt collaboration SDK involves many failure-prone steps: installing the right packages, wiring VeltProvider correctly in Next.js, generating JWT tokens securely on the server, and initializing documents so users actually share the same collaborative space. This Skill provides 25 evidence-backed rules that prevent the most common setup mistakes. ## Core Features & Use Cases - Installation & Provider Wiring: Correct package selection (@veltdev/react vs @veltdev/client vs CDN) and framework-specific initialization for React, Next.js, Angular, Vue, and vanilla HTML. - Production Authentication: authProvider configuration with server-side JWT token generation, organizationId-based multi-tenant access control, and auth token security practices. - Document Identity & Debugging: Shareable document ID strategies, setDocuments initialization, domain whitelisting, and a troubleshooting guide for nine common configuration errors. - Use Case: You are adding real-time collaboration to a Next.js SaaS app with existing user auth. The Skill guides you to create a /api/velt/token route, configure authProvider with retry logic, and derive document IDs from route parameters. ## Quick Start Ask the agent to set up Velt with production-grade JWT authentication in your Next.js app, wiring VeltProvider with authProvider and initializing documents from your document route.

Frequently Asked Questions about velt-setup-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Velt in a Next.js app?▼

Install @veltdev/react, add the 'use client' directive to any file using Velt components, and wrap your app in VeltProvider with your API key. Place VeltProvider in page.tsx rather than layout.tsx to avoid server component errors.

How do I generate Velt JWT tokens securely?▼

Generate JWT tokens on a server-side API route by calling the Velt token endpoint with your auth token stored in a server-only environment variable. Never expose the auth token in client code or NEXT_PUBLIC_ prefixed variables.

Should I use authProvider or useIdentify for Velt authentication?▼

Use the authProvider prop on VeltProvider. The useIdentify hook is deprecated and lacks token refresh, error handling, and retry logic that authProvider supplies for production applications.

Does Velt work with Angular, Vue, or vanilla HTML?▼

Yes. Use @veltdev/client with initVelt() for Angular and Vue, or load the CDN script and call Velt.init() for vanilla HTML. Angular requires CUSTOM_ELEMENTS_SCHEMA and Vue needs velt-* tags registered as custom elements.

Why are my Velt comments not appearing for other users?▼

Comments fail to sync when document IDs differ between users or setDocuments is called before authentication completes. Verify both users share the same deterministic document ID and that documents are set only after the Velt user is authenticated.

Why does Velt show a domain not allowed error?▼

This error occurs when your current domain is not whitelisted in the Velt Console. Add your development (localhost:3000), staging, and production domains under Managed Domains in console.velt.dev.

Related Skills

Explore More Software Engineering Skills→
awfixers-stuffawfixers-stuff

clerk-nextjs-patterns

Protect Next.js App Router applications with Clerk middleware and auth patterns.

Official
Advanced
rnavarychrnavarych
14

role-fullstack:real-time-features

Implement real-time features using WebSockets, SSE, and managed services.

Community
Advanced
globalmsqglobalmsq

moai-platform-firestore

Configure Firestore real-time listeners, offline persistence, and security rules.

Official
Intermediate
mgd34msumgd34msu
4

liveblocks

Integrate real-time collaborative features into React applications using the Liveblocks SDK.

Community
Intermediate