> ## Documentation Index
> Fetch the complete documentation index at: https://docs.molin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Prefilled message links

> Create shareable Ninja links with a pre-filled message in the text input.

export const NinjaLinkBuilder = () => {
  const [message, setMessage] = useState('');
  const [copied, setCopied] = useState(false);
  const baseUrl = 'https://ninja.new';
  const generatedUrl = message.trim() ? `${baseUrl}/?q=${encodeURIComponent(message.trim())}` : '';
  const handleCopy = async () => {
    if (generatedUrl) {
      try {
        await navigator.clipboard.writeText(generatedUrl);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      } catch (err) {
        console.error(err);
      }
    }
  };
  return <div className="my-5 flex flex-col gap-4 rounded-2xl border border-gray-200 bg-gray-50 p-5 dark:border-gray-700 dark:bg-gray-800">
      <h4 className="mt-0 mb-0 text-lg font-semibold text-gray-800 dark:text-gray-200">Ninja link builder</h4>

      <div>
        <label htmlFor="ninja-link-message" className="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-300">
          Message
        </label>
        <textarea id="ninja-link-message" value={message} onChange={e => setMessage(e.target.value)} placeholder="e.g. Help me write a product description for my new sneakers" rows={3} className="font-inherit w-full resize-y rounded-xl border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-gray-400 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
      </div>

      {generatedUrl && <div className="flex flex-col gap-4">
          <div>
            <label className="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-300">Generated link</label>
            <div className="flex items-center gap-2">
              <code className="block flex-1 overflow-hidden rounded-xl bg-gray-100 px-3 py-2.5 text-xs break-all dark:bg-gray-700 dark:text-gray-200">{generatedUrl}</code>
              <button type="button" onClick={handleCopy} className="shrink-0 cursor-pointer rounded-xl border-none bg-[#601FEB] px-4 py-2.5 text-xs font-semibold whitespace-nowrap text-white transition-colors duration-200 hover:bg-[#8624FF]">
                {copied ? 'Copied!' : 'Copy'}
              </button>
            </div>
          </div>

          <div>
            <a href={generatedUrl} target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-[#601FEB] hover:text-[#8624FF]">
              Open link in new tab →
            </a>
          </div>
        </div>}
    </div>;
};

## Overview

You can create links to [Ninja](https://ninja.new) that automatically prefill a message in the text input. This is useful for:

* Sharing a task prompt with a colleague
* Embedding contextual links in emails, docs, or internal tools
* Creating quick-action buttons that start a specific workflow

The format is identical to [ChatGPT's `?q=` parameter](https://chatgpt.com/?q=Hello):

```
https://ninja.new/?q=Your+message+here
```

## How it works

When a user opens a Ninja link with a `?q=` query parameter, the message is automatically placed in the text input so they can review it before submitting.

### URL format

```
https://ninja.new/?q={URL-encoded message}
```

The message must be [percent-encoded](https://developer.mozilla.org/en-US/docs/Glossary/Percent-encoding). Spaces can be encoded as `%20` or `+`.

### Examples

| Link                                                                   | Message                                         |
| ---------------------------------------------------------------------- | ----------------------------------------------- |
| `https://ninja.new/?q=Connect%20my%20Shopify%20store`                  | Connect my Shopify store                        |
| `https://ninja.new/?q=Write+a+product+description+for+my+new+sneakers` | Write a product description for my new sneakers |
| `https://ninja.new/?q=Analyze%20my%20top%2010%20selling%20products`    | Analyze my top 10 selling products              |

### Building links in JavaScript

```javascript theme={null}
const message = 'Help me set up Google Ads for my store';
const url = `https://ninja.new/?q=${encodeURIComponent(message)}`;
```

## Link builder

Use this tool to generate a prefilled Ninja link:

<NinjaLinkBuilder />

<Note>The user must be logged in to Ninja to submit the message. If they are not logged in, they will be redirected to the login page first.</Note>
