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

# SDK Overview

> Build custom interfaces and external apps that interact with NoClick workflows

# NoClick SDK

The NoClick SDK lets you build custom React components inside workflows and external applications that interact with NoClick's workflow engine. Read node outputs, trigger execution, manage state, handle credentials, and work with files and datasets, all through a clean API.

## Two Use Cases

<CardGroup cols={2}>
  <Card title="Custom Components" icon="puzzle-piece" href="/sdk/custom-components">
    React/JSX components that render inside the NoClick interface tab. Built with Tailwind CSS, any npm package, and the full SDK API. No build step needed: NoClick handles transpilation.
  </Card>

  <Card title="External Apps" icon="globe" href="/sdk/external-apps">
    Standalone TypeScript or Python applications that connect to NoClick via WebSocket. Same API, different transport. Authenticate with API keys.
  </Card>
</CardGroup>

External apps authenticate with [API keys](/sdk/api-keys), created in the dashboard under **Settings** → **Developer**. Custom components run inside NoClick and need no key.

## SDK Namespaces

| Namespace                                   | Purpose                             |
| ------------------------------------------- | ----------------------------------- |
| [`nodes`](/sdk/api-reference#nodes)         | Read/write node outputs and configs |
| [`execution`](/sdk/api-reference#execution) | Run nodes and stream results        |
| [`state`](/sdk/api-reference#state)         | Persistent key-value storage        |
| [`auth`](/sdk/api-reference#auth)           | Credentials and OAuth               |
| [`resources`](/sdk/api-reference#resources) | File/blob upload and download       |
| [`dataset`](/sdk/api-reference#dataset)     | Tabular data CRUD                   |
| [`workflow`](/sdk/api-reference#workflow)   | Workflow info and context           |

## Quick Example

A custom component that reads data from a Gmail node and displays it:

```jsx theme={null}
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import { nodes } from '@noclick/sdk';

function App() {
  const [emails, setEmails] = useState([]);

  useEffect(() => {
    nodes.getOutput('gmail-node-id').then(output => {
      setEmails(output?.emails || []);
    });
  }, []);

  return (
    <div className="p-4">
      {emails.map(email => (
        <div key={email.id} className="border-b border-zinc-800 py-2">
          <div className="font-bold">{email.subject}</div>
          <div className="text-sm text-zinc-400">{email.from}</div>
        </div>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
```

The same logic in a Python external app:

```python theme={null}
import noclick

sdk = noclick.Client(api_key="nk_live_...", workflow_id="...")
await sdk.connect()

output = await sdk.nodes.get_output("gmail-node-id")
emails = output.get("emails", [])
for email in emails:
    print(f"{email['subject']} — {email['from']}")
```