Development Guide
Building from Source
Prerequisites
- Node.js 18.0.0 or higher
- npm (comes with Node.js)
- Git
Clone and Build
Build Process
The build process uses esbuild to compile TypeScript:- Compiles TypeScript to JavaScript
- Creates standalone executables for each hook in
plugin/scripts/ - Bundles MCP search server to
plugin/scripts/search-server.mjs - Bundles worker service to
plugin/scripts/worker-service.cjs - Bundles web viewer UI to
plugin/ui/viewer.html
- Hook executables:
*-hook.js(ESM format) - Smart installer:
smart-install.js(ESM format) - Worker service:
worker-service.cjs(CJS format) - Search server:
search-server.mjs(ESM format) - Viewer UI:
viewer.html(self-contained HTML bundle)
Build Scripts
Development Workflow
1. Make Changes
Edit TypeScript source files insrc/:
2. Build
3. Test
4. Manual Testing
5. Iterate
Repeat steps 1-4 until your changes work as expected.Viewer UI Development
Working with the React Viewer
The web viewer UI is a React application built into a self-contained HTML bundle. Location:src/ui/viewer/
Structure:
Building Viewer UI
Testing Viewer Changes
- Make changes to React components in
src/ui/viewer/ - Build:
npm run build - Sync to installed plugin:
npm run sync-marketplace - Restart worker:
npm run worker:restart - Refresh browser at http://localhost:37777
Adding New Viewer Features
Example: Adding a new card type- Create component in
src/ui/viewer/components/cards/YourCard.tsx:
- Import and use in
Feed.tsx:
-
Update types if needed in
src/ui/viewer/types.ts - Rebuild and test
Viewer UI Architecture
Data Flow:- Worker service exposes HTTP + SSE endpoints
- React app fetches initial data via HTTP (paginated)
- SSE connection provides real-time updates
- Custom hooks handle state management and data merging
- Components render cards based on item type
- Infinite Scroll:
usePaginationhook with Intersection Observer - Real-Time Updates:
useSSEhook with auto-reconnection - Deduplication:
merge.tsutilities prevent duplicate items - Settings Persistence:
useSettingshook with localStorage - Theme Support: CSS variables with light/dark/system themes
Adding New Features
Adding a New Hook
- Create hook implementation in
src/hooks/your-hook.ts:
- Add to
plugin/hooks/hooks.json:
- Rebuild:
Modifying Database Schema
- Add migration to
src/services/sqlite/migrations.ts:
- Update types in
src/services/sqlite/types.ts:
- Update database methods in
src/services/sqlite/SessionStore.ts:
- Test migration:
Extending SDK Prompts
- Modify prompts in
src/sdk/prompts.ts:
- Update parser in
src/sdk/parser.ts:
- Test:
Adding MCP Search Tools
- Add tool definition in
src/servers/search-server.ts:
- Add search method in
src/services/sqlite/SessionSearch.ts:
- Rebuild and test:
Testing
Running Tests
Writing Tests
Create test files intests/:
Test Database
Use a separate test database:Code Style
TypeScript Guidelines
- Use TypeScript strict mode
- Define interfaces for all data structures
- Use async/await for asynchronous code
- Handle errors explicitly
- Add JSDoc comments for public APIs
Formatting
- Follow existing code formatting
- Use 2-space indentation
- Use single quotes for strings
- Add trailing commas in objects/arrays
Example
Debugging
Enable Debug Logging
Inspect Database
Trace Observations
Use correlation IDs to trace observations through the pipeline:Debug Hooks
Run hooks manually with test input:Publishing
NPM Publishing
release script:
- Runs tests
- Builds all components
- Publishes to NPM registry
Creating a Release
- Update version in
package.json - Update
CHANGELOG.md - Commit changes
- Create git tag
- Push to GitHub
- Publish to NPM
Contributing
Contribution Workflow
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Write tests
- Update documentation
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Pull Request Guidelines
- Clear title: Describe what the PR does
- Description: Explain why the change is needed
- Tests: Include tests for new features
- Documentation: Update docs as needed
- Changelog: Add entry to CHANGELOG.md
- Commits: Use clear, descriptive commit messages
Code Review Process
- Automated tests must pass
- Code review by maintainer
- Address feedback
- Final approval
- Merge to main
Development Tools
Recommended VSCode Extensions
- TypeScript
- ESLint
- Prettier
- SQLite Viewer
Useful Commands
Troubleshooting Development
Build Fails
-
Clean node_modules:
-
Check Node.js version:
-
Check for syntax errors:
Tests Fail
-
Check database:
-
Check worker status:
-
View logs:
Worker Won’t Start
-
Kill existing process:
-
Check port:
-
Try custom port:
Next Steps
- Architecture Overview - Understand the system
- Configuration - Customize Claude-Mem
- Troubleshooting - Common issues

