ellmo-ai-react 0.0.11 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -250
- package/package.json +10 -8
package/README.md
CHANGED
|
@@ -1,256 +1,9 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Public eLLMo AI React
|
|
2
2
|
|
|
3
3
|
Add Ellmo AI to your React or Next.js website to track page views and get content insights.
|
|
4
4
|
|
|
5
5
|
## About Ellmo AI
|
|
6
6
|
|
|
7
|
-
[
|
|
7
|
+
[eLLMo AI](https://www.tryellmo.ai?utm_source=npm&utm_medium=package&utm_campaign=ellmo-ai-react) is an intelligent content optimization platform that helps websites improve their search engine visibility and user experience. By analyzing your pages in real-time, Ellmo provides AI-powered content recommendations, semantic search optimization, and structured data insights to help your content perform better in search engines and engage your audience more effectively.
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
**What Ellmo Does:**
|
|
12
|
-
- 🎯 **Content Analysis** - Automatically analyzes every page on your site
|
|
13
|
-
- 🔍 **SEO Optimization** - Provides AI-driven recommendations to improve search rankings
|
|
14
|
-
- 📊 **Performance Tracking** - Monitors how your content performs over time
|
|
15
|
-
- 🤖 **Smart Insights** - Delivers actionable suggestions to enhance your content strategy
|
|
16
|
-
- ⚡ **Automated Fixes** - Identifies issues and fixes them programmatically without manual intervention
|
|
17
|
-
|
|
18
|
-
Visit [tryellmo.ai](https://www.tryellmo.ai) to learn more and get started.
|
|
19
|
-
|
|
20
|
-
## Installation
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npm install ellmo-ai-react
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Quick Start
|
|
27
|
-
|
|
28
|
-
### Next.js 13+ (App Router)
|
|
29
|
-
|
|
30
|
-
**Step 1:** Create a middleware file
|
|
31
|
-
|
|
32
|
-
```ts
|
|
33
|
-
// middleware.ts
|
|
34
|
-
import { ellmoMiddleware } from 'ellmo-ai-react';
|
|
35
|
-
|
|
36
|
-
export const middleware = ellmoMiddleware;
|
|
37
|
-
|
|
38
|
-
export const config = {
|
|
39
|
-
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
|
|
40
|
-
};
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
**Step 2:** Add to your layout
|
|
44
|
-
|
|
45
|
-
```tsx
|
|
46
|
-
// app/layout.tsx
|
|
47
|
-
import { headers } from 'next/headers';
|
|
48
|
-
import { EllmoApi } from 'ellmo-ai-react';
|
|
49
|
-
import { getPathnameFromHeaders } from 'ellmo-ai-react/middleware';
|
|
50
|
-
|
|
51
|
-
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
52
|
-
const pathname = getPathnameFromHeaders(headers()) || '/';
|
|
53
|
-
|
|
54
|
-
return (
|
|
55
|
-
<html lang="en">
|
|
56
|
-
<body>
|
|
57
|
-
<EllmoApi clientId="your-ellmo-client-id" url={pathname} />
|
|
58
|
-
{children}
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
Done! All pages are now tracked automatically.
|
|
66
|
-
|
|
67
|
-
### Next.js Pages Router
|
|
68
|
-
|
|
69
|
-
Add Ellmo to your page files:
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
// pages/about.tsx
|
|
73
|
-
import { EllmoApiSSR, fetchEllmoData } from 'ellmo-ai-react';
|
|
74
|
-
import type { GetServerSideProps } from 'next';
|
|
75
|
-
|
|
76
|
-
interface PageProps {
|
|
77
|
-
ellmoData: string | null;
|
|
78
|
-
ellmoError: string | null;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
export const getServerSideProps: GetServerSideProps<PageProps> = async (context) => {
|
|
82
|
-
const { data, error } = await fetchEllmoData({
|
|
83
|
-
clientId: 'your-ellmo-client-id',
|
|
84
|
-
url: context.resolvedUrl,
|
|
85
|
-
type: 'semantic'
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
return {
|
|
89
|
-
props: {
|
|
90
|
-
ellmoData: data,
|
|
91
|
-
ellmoError: error
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
export default function AboutPage({ ellmoData, ellmoError }: PageProps) {
|
|
97
|
-
return (
|
|
98
|
-
<div>
|
|
99
|
-
<EllmoApiSSR data={ellmoData} error={ellmoError} />
|
|
100
|
-
<h1>About Page</h1>
|
|
101
|
-
</div>
|
|
102
|
-
);
|
|
103
|
-
}
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### Statically Generated Sites (getInitialProps)
|
|
107
|
-
|
|
108
|
-
```tsx
|
|
109
|
-
// pages/about.tsx
|
|
110
|
-
import { EllmoApiSSR, fetchEllmoDataStatic } from 'ellmo-ai-react';
|
|
111
|
-
|
|
112
|
-
interface PageProps {
|
|
113
|
-
ellmoData: string | null;
|
|
114
|
-
ellmoError: string | null;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
const AboutPage = ({ ellmoData, ellmoError }: PageProps) => {
|
|
118
|
-
return (
|
|
119
|
-
<div>
|
|
120
|
-
<EllmoApiSSR data={ellmoData} error={ellmoError} />
|
|
121
|
-
<h1>About Page</h1>
|
|
122
|
-
</div>
|
|
123
|
-
);
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
AboutPage.getInitialProps = async (ctx) => {
|
|
127
|
-
const { data, error } = await fetchEllmoDataStatic({
|
|
128
|
-
clientId: process.env.NEXT_PUBLIC_ELLMO_CLIENT_ID!,
|
|
129
|
-
url: ctx.asPath || '/',
|
|
130
|
-
type: 'semantic'
|
|
131
|
-
});
|
|
132
|
-
|
|
133
|
-
return {
|
|
134
|
-
ellmoData: data,
|
|
135
|
-
ellmoError: error
|
|
136
|
-
};
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
export default AboutPage;
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
**Note:** Use `NEXT_PUBLIC_` prefix for environment variables with `getInitialProps`.
|
|
143
|
-
|
|
144
|
-
## Which Version Should I Use?
|
|
145
|
-
|
|
146
|
-
| Your Setup | What to Use |
|
|
147
|
-
|------------|-------------|
|
|
148
|
-
| Next.js 13+ App Router | `EllmoApi` component |
|
|
149
|
-
| Next.js Pages Router | `EllmoApiSSR` + `fetchEllmoData` |
|
|
150
|
-
| Static sites with `getInitialProps` | `EllmoApiSSR` + `fetchEllmoDataStatic` |
|
|
151
|
-
|
|
152
|
-
## Component Props
|
|
153
|
-
|
|
154
|
-
### EllmoApi (App Router)
|
|
155
|
-
|
|
156
|
-
| Prop | Type | Required | Description |
|
|
157
|
-
|------|------|----------|-------------|
|
|
158
|
-
| `clientId` | string | Yes | Your Ellmo client ID |
|
|
159
|
-
| `url` | string | Yes | Page URL path (e.g., `/about`) |
|
|
160
|
-
| `type` | `'semantic'` or `'structured'` | No | Content type (default: `'semantic'`) |
|
|
161
|
-
| `showErrors` | boolean | No | Show error messages (default: `false`) |
|
|
162
|
-
|
|
163
|
-
### EllmoApiSSR (Pages Router)
|
|
164
|
-
|
|
165
|
-
| Prop | Type | Required | Description |
|
|
166
|
-
|------|------|----------|-------------|
|
|
167
|
-
| `data` | string \| null | Yes | Data from `fetchEllmoData()` |
|
|
168
|
-
| `error` | string \| null | Yes | Error from `fetchEllmoData()` |
|
|
169
|
-
| `type` | `'semantic'` or `'structured'` | No | Content type (default: `'semantic'`) |
|
|
170
|
-
| `showErrors` | boolean | No | Show error messages (default: `false`) |
|
|
171
|
-
|
|
172
|
-
## Advanced Usage
|
|
173
|
-
|
|
174
|
-
### Global Data in _app.tsx
|
|
175
|
-
|
|
176
|
-
For sites using `getInitialProps` in `_app.tsx`:
|
|
177
|
-
|
|
178
|
-
```tsx
|
|
179
|
-
// pages/_app.tsx
|
|
180
|
-
import type { AppProps } from 'next/app';
|
|
181
|
-
import { EllmoApiSSR, withEllmoApp } from 'ellmo-ai-react';
|
|
182
|
-
|
|
183
|
-
interface MyAppProps extends AppProps {
|
|
184
|
-
globalEllmoData: string | null;
|
|
185
|
-
globalEllmoError: string | null;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
function MyApp({ Component, pageProps, globalEllmoData, globalEllmoError }: MyAppProps) {
|
|
189
|
-
return (
|
|
190
|
-
<>
|
|
191
|
-
<header>
|
|
192
|
-
<EllmoApiSSR data={globalEllmoData} error={globalEllmoError} />
|
|
193
|
-
</header>
|
|
194
|
-
<Component {...pageProps} />
|
|
195
|
-
</>
|
|
196
|
-
);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
MyApp.getInitialProps = withEllmoApp({
|
|
200
|
-
clientId: process.env.NEXT_PUBLIC_ELLMO_CLIENT_ID!,
|
|
201
|
-
url: '/global-header',
|
|
202
|
-
type: 'structured'
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
export default MyApp;
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
### Custom Error Handling
|
|
209
|
-
|
|
210
|
-
```tsx
|
|
211
|
-
<EllmoApiSSR data={ellmoData} error={ellmoError}>
|
|
212
|
-
{(data, error) => {
|
|
213
|
-
if (error) {
|
|
214
|
-
return <div>Failed to load content: {error}</div>;
|
|
215
|
-
}
|
|
216
|
-
if (data) {
|
|
217
|
-
return <div dangerouslySetInnerHTML={{ __html: data }} />;
|
|
218
|
-
}
|
|
219
|
-
return null;
|
|
220
|
-
}}
|
|
221
|
-
</EllmoApiSSR>
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
### Static Generation with getStaticProps
|
|
225
|
-
|
|
226
|
-
```tsx
|
|
227
|
-
export const getStaticProps: GetStaticProps<PageProps> = async () => {
|
|
228
|
-
const { data, error } = await fetchEllmoData({
|
|
229
|
-
clientId: process.env.ELLMO_CLIENT_ID || 'your-client-id',
|
|
230
|
-
url: '/about',
|
|
231
|
-
type: 'semantic'
|
|
232
|
-
});
|
|
233
|
-
|
|
234
|
-
return {
|
|
235
|
-
props: {
|
|
236
|
-
ellmoData: data,
|
|
237
|
-
ellmoError: error
|
|
238
|
-
},
|
|
239
|
-
revalidate: 60 // Revalidate every 60 seconds
|
|
240
|
-
};
|
|
241
|
-
};
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
## Get Your Client ID
|
|
245
|
-
|
|
246
|
-
Visit [tryellmo.ai](https://www.tryellmo.ai) to create an account and get your client ID.
|
|
247
|
-
|
|
248
|
-
## Requirements
|
|
249
|
-
|
|
250
|
-
- **For App Router**: Next.js 13.4 or higher
|
|
251
|
-
- **For Pages Router**: Any Next.js version with Pages Router
|
|
252
|
-
- React 16.8 or higher
|
|
253
|
-
|
|
254
|
-
## License
|
|
255
|
-
|
|
256
|
-
MIT
|
|
9
|
+
Visit [tryellmo.ai](https://www.tryellmo.ai?utm_source=npm&utm_medium=package&utm_campaign=ellmo-ai-react) to learn more and get started.
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ellmo-ai-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"website": "https://www.tryellmo.ai?utm_source=npm&utm_medium=package&utm_campaign=ellmo-ai-react",
|
|
5
|
-
"description": "React component for integration with Ellmo AI",
|
|
5
|
+
"description": "React component for integration with Ellmo AI Platform",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.mjs",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
|
-
"dist"
|
|
10
|
+
"dist",
|
|
11
|
+
"README.md"
|
|
11
12
|
],
|
|
12
13
|
"scripts": {
|
|
13
14
|
"build": "rollup -c rollup.config.mjs",
|
|
@@ -17,16 +18,17 @@
|
|
|
17
18
|
},
|
|
18
19
|
"keywords": [
|
|
19
20
|
"react",
|
|
20
|
-
"try-ellmo",
|
|
21
|
+
"try-ellmo-ai",
|
|
21
22
|
"ellmo-ai",
|
|
22
23
|
"analytics",
|
|
23
|
-
"aeo"
|
|
24
|
+
"aeo",
|
|
25
|
+
"ai"
|
|
24
26
|
],
|
|
25
|
-
"author": "",
|
|
27
|
+
"author": "Ellmo AI",
|
|
26
28
|
"license": "MIT",
|
|
27
29
|
"peerDependencies": {
|
|
28
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
29
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
30
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
30
32
|
},
|
|
31
33
|
"devDependencies": {
|
|
32
34
|
"@rollup/plugin-node-resolve": "^15.0.0",
|