0.1.5 • Published 2d agoCLI

create-mork

Licence

MIT

Version

0.1.5

Deps

Size

34 kB

Vulns

Weekly

Summary Dependency Versions

create-mork

Scaffold a premium, multi-provider AI chatbot app with one command. Built with Next.js 14 (App Router), React, and Vanilla CSS.

create-mork generates a fully configured client-side chat interface and a secure server-side API route supporting Anthropic Claude, OpenAI GPT, and Google Gemini out-of-the-box. Your API keys are kept safely on the server side and never exposed to the browser.

Quick Start

Create a new chatbot application instantly by running:

npm create mork@latest my-chatbot

1. Select Your Provider

During setup, the CLI will ask you to select a default provider:

Anthropic Claude (Default model: claude-3-5-sonnet-latest)
OpenAI GPT (Default model: gpt-4o-mini)
Google Gemini (Default model: gemini-2.5-flash)

2. Add API Keys

Navigate to your new project folder and open .env.local. Set the API key for your chosen provider:

AI_PROVIDER=anthropic

# API Keys (only the active provider's key is required)
ANTHROPIC_API_KEY=your_anthropic_api_key
OPENAI_API_KEY=your_openai_api_key
GOOGLE_API_KEY=your_google_api_key

3. Run and Chat

Install dependencies and start the development server:

cd my-chatbot
npm install
npm run dev

Open http://localhost:3000 to chat!

Embedding the Bot in Your Website

Once you deploy your Next.js chatbot app (e.g., to Vercel, Netlify, or self-hosted), you can integrate it into your existing website using one of the following methods:

Method A: Full-Page Iframe Embed

The easiest way to display the chatbot inside any HTML page is using an <iframe>. Add the following code where you want the chat window to appear:

<iframe
  src="https://your-chatbot-deployment.vercel.app"
  style="width: 100%; max-width: 640px; height: 700px; border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);"
  title="AI Chatbot"
  allow="clipboard-write"
></iframe>

To add a premium floating chatbot bubble in the corner of your website that toggles open and closed, copy this HTML/CSS/JS snippet into your website's <body>:

<!-- Chat Widget Button -->
<button id="mork-widget-btn" style="position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: #4f46e5; border: none; color: white; cursor: pointer; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); display: flex; align-items: center; justify-content: center; font-size: 24px; z-index: 9999; transition: transform 0.2s ease;">
  💬
</button>

<!-- Chat Window Wrapper (Hidden by default) -->
<div id="mork-widget-window" style="display: none; position: fixed; bottom: 90px; right: 20px; width: 400px; height: 600px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.25); z-index: 9999; border: 1px solid rgba(255,255,255,0.08);">
  <iframe src="https://your-chatbot-deployment.vercel.app" style="width: 100%; height: 100%; border: none;"></iframe>
</div>

<script>
  const btn = document.getElementById('mork-widget-btn');
  const win = document.getElementById('mork-widget-window');
  
  btn.addEventListener('click', () => {
    if (win.style.display === 'none') {
      win.style.display = 'block';
      btn.innerText = '✕';
      btn.style.transform = 'rotate(90deg)';
    } else {
      win.style.display = 'none';
      btn.innerText = '💬';
      btn.style.transform = 'rotate(0deg)';
    }
  });
</script>

Method C: React / Next.js Component Copy

Since create-mork outputs clean, modular React pages, you can easily copy the components into your existing Next.js App Router codebase:

Copy the lib/providers.js adapter functions file into your codebase.
Copy app/api/chat/route.js to create your server API endpoint.
Import the layout elements from app/page.js and styles from app/globals.css into your existing views.

Customizing the Bot

System instructions / bot personality: Edit app/api/chat/route.js and modify the SYSTEM_PROMPT variable.
Theme & Design: Modify app/globals.css to update CSS tokens (--bg-app, --bubble-user, etc.) to match your brand colors.
Model upgrades: Modify *__MODEL variables in .env.local to switch between models.

License

MIT