> ## Documentation Index
> Fetch the complete documentation index at: https://ogis-dependabot-npm-and-yarn-npm-dependencies-801eea6cee.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Started
> Quick start guide for using ogis
Generate your first Open Graph image in under a minute.
## Installation
Install the TypeScript SDK:
```bash theme={null}
npm install ogis
```
## Basic Usage
```typescript theme={null}
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
// Generate an image URL
const imageUrl = ogis.generateUrl({
title: 'My Blog Post',
description: 'An introduction to ogis',
template: 'twilight'
});
console.log(imageUrl);
// => https://img.ogis.dev/?title=My+Blog+Post&description=An+introduction+to+ogis&template=twilight
```
## Framework Integration
```tsx theme={null}
// app/blog/[slug]/page.tsx
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
openGraph: {
images: [ogis.generateUrl({
title: post.title,
description: post.excerpt,
template: 'twilight'
})]
}
};
}
```
```svelte theme={null}
```
```astro theme={null}
---
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
const { title, description } = Astro.props;
const ogImage = ogis.generateUrl({ title, description });
---
```
```vue theme={null}
```
No SDK needed — just construct the URL directly:
```html theme={null}
```
## Parameters
| Parameter | Description | Example |
| ------------- | ---------------------------- | ------------------------------- |
| `title` | Main heading text | `My Blog Post` |
| `description` | Secondary text below title | `A deep dive into...` |
| `subtitle` | Small text above title | `Tutorial` |
| `template` | Template name | `twilight`, `minimal`, `modern` |
| `logo` | URL to logo image | `https://example.com/logo.png` |
| `image` | URL to background/hero image | `https://example.com/hero.jpg` |
## Using Meta Tags Helper
The SDK includes a helper to generate all required meta tags:
```typescript theme={null}
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
const tags = ogis.generateMetaTags({
title: 'My Page',
template: 'twilight'
});
// Returns:
// [
// { property: 'og:image', content: 'https://img.ogis.dev/?...' },
// { property: 'og:image:width', content: '1200' },
// { property: 'og:image:height', content: '630' },
// { property: 'og:image:type', content: 'image/png' }
// ]
```
## Setting Defaults
Configure default parameters that apply to all generated URLs:
```typescript theme={null}
const ogis = new OgisClient({
baseUrl: 'https://img.ogis.dev',
defaults: {
template: 'twilight',
logo: 'https://example.com/logo.png'
}
});
// Logo and template are automatically included
const url = ogis.generateUrl({ title: 'My Post' });
```
## Next Steps
Deploy your own instance
Secure private instances with HMAC