Examples

SMS Development Examples

Ready-to-use examples for popular frameworks and common SMS development patterns.

Framework Integration

Express.js

Complete Express.js server with SMS endpoints and webhook handling

Next.js

Next.js API routes, webhook handlers, and React components for SMS

React

React hooks and components for building SMS testing interfaces

TypeScript

Pure TypeScript client with full type safety and examples

Quick Start

Send Your First SMS

Basic example of sending an SMS message using sms-dev

// Start sms-dev first
sms-dev

// Then in your application:
const response = await fetch('http://localhost:4001/v1/messages', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    to: '+1234567890',
    from: '+1987654321',
    body: 'Hello from sms-dev!'
  })
});

const message = await response.json();
console.log('Message sent:', message.id);

Handle Webhook Replies

Process incoming SMS replies from the Virtual Phone UI

// Configure webhook URL
sms-dev start --webhook-url http://localhost:3000/webhook

// Handle webhook in your app (Express.js example)
app.post('/webhook', (req, res) => {
  const { from, to, body } = req.body;
  
  console.log(`Received reply from ${from}: ${body}`);
  
  // Process the reply
  if (body.toLowerCase().includes('help')) {
    // Send help message
    sendSMS(to, from, 'Available commands: STOP, HELP, INFO');
  }
  
  res.status(200).send('OK');
});

React Testing Hook

Custom React hook for testing SMS workflows

function useSMSTest() {
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(false);

  const sendMessage = async (to, from, body) => {
    setLoading(true);
    try {
      const response = await fetch('http://localhost:4001/v1/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ to, from, body })
      });
      const message = await response.json();
      setMessages(prev => [...prev, message]);
      return message;
    } finally {
      setLoading(false);
    }
  };

  return { messages, sendMessage, loading };
}

// Usage in component
function SMSTestComponent() {
  const { sendMessage, messages, loading } = useSMSTest();
  
  return (
    <button 
      onClick={() => sendMessage('+1234567890', '+1987654321', 'Test message')}
      disabled={loading}
    >
      {loading ? 'Sending...' : 'Send Test SMS'}
    </button>
  );
}