NotSoUnusual

import { UnseenProvider, Unseen } from 'notsounusual';

function App() {
  return (
    <UnseenProvider 
      useGemini={true}
      geminiApiKey="YOUR_GEMINI_API_KEY"  // Get from https://makersuite.google.com/app/apikey
      customPrompt={"Change the text to hello user, do not return anything else just say hello user"} // change this as per your need!
    >
      <h1>
        <Unseen>This text will be transformed by AI</Unseen>
      </h1>
    </UnseenProvider>
  );
}

import { UnseenProvider, Unseen } from 'notsounusual';

function App() {
  const getCustomPrompt = (utmConfig) => {
    // Default prompt for banking solutions
    const defaultPrompt = `
      Transform this into a banking solutions page with the following theme:
      - Heading: Modern banking solutions
      - Button colors: #1976d2 (primary), #dc004e (secondary)
      - Hover effects: Slight scale and shadow
      - Links: Banking solutions, Loans, Credit cards
      - Important: Maintain the structure and design
    `;

    // Campaign-specific prompts
    const campaignPrompts = {
      home_loans: `
        Transform this into a home loans page with the following theme:
        - Heading: Your dream home is closer than you think
        - Button colors: #2e7d32 (primary), #c62828 (secondary)
        - Hover effects: Elevation and color shift
        - Links: Home loans, Mortgage calculator, Apply now
        - Important: Focus on home ownership benefits
      `,
      credit_cards: `
        Transform this into a credit cards page with the following theme:
        - Heading: Rewards that match your lifestyle
        - Button colors: #1565c0 (primary), #d32f2f (secondary)
        - Hover effects: Glow and scale
        - Links: Credit cards, Rewards, Apply now
        - Important: Emphasize rewards and benefits
      `,
      investment: `
        Transform this into an investment page with the following theme:
        - Heading: Grow your wealth with smart investments
        - Button colors: #0277bd (primary), #c2185b (secondary)
        - Hover effects: Smooth transition and shadow
        - Links: Investments, Portfolio, Get started
        - Important: Focus on growth and security
      `
    };

    // Return campaign-specific prompt or default
    return campaignPrompts[utmConfig?.campaign] || defaultPrompt;
  };

  return (
    <UnseenProvider 
      useGemini={true}
      geminiApiKey="YOUR_GEMINI_API_KEY"  // Get from https://makersuite.google.com/app/apikey
      customPrompt={getCustomPrompt}
    >
      <div>
        <Unseen transformUI={true}>
          <button className="cta-button">
            Click me to transform
          </button>
        </Unseen>
      </div>
    </UnseenProvider>
  );
}

import { UnseenProvider, Unseen } from 'notsounusual';

function App() {
  const themeConfig = {
    colors: {
      primary: '#1976d2',
      secondary: '#dc004e',
      background: '#ffffff',
      text: '#333333',
      accent: '#4caf50',
    },
    typography: {
      fontFamily: 'Roboto, sans-serif',
      fontSize: '16px',
      fontWeight: '400',
    },
    spacing: {
      small: '8px',
      medium: '16px',
      large: '24px',
    },
    borderRadius: '4px',
    shadows: '0 2px 4px rgba(0,0,0,0.1)',
  };

  return (
    <UnseenProvider 
      useGemini={true}
      geminiApiKey="YOUR_GEMINI_API_KEY"  // Get from https://makersuite.google.com/app/apikey
      themeConfig={themeConfig}
    >
      <div>
        <Unseen transformUI={true}>
          <button className="cta-button">
            Click me to transform
          </button>
        </Unseen>
      </div>
    </UnseenProvider>
  );
}

customPrompt={`You may or may not receive UTM parameters

UTM Parameters: ${JSON.stringify(utmConfig)}

If no UTM parameters are present, return only the default homepage heading  
homepage heading: notsounusual — where UI evolves quietly

if no utm parameters are there then do not generate any of the following

If a utm_source is present, return one thing and nothing else — no explanations, no labels

1. A short greeting with one or two sentences, tailored to the utm_source value  
   - linkedin → Looks like you're deep in discovery mode on LinkedIn — love that. Let's show you something just as smart  
   - whatsapp → Caught you sneaking in from WhatsApp — no judgments, only cool UIs ahead  
   - producthunt → Product Hunter detected — clearly you know where to look for what's next. Let's make UI feel fresh again`}

# .env.local (for Next.js)
REACT_APP_OPENROUTER_API_KEY=your_openrouter_api_key_here
REACT_APP_GEMINI_API_KEY=your_gemini_api_key_here

# Navigate to test directory
cd test

# Install dependencies
npm install

# Create .env file with your API keys
REACT_APP_GEMINI_API_KEY=your_gemini_api_key_here
REACT_APP_OPENROUTER_API_KEY=your_openrouter_api_key_here

# Start the development server
npm start

fetch("https://openrouter.ai/api/v1/chat/completions", {
  method: "POST",
  headers: {
    "Authorization": "Bearer <OPENROUTER_API_KEY>",
    "HTTP-Referer": "<YOUR_SITE_URL>",
    "X-Title": "<YOUR_SITE_NAME>",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "model": "meta-llama/llama-3.3-8b-instruct:free",
    "messages": [
      {
        "role": "user",
        "content": "What is the meaning of life?"
      }
    ]
  })
});

fetch(
  `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${GEMINI_API_KEY}`,
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      contents: [
        {
          parts: [
            {
              text: `${customPrompt}\n\nText to transform: ${text}`
            }
          ]
        }
      ]
    })
  }
);

MIT License

Copyright (c) 2025 PriyanshuDas01

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

1. The above copyright notice and this permission notice shall be included
   in all copies or substantial portions of the Software.

2. Credit must be given to the original author by including a visible
   acknowledgment to **PriyanshuDas01** in the README or documentation
   of any project that uses or builds upon this Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.