AI Services

Shipped includes an AI Chatbot to showcase how you can integrate AI services inside your product.

You can open the AI Chatbot at http://localhost:3000/ai-chatbot

You can find the AI Chatbot UI in the file src/components/pages/AIChatbot/AIChatbot.tsx while the backend route is at src/app/api/chat/[provider]/route.ts.

This example AI Chatbot implementation shows how to use the AI Services OpenAI, Anthropic, an Google Gemini, but Shipped makes use of the Vercel AI SDK, which supports many other AI services, likes:

• xAI Grok

• Azure OpenAI

• Amazon Bedrock

• Google Vertex AI

• Mistral

• DeepSeek

• Perplexity

• Ollama

and many more. Check out the official page for the full list of AI providers.

Configuration

To use the AI Chatbot, you need to configure some environment variables:

• OPENAI_API_KEY

• ANTHROPIC_API_KEY

• GOOGLE_GENERATIVE_AI_API_KEY

You can generate the API Keys by creating an account on the relative AI services websites.

Use Your Own Keys

If you prefer to not provide your own AI service API Keys, but instead let the users provide their API keys, you can:

• add a modal to ask for the API Key

• save the API Key in the local storage of the browser

• update the backend request and endpoint to read the API Key from the body of the request

The Vercel AI SDK is a powerful library, and the documentation describes a lot of uses cases and functionalities. I recommend to read it if you want to learn more about what's possible.