ContextWeave

Getting Started with ContextWeave in Bolt.new

This guide will help you set up and run ContextWeave in Bolt.new, whether you're starting fresh or returning to continue development.

Prerequisites

  • Bolt.new Account - Sign up at bolt.new
  • GitHub Account - For authentication and code storage
  • Supabase Account - For database and auth (optional for basic demo)

Starting Fresh in Bolt.new

1. Create New Project

# In Bolt.new, either:
# Option A: Import from GitHub
https://github.com/your-username/contextweave

# Option B: Start with template
# Use the "Next.js + TypeScript" template
# Then copy the ContextWeave code

2. Verify Project Structure

Ensure your project has this structure:

contextweave/
├── app/
│   ├── api/
│   ├── playground/
│   ├── layout.tsx
│   └── page.tsx
├── components/
├── lib/
├── docs/
├── package.json
└── next.config.js

3. Install Dependencies

Bolt.new automatically installs dependencies, but you can manually trigger:

# In the Bolt.new terminal
npm install

# Or if you need to reinstall
rm -rf node_modules package-lock.json
npm install

4. Start Development Server

# Usually auto-started, but if needed:
npm run dev

# The app will be available at the preview URL
# Bolt.new provides an integrated browser preview

Returning to Existing Project

1. Open Project in Bolt.new

# Navigate to your project in Bolt.new
# Or import from GitHub if needed

2. Verify Environment

# Check if dependencies are installed
ls node_modules

# Check if dev server is running
ps aux | grep next

# Restart if needed
npm run dev

3. Update Dependencies (if needed)

# Check for updates
npm outdated

# Update packages
npm update

# Or update specific packages
npm install next@latest react@latest

Configuration Setup

1. Environment Variables

In Bolt.new, set environment variables through the UI:

Required for Demo:

# Basic functionality (no external APIs needed)
NEXT_PUBLIC_SUPABASE_URL=demo_mode
NEXT_PUBLIC_SUPABASE_ANON_KEY=demo_mode

Required for Full Functionality:

# Supabase (for auth and database)
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

# External APIs (for real data)
LIBS_IO_KEY=your_libraries_io_key
GOOGLE_API_KEY=your_google_api_key
GOOGLE_CSE_ID=your_google_cse_id
GH_PAT=your_github_token

# Optional APIs
OPENAI_API_KEY=your_openai_key

2. Supabase Configuration

If using Supabase, create a .env.local file:

# Copy from .env.example
cp .env.example .env.local

# Edit with your values
# Bolt.new editor will show the file

3. API Configuration

Update lib/api-clients.ts if needed:

// Ensure API keys are properly configured
const apiKey = process.env.LIBS_IO_KEY;
if (!apiKey) {
  console.warn('Libraries.io API key not configured');
}

Testing the Setup

1. Basic Functionality Test

# Open the app in Bolt.new preview
# Navigate to: /playground

# Test basic generation:
1. Select an example chip
2. Click "Generate Context"
3. Verify response appears

2. API Integration Test

# Test external APIs (if configured)
# In browser console:
fetch('/api/search-libraries?q=react')
  .then(r => r.json())
  .then(console.log)

3. Component Test

# Test individual components
# Navigate through the app:
- Landing page (/)
- Playground (/playground)
- Deploy page (/deploy)

Development Workflow

1. Making Changes

# Edit files in Bolt.new editor
# Changes auto-save and hot-reload
# Preview updates in integrated browser

2. Adding New Features

# Create new component
touch components/NewComponent.tsx

# Add new page
mkdir app/new-page
touch app/new-page/page.tsx

# Add new API route
touch app/api/new-endpoint/route.ts

3. Debugging

# Use browser dev tools in preview
# Check console for errors
# Use Bolt.new terminal for server logs

# Common debug commands:
npm run build  # Check for build errors
npm run lint   # Check for linting issues

Common Issues and Solutions

1. Dependencies Not Installing

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm cache clean --force
npm install

2. Dev Server Not Starting

# Check for port conflicts
lsof -i :3000

# Kill existing processes
pkill -f next

# Restart dev server
npm run dev

3. Environment Variables Not Loading

# Verify .env.local exists and has correct format
cat .env.local

# Restart dev server after env changes
npm run dev

4. API Routes Not Working

# Check API route files exist
ls app/api/

# Test API routes directly
curl http://localhost:3000/api/health

# Check for TypeScript errors
npm run type-check

5. Supabase Connection Issues

# Verify Supabase URL and keys
echo $NEXT_PUBLIC_SUPABASE_URL

# Test connection in browser console
import { supabase } from './lib/supabase'
supabase.auth.getSession()

Performance Optimization

1. Build Optimization

# Analyze bundle size
npm run build
npm run analyze  # if configured

# Check for unused dependencies
npx depcheck

2. Image Optimization

# Ensure images are in public/ directory
# Use Next.js Image component
import Image from 'next/image'

3. API Optimization

# Enable caching in API routes
export const revalidate = 3600  # 1 hour cache

Deployment Preparation

1. Build Test

# Test production build
npm run build
npm start

# Check for build errors
npm run lint
npm run type-check

2. Environment Setup

# Ensure all required env vars are set
# Test with production values

3. Performance Check

# Test app performance
# Use Lighthouse in browser dev tools
# Aim for 90+ scores

Next Steps

  1. Configure Supabase - Set up database and authentication
  2. Deploy to Netlify - Deploy your application
  3. Review Best Practices - Optimize your workflow

Getting Help

Bolt.new Specific

  • AI Assistant - Ask Claude for help with any code issues
  • Documentation - Use Bolt.new's built-in help
  • Community - Join the Bolt.new Discord

ContextWeave Specific

  • GitHub Issues - Report bugs or ask questions
  • Documentation - Check other files in this docs/ directory
  • Demo - Reference the live demo for expected behavior

Happy coding! The AI assistant in Bolt.new is always available to help with any questions.