Getting Started with VibeSharing
Two steps to get started. Then choose your path based on how you build.
First: Create your project
Go to Account Settings and connect your GitHub account. This gives you push access when prototypes are created via Push to Deploy.
Required for Push to Deploy workflows
Projects group related prototypes. Create one from your dashboard.
Example: "Product Redesign" or "Mobile App v2"
Then: Add your prototypes
Choose based on how you're building
Install the MCP server
npx -y @vibesharingapp/mcp-server@latestBuild with Claude
Code naturally as you always do
Just tell Claude to deploy
"Deploy this to VibeSharing"
Click "Add Prototype" in your project
Paste the URL
e.g., https://my-app.lovable.app
Done!
Preview, feedback, and sharing work immediately
Works with Lovable, v0, Replit, Bolt, Vercel, Netlify
Download Vibe Starter
vibe-starter.zipBuild with Claude
npm install && npm run devDeploy to VibeSharing
npm run deployAuto-deploys to Vercel and syncs CLAUDE.md context
Claude Code Integration
The seamless way to register prototypes
Our MCP server connects Claude Code directly to VibeSharing. Build your prototype, then just ask Claude to deploy it — no context switching, no copy-pasting URLs.
You have 3 collections. Add to an existing one or create new?
Deployed 8 files!
Live URL: https://vs-checkout-flow-v2-abc123.vercel.app
VibeSharing: https://vibesharing.app/dashboard/projects/xyz789
Your team can now view the prototype and leave feedback.
1. Install globally
npx -y @vibesharingapp/mcp-server@latest2. Get your deploy token
Go to Account Settings and copy your deploy token.
3. Add to Claude Code config
{
"mcpServers": {
"vibesharing": {
"command": "npx",
"args": ["-y", "@vibesharingapp/mcp-server@latest"],
"env": {
"VIBESHARING_TOKEN": "vs_your_token"
}
}
}
}Deploy your project
"Deploy this to vibesharing"
Create collections
"Create a new collection called Product Redesign"
Check feedback
"What feedback did I get on the dashboard?"
Sync context
"Sync my CLAUDE.md to VibeSharing"
Context Handoff with CLAUDE.md
Automatic context syncing between Claude sessions
VibeSharing automatically imports CLAUDE.md files when you deploy, keeping your project context in sync without manual copy/paste.
Claude writes CLAUDE.md
Maintains context automatically
You deploy
ZIP upload or GitHub
Context syncs
Auto-imported to VibeSharing
Team picks up
Full context available
Option 1: Ask Claude directly
At the end of each session, tell Claude:
"Update CLAUDE.md with where we left off"Option 2: Cursor Rule (automatic)
Add the .cursor/rules/claude-context.mdc rule to your project. Claude will proactively update CLAUDE.md at natural stopping points.
# Project Name - Context for Claude ## Current State - Version: 0.1 - Last updated: 1/29/2026 ## What Was Built - Feature summary here - Key changes made ## Key Decisions - Why we chose this approach - Tradeoffs considered ## Known Issues - Bugs or incomplete items ## Next Steps - What to work on next --- *Updated on 1/29/2026*
Keep it concise
CLAUDE.md is a handoff doc, not full documentation. Focus on what the next person needs to know.
Update at stopping points
End of session, after completing a feature, or before handing off to a teammate.
Include technical notes
File structure, patterns used, gotchas — things Claude needs to understand the codebase.
Create .github/copilot-instructions.md in your repo root. Copilot will use these instructions for all suggestions and chat responses.
Create .github/copilot-instructions.md:
# Copilot Instructions ## CLAUDE.md Context File This project uses CLAUDE.md for context handoff between sessions. **Before ending a session or when asked to wrap up:** 1. Create or update CLAUDE.md at the project root 2. Include: what was built, key decisions, known issues, next steps 3. Keep it concise — this is a handoff doc **CLAUDE.md Template:** ```markdown # [Project Name] - Context for Claude ## Current State - Version: X.X - Last updated: [date] ## What Was Built - [changes this session] ## Key Decisions - [why things were done this way] ## Known Issues - [bugs, incomplete items] ## Next Steps - [what to work on next] ``` When deployed to VibeSharing, CLAUDE.md is automatically imported.
Note: Copilot instructions are less proactive than Cursor rules. You may still need to ask: "Update CLAUDE.md before we finish"
The auto-import on deploy works the same — you just need to manually ask the AI to update CLAUDE.md.
Add this to your README.md:
## For AI Assistants (Claude, Replit AI, etc.) This project uses CLAUDE.md for context handoff between sessions. **Before ending a session, please:** 1. Create or update CLAUDE.md at the project root 2. Include: what was built, key decisions, known issues, next steps 3. Keep it concise — this is a handoff doc, not full documentation **Template:** ```markdown # [Project Name] - Context for Claude ## Current State - Version: X.X - Last updated: [date] ## What Was Built - [changes this session] ## Key Decisions - [why things were done this way] ## Known Issues - [bugs, incomplete items] ## Next Steps - [what to work on next] ``` When this project is deployed to VibeSharing, CLAUDE.md is automatically imported as a context entry.
Tip: At the end of each Replit session, tell the AI:"Update CLAUDE.md with where we left off"
What's Inside
Modern stack Claude knows well:
Built-in deploy script:
npm run deployZips, uploads, and deploys to VibeSharing automatically.
Pre-configured context file:
Claude maintains CLAUDE.md with build context. Auto-imported on deploy.
Works with Any AI Tool
Deploy code or link external prototypes
Claude Code Best
Install MCP server and deploy by just asking Claude.
Cursor
Use Vibe Starter. Build with Claude, then npm run deploy
Windsurf
Same workflow as Cursor. Download Vibe Starter and deploy when ready.
VS Code + Copilot
Use Vibe Starter with Copilot instructions. See docs below.
Lovable
Build in Lovable, copy the preview URL, add as external prototype in VibeSharing.
v0 by Vercel
Generate in v0, publish, paste the URL. Feedback works via guided topics.
Replit / Bolt
Deploy your Replit or Bolt app, add the URL to VibeSharing.
Create a Project
In VibeSharing, create a new project for your work
Add a Prototype
Click "Add Prototype" and paste your external URL
Get Feedback
Set up feedback topics and share with your team
Note: External prototypes can't show pin-drop feedback (due to iframe restrictions), but the guided feedback system works perfectly. Set up topics like "Navigation", "Visual Design", or "Missing Features" to collect structured input.
Example Prompts for Claude
Copy these prompts to quickly create new experiments with AI tools.
Create a dashboard page in app/page.tsx. Show a grid of metric cards at the top (4 cards with numbers). Below that, a table showing recent activity with: user, action, date, status. Include a search input above the table. Use Tailwind for styling. Keep it clean and minimal.
Update app/page.tsx to show a list of items on the left (60% width). Clicking an item shows its details in a right panel (40% width). Include: item name, description, status badge, action buttons. Use useState for selected item. Mock 8-10 items inline.
Create app/settings/page.tsx. Show a form with sections: General, Notifications, Security. Each section is a card with form fields (inputs, toggles, dropdowns). Include a "Save changes" button that shows a success message. Keep styling minimal and clean.
Add a "Create new item" flow with a modal. Clicking "Create" opens a modal with steps: 1. Enter name and description 2. Select category from dropdown 3. Review and confirm Use useState for step tracking. Close modal on completion or backdrop click. Keep it in a single file.