## Connect to your database
1. In your Colab notebook, create a code block to define your database connection and create a cursor object. Replace `postgresql://[user]:[password]@[neon_hostname]/[dbname]` with the database connection string you retrieved in the previous step.
```python
import os
import psycopg2
# Provide your Neon connection string
connection_string = "postgresql://[user]:[password]@[neon_hostname]/[dbname]"
# Connect using the connection string
connection = psycopg2.connect(connection_string)
# Create a new cursor object
cursor = connection.cursor()
```
2. Execute the code block (**Ctrl** + **Enter**).
3. Add a code block for testing the database connection.
```python
# Execute this query to test the database connection
cursor.execute("SELECT 1;")
result = cursor.fetchone()
# Check the query result
if result == (1,):
print("Your database connection was successful!")
else:
print("Your connection failed.")
```
4. Execute the code block (**Ctrl** + **Enter**).
## Install the pgvector extension
1. Create a codeblock to install the `pgvector` extension to enable your Neon database as a vector store:
```python
# Execute this query to install the pgvector extension
cursor.execute("CREATE EXTENSION IF NOT EXISTS vector;")
```
2. Execute the code block (**Ctrl** + **Enter**).
## Create a table and add vector data
1. Add a code block to create a table and insert data:
```python
create_table_sql = '''
CREATE TABLE items (
id BIGSERIAL PRIMARY KEY,
embedding VECTOR(3)
);
'''
# Insert data
insert_data_sql = '''
INSERT INTO items (embedding) VALUES ('[1,2,3]'), ('[4,5,6]'), ('[7,8,9]');
'''
# Execute the SQL statements
cursor.execute(create_table_sql)
cursor.execute(insert_data_sql)
# Commit the changes
connection.commit()
```
2. Execute the code block (**Ctrl** + **Enter**).
## Query your data
1. Add a codeblock to perform a vector similarity search.
```python
cursor.execute("SELECT * FROM items ORDER BY embedding <-> '[3,1,2]' LIMIT 3;")
all_data = cursor.fetchall()
print(all_data)
```
2. Execute the code block (**Ctrl** + **Enter**).
## Next steps
For more information about using Neon with `pgvector`, see [The pgvector extension](https://neon.com/docs/extensions/pgvector).
---
# Source: https://neon.com/llms/ai-ai-intro.txt
# AI Starter Kit
> The AI App Starter Kit documentation introduces Neon users to integrating AI capabilities with their databases, detailing setup instructions, configuration options, and example use cases to enhance data management and analysis.
## Source
- [AI Starter Kit HTML](https://neon.com/docs/ai/ai-intro): The original HTML version of this documentation
This guide collects resources for building AI applications with Neon Postgres. You'll find core concepts, starter applications, framework integrations, and deployment guides. Use these resources to build applications like RAG chatbots, semantic search engines, or custom AI tools.
## Getting started
Learn the fundamentals of building AI applications with Neon:
- [AI concepts](https://neon.com/docs/ai/ai-concepts): Learn the fundamentals of embeddings and vector search for AI applications
- [pgvector extension](https://neon.com/docs/extensions/pgvector): Get started with pgvector for storing and querying vector embeddings
## AI frameworks and integrations
Build AI applications faster with these popular frameworks, tools, and services:
- [LangChain](https://neon.com/docs/ai/langchain): Create AI applications using LangChain with OpenAI and Neon
- [LlamaIndex](https://neon.com/docs/ai/llamaindex): Build RAG applications using LlamaIndex with OpenAI and Neon
- [Semantic Kernel](https://neon.com/docs/ai/semantic-kernel): Develop AI applications using Semantic Kernel with Azure OpenAI
- [Inngest](https://neon.com/docs/ai/inngest): Build reliable AI workflows with Inngest and Neon
- [app.build](https://neon.com/docs/ai/ai-app-build): Generate and deploy web applications using the open-source app.build agent
## Starter applications
Hackable, fully-featured, pre-built starter apps to get you up and running:
- [AI chatbot (OpenAI + LllamIndex)](https://github.com/neondatabase/examples/tree/main/ai/llamaindex/chatbot-nextjs): A Next.js AI chatbot starter app built with OpenAI and LlamaIndex
- [AI chatbot (OpenAI + LangChain)](https://github.com/neondatabase/examples/tree/main/ai/langchain/chatbot-nextjs): A Next.js AI chatbot starter app built with OpenAI and LangChain
- [RAG chatbot (OpenAI + LlamaIndex)](https://github.com/neondatabase/examples/tree/main/ai/llamaindex/rag-nextjs): A Next.js RAG chatbot starter app built with OpenAI and LlamaIndex
- [RAG chatbot (OpenAI + LangChain)](https://github.com/neondatabase/examples/tree/main/ai/langchain/rag-nextjs): A Next.js RAG chatbot starter app built with OpenAI and LangChain
- [Semantic search (OpenAI + LlamaIndex)](https://github.com/neondatabase/examples/tree/main/ai/llamaindex/semantic-search-nextjs): A Next.js Semantic Search chatbot starter app built with OpenAI and LlamaIndex
- [Semantic search (OpenAI + LangChain)](https://github.com/neondatabase/examples/tree/main/ai/langchain/semantic-search-nextjs): A Next.js Semantic Search chatbot starter app built with OpenAI and LangChain
- [Hybrid search (OpenAI)](https://github.com/neondatabase/examples/tree/main/ai/hybrid-search-nextjs): A Next.js Hybrid Search starter app built with OpenAI
- [Reverse image search (OpenAI + LlamaIndex)](https://github.com/neondatabase/examples/tree/main/ai/llamaindex/reverse-image-search-nextjs): A Next.js Reverse Image Search Engine starter app built with OpenAI and LlamaIndex
- [Chat with PDF (OpenAI + LlamaIndex)](https://github.com/neondatabase/examples/tree/main/ai/llamaindex/chat-with-pdf-nextjs): A Next.js Chat with PDF chatbot starter app built with OpenAI and LlamaIndex
- [Chat with PDF (OpenAI + LangChain)](https://github.com/neondatabase/examples/tree/main/ai/langchain/chat-with-pdf-nextjs): A Next.js Chat with PDF chatbot starter app built with OpenAI and LangChain
## Scale your AI application
- [Scale with Neon](https://neon.com/docs/ai/ai-scale-with-neon): Learn how to scale your AI application with Autoscaling and Read Replicas
- [Optimize vector search](https://neon.com/docs/ai/ai-vector-search-optimization): Best practices for optimizing vector search performance
## Featured examples
Real-world AI applications built with Neon that you can reference as code examples or inspiration.
**Tip** Built something cool?: Share your AI app on our [#showcase](https://discord.gg/neon) channel on Discord.
- [AI vector database per tenant](https://github.com/neondatabase/ai-vector-db-per-tenant): Deploy an AI vector database per-tenant architecture with Neon
- [Guide: Build a RAG chatbot](https://neon.com/guides/chatbot-astro-postgres-llamaindex): Build a RAG chatbot in an Astro application with LlamaIndex and Postgres
- [Guide: Build a Reverse Image Search Engine](https://neon.com/guides/llamaindex-postgres-search-images): Using LlamaIndex with Postgres to Build your own Reverse Image Search Engine
- [Ask Neon Chatbot](https://github.com/neondatabase/ask-neon): An Ask Neon AI-powered chatbot built with pgvector
- [Vercel Postgres pgvector Starter](https://vercel.com/templates/next.js/postgres-pgvector): Enable vector similarity search with Vercel Postgres powered by Neon
- [YCombinator Semantic Search App](https://github.com/neondatabase/yc-idea-matcher): YCombinator semantic search application
- [Web-based AI SQL Playground](https://github.com/neondatabase/postgres-ai-playground): An AI-enabled SQL playground application for natural language queries
- [Jupyter Notebook for vector search with Neon](https://github.com/neondatabase/neon-vector-search-openai-notebooks): Jupyter Notebook for vector search with Neon, pgvector, and OpenAI
- [Image search with Neon and Vertex AI](https://github.com/ItzCrazyKns/Neon-Image-Search): Community: An image search app built with Neon and Vertex AI
- [Text-to-SQL conversion with Mistral + LangChain](https://github.com/mistralai/cookbook/blob/main/third_party/Neon/neon_text_to_sql.ipynb): A Text-to-SQL conversion app built with Mistral AI, Neon, and LangChain
- [Postgres GPT Expert](https://neon.com/blog/openais-gpt-store-is-live-create-and-publish-a-custom-postgres-gpt-expert): Blog + repo: Create and publish a custom Postgres GPT Expert using OpenAI's GPT
## Vector search tools and notebooks
Optimize your vector search implementation and experiment with different approaches:
- [Vector search optimization](https://neon.com/docs/ai/ai-vector-search-optimization): Best practices for optimizing vector search performance
- [Vector search notebooks](https://github.com/neondatabase/neon-vector-search-openai-notebooks): Interactive notebooks for vector search with OpenAI
- [Google Colab guide](https://neon.com/docs/ai/ai-google-colab): Use Neon with Google Colab for ML experiments
- [Azure Data Studio Notebooks](https://neon.com/docs/ai/ai-azure-notebooks): A cloud-based Jupyter notebook service integrated with Azure Data Studio
---
# Source: https://neon.com/llms/ai-ai-rules-neon-api.txt
# AI Rules: Neon API
> The "AI Rules: Neon API" document outlines the guidelines and specifications for integrating AI functionalities within the Neon API, detailing the necessary parameters and protocols for developers to effectively implement AI-driven features in their applications.
## Source
- [AI Rules: Neon API HTML](https://neon.com/docs/ai/ai-rules-neon-api): The original HTML version of this documentation
**Note** AI Rules are in Beta: AI Rules are currently in beta. We're actively improving them and would love to hear your feedback. Join us on [Discord](https://discord.gg/92vNTzKDGp) to share your experience and suggestions.
Related docs:
- [Neon API](https://neon.com/docs/reference/api-reference)
Repository:
- [Neon API Reference Docs](https://api-docs.neon.tech/reference/getting-started-with-neon-api)
- [neon-api-guidelines.mdc](https://github.com/neondatabase-labs/ai-rules/blob/main/neon-api-guidelines.mdc)
## How to use
You can use these rules in two ways:
## Option 1: Copy from this page
With Cursor, save the [rules](https://docs.cursor.com/context/rules-for-ai#project-rules-recommended) to `.cursor/rules/neon-api-guidelines.mdc` and they'll be automatically applied when working with matching files (`*.ts`, `*.tsx`).
For other AI tools, you can include these rules as context when chatting with your AI assistant - check your tool's documentation for the specific method (like using "Include file" or context commands).
## Option 2: Clone from repository
If you prefer, you can clone or download the rules directly from our [AI Rules repository](https://github.com/neondatabase-labs/ai-rules).
Once added to your project, AI tools will automatically use these rules when working with Neon API code. You can also reference them explicitly in prompts.
## How to use
You can use the following Neon API rules in two ways:
## Option 1: Copy from this page
With Cursor, save the [rules](https://docs.cursor.com/context/rules-for-ai#project-rules-recommended) to `.cursor/rules/file_name.mdc` and they'll be automatically applied when working with matching files.
For other AI tools, you can include these rules as context when chatting with your AI assistant - check your tool's documentation for the specific method (like using "Include file" or context commands).
## Option 2: Clone from repository
If you prefer, you can clone or download the rules directly from our [AI Rules repository](https://github.com/neondatabase-labs/ai-rules).
Once added to your project, AI tools will automatically use these rules when working with Neon API. You can also reference them explicitly in prompts.
## Neon API rules: General guidelines
Save the following content to a file named `neon-api-guidelines.mdc` in your AI tool's rules directory.
````md
---
description: Use these rules to understand how to interact with the Neon API, including authentication, rate limiting, and best practices.
alwaysApply: false
---
## Overview
This document provides a comprehensive set of rules and guidelines for an AI agent to interact with the Neon API. The Neon API is a RESTful service that allows for programmatic management of all Neon resources. Adherence to these rules ensures correct, efficient, and safe API usage.
### General API guidelines
All Neon API requests must be made to the following base URL:
```
https://console.neon.tech/api/v2/
```
To construct a full request URL, append the specific endpoint path to this base URL.
### Authentication
- All API requests must be authenticated using a Neon API key.
- The API key must be included in the `Authorization` header using the `Bearer` authentication scheme.
- The header should be formatted as: `Authorization: Bearer $NEON_API_KEY`, where `$NEON_API_KEY` is a valid Neon API key.
- A request without a valid `Authorization` header will fail with a `401 Unauthorized` status code.
### API rate limiting
- Neon limits API requests to 700 requests per minute (approximately 11 per second).
- Bursts of up to 40 requests per second per route are permitted.
- If the rate limit is exceeded, the API will respond with an `HTTP 429 Too Many Requests` error.
- Your application logic must handle `429` errors and implement a retry strategy with appropriate backoff.
### Neon Core Concepts
To effectively use the Neon Python SDK, it's essential to understand the hierarchy and purpose of its core resources. The following table provides a high-level overview of each concept.
| Concept | Description | Analogy/Purpose | Key Relationship |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Organization | The highest-level container, managing billing, users, and multiple projects. | A GitHub Organization or a company's cloud account. | Contains one or more Projects. |
| Project | The primary container that contains all related database resources for a single application or service. | A Git repository or a top-level folder for an application. | Lives within an Organization (or a personal account). Contains Branches. |
| Branch | A lightweight, copy-on-write clone of a database's state at a specific point in time. | A `git branch`. Used for isolated development, testing, staging, or previews without duplicating storage costs. | Belongs to a Project. Contains its own set of Databases and Roles, cloned from its parent. |
| Compute Endpoint | The actual running PostgreSQL instance that you connect to. It provides the CPU and RAM for processing queries. | The "server" or "engine" for your database. It can be started, suspended (scaled to zero), and resized. | Is attached to a single Branch. Your connection string points to a Compute Endpoint's hostname. |
| Database | A logical container for your data (tables, schemas, views) within a branch. It follows standard PostgreSQL conventions. | A single database within a PostgreSQL server instance. | Exists within a Branch. A branch can have multiple databases. |
| Role | A PostgreSQL role used for authentication (logging in) and authorization (permissions to access data). | A database user account with a username and password. | Belongs to a Branch. Roles from a parent branch are copied to child branches upon creation. |
| API Key | A secret token used to authenticate requests to the Neon API. Keys have different scopes (Personal, Organization, Project-scoped). | A password for programmatic access, allowing you to manage all other Neon resources. | Authenticates actions on Organizations, Projects, Branches, etc. |
| Operation | An asynchronous action performed by the Neon control plane, such as creating a branch or starting a compute. | A background job or task. Its status can be polled to know when an action is complete. | Associated with a Project and often a specific Branch or Endpoint. Essential for scripting API calls. |
### Understanding API key types
When performing actions via the API, you must select the correct type of API key based on the required scope and permissions. There are three types:
1. Personal API Key
- Scope: Accesses all projects that the user who created the key is a member of.
- Permissions: The key has the same permissions as its owner. If the user's access is revoked from an organization, the key loses access too.
- Best For: Individual use, scripting, and tasks tied to a specific user's permissions.
- Created By: Any user.
2. Organization API Key
- Scope: Accesses all projects and resources within an entire organization.
- Permissions: Has admin-level access across the organization, independent of any single user. It remains valid even if the creator leaves the organization.
- Best For: CI/CD pipelines, organization-wide automation, and service accounts that need broad access.
- Created By: Organization administrators only.
3. Project-scoped API Key
- Scope: Access is strictly limited to a single, specified project.
- Permissions: Cannot perform organization-level actions (like creating new projects) or delete the project it is scoped to. This is the most secure and limited key type.
- Best For: Project-specific integrations, third-party services, or automation that should be isolated to one project.
- Created By: Any organization member.
````
## Neon API rules: Manage API keys
Save the following content to a file named `neon-api-keys.mdc` in your AI tool's rules directory.
````md
---
description: Use these rules to manage Neon API keys programmatically, including creating, listing, and revoking keys.
alwaysApply: false
---
## Overview
This document outlines the rules for managing Neon API keys programmatically. It covers listing existing keys, creating new keys, and revoking keys.
### Important note on creating API keys
To create new API keys using the API, you must already possess a valid Personal API Key. The first key must be created from the Neon Console. You can ask the user to create one for you if you do not have one.
### List API keys
- Endpoint: `GET /api_keys`
- Authorization: Use a Personal API Key.
Example request:
```bash
curl "https://console.neon.tech/api/v2/api_keys" \
-H "Authorization: Bearer $PERSONAL_API_KEY"
```
Example response:
```json
[
{
"id": 2291506,
"name": "my-personal-key",
"created_at": "2025-09-10T09:44:04Z",
"created_by": {
"id": "487de658-08ba-4363-b387-86d18b9ad1c8",
"name": "Email: {user.primaryEmail}
### Manual Setup
1. Open Cursor. Create a `.cursor` directory in your project root if needed.
2. Create or open the `mcp.json` file in the `.cursor` directory.
3. Add the "Neon" server entry within the `mcpServers` object:
```json
{
"mcpServers": {
"Neon": {
"url": "https://mcp.neon.tech/mcp",
"headers": {}
}
}
}
```
> To use SSE instead of streamable HTTP responses, you can specify the `https://mcp.neon.tech/sse` endpoint instead of `https://mcp.neon.tech/mcp`.
4. Save the configuration file. Cursor may detect the change or require a restart.
5. An OAuth window will open in your browser. Follow the prompts to authorize Cursor to access your Neon account.
> By default, the Remote MCP Server connects to your personal Neon account. To connect to an organization's account, you must authenticate with an API key. For more information, see [API key-based authentication](https://neon.com/docs/ai/neon-mcp-server#api-key-based-authentication).
Tab: Local MCP Server
1. Open Cursor. Create a `.cursor` directory in your project root if needed.
2. Create or open the `mcp.json` file in the `.cursor` directory.
3. Add the "Neon" server entry within the `mcpServers` object. Replace `
Imagine you want to create a new database. Instead of using the Neon Console or API, you could just type a request like, "Create a database named 'my-new-database'". Or, to see your projects, you might ask, "List all my Neon projects". The Neon MCP Server makes this possible.
It works by acting as a bridge between natural language requests and the [Neon API](https://api-docs.neon.tech/reference/getting-started-with-neon-api). Built upon the [Model Context Protocol (MCP)](https://modelcontextprotocol.org), it translates your requests into the necessary Neon API calls, allowing you to manage everything from creating projects and branches to running queries and performing database migrations.
**Important** Neon MCP Server Security Considerations: The Neon MCP Server grants powerful database management capabilities through natural language requests. **Always review and authorize actions requested by the LLM before execution.** Ensure that only authorized users and applications have access to the Neon MCP Server. The Neon MCP Server is intended for local development and IDE integrations only. **We do not recommend using the Neon MCP Server in production environments.** It can execute powerful operations that may lead to accidental or unauthorized changes. For more information, see [MCP security guidance →](https://neon.com/docs/ai/neon-mcp-server#mcp-security-guidance).
## Understanding MCP and Neon MCP Server
The [**Model Context Protocol (MCP)**](https://modelcontextprotocol.org) standardizes communication between LLMs and external tools. It defines a client-server architecture, enabling LLMs (Hosts) to connect to specialized servers that provide context and tools for interacting with external systems. The key components of the MCP architecture are:
- **Hosts**: These are AI applications, such as Claude Desktop, Claude Code, or IDEs like Cursor, that initiate connections to MCP servers
- **Clients**: These reside within the host application and maintain one-to-one connections with individual MCP servers
- **Server**: These programs, such as Neon's MCP Server, provide context, tools, and prompts to clients, enabling access to external data and functionalities
### Why use MCP?
Traditionally, connecting AI models to different data sources required developers to create custom code for each integration. This fragmented approach increased development time, maintenance burdens, and limited interoperability between AI models and tools. MCP addresses this challenge by providing a standardized protocol that simplifies integration, accelerates development, and enhances the capabilities of AI assistants.
### What is Neon MCP server?
**Neon MCP Server** acts as the **Server** in the MCP architecture, specifically designed for Neon. It provides a set of **tools** that MCP clients (like Claude Desktop, Claude Code, Cursor) can utilize to manage Neon resources. This includes actions for project management, branch management, executing SQL queries, and handling database migrations, all driven by natural language requests.
**Key Benefits of using Neon MCP Server:**
- **Natural language interaction:** Manage Neon databases using intuitive, conversational commands.
- **Simplified database management:** Perform complex actions without writing SQL or directly using the Neon API.
- **Enhanced Productivity:** Streamline workflows for database administration and development.
- **Accessibility for non-developers:** Empower users with varying technical backgrounds to interact with Neon databases.
- **Database migration support:** Leverage Neon's branching capabilities for database schema changes initiated via natural language.
**Important** Security Considerations: The Neon MCP server grants powerful database management capabilities through natural language requests. **Always review and authorize actions** requested by the LLM before execution. Ensure that only authorized users and applications have access to the Neon MCP server and Neon API keys.
## Setup options
You can set up the Neon MCP Server in two ways:
### Remote hosted server (preview)
You can use Neon's managed MCP server, available at `https://mcp.neon.tech`. This is the **easiest** way to start using the Neon MCP Server. It streamlines the setup process by utilizing OAuth for authentication, eliminating the need to manage Neon API keys directly in your client configuration.
**Note**: The remote hosted MCP server is currently in its preview phase. As the [OAuth specification for MCP](https://spec.modelcontextprotocol.io/specification/2025-03-26/basic/authorization/) is still quite new, we are releasing it in this preview state. During the initial weeks, you may experience some adjustments to the setup. However, the instructions provided should be straightforward to follow at this time.
#### Prerequisites:
- An MCP Client application (e.g., Cursor, Windsurf, Claude Desktop, Claude Code, Cline, Zed, ChatGPT).
- A Neon account.
**Tip** Install in a single click for Cursor users: Click the button below to install the Neon MCP server in Cursor. When prompted, click **Install** within Cursor.
#### Setup steps:
1. Go to your MCP Client's settings where you configure MCP Servers (this varies by client)
2. Register a new MCP Server. Add a configuration block for "Neon" under 'mcpServers' key. The configuration should look like this:
```json
{
"mcpServers": {
"Neon": {
"command": "npx",
"args": ["-y", "mcp-remote@latest", "https://mcp.neon.tech/mcp"]
}
}
}
```
This command uses `npx` to run a [small helper (`mcp-remote`)](https://github.com/geelen/mcp-remote) that connects to Neon's hosted server endpoint (`https://mcp.neon.tech/mcp`).
MCP supports two remote server transports: the deprecated Server-Sent Events (SSE) and the newer, recommended Streamable HTTP. If your LLM client doesn't support Streamable HTTP yet, you can switch the endpoint from `https://mcp.neon.tech/mcp` to `https://mcp.neon.tech/sse` to use SSE instead.
3. Save the configuration and **restart or refresh** your MCP client application.
4. The first time the client initializes Neon's MCP server, it should trigger an **OAuth flow**:
- Your browser will open a Neon page asking you to authorize the "Neon MCP Server" to access your Neon account.
- Review the requested permissions and click **Authorize**.
- You should see a success message, and you can close the browser tab.
5. Your MCP client should now be connected to the Neon Remote MCP Server and ready to use.
### Local MCP Server
You can install Neon MCP server locally using `npm`.
#### Prerequisites
- **Node.js (>= v18.0.0):** Ensure Node.js version 18 or higher is installed on your system. You can download it from [nodejs.org](https://nodejs.org/).
- **Neon API Key:** You will need a Neon API key to authenticate the Neon MCP Server with your Neon account. You can create one from the [Neon Console](https://console.neon.tech/app/settings/api-keys) under your Profile settings. Refer to the [Neon documentation on API Keys](https://neon.com/docs/manage/api-keys#creating-api-keys) for detailed instructions.
Open your MCP client application and navigate to the settings where you can configure MCP servers. The location of these settings may vary depending on your client. Add a configuration block for "Neon" under the `mcpServers` key. Your configuration should look like this:
```json
{
"mcpServers": {
"neon": {
"command": "npx",
"args": ["-y", "@neondatabase/mcp-server-neon", "start", "auth.user_id() function, which extracts the user's ID from the JWT (JSON Web Token) provided by your authentication provider. In this demo, Neon Auth issues the JWTs, and Neon's Data API passes them to Postgres, so RLS can enforce per-user access. For more details on RLS with Data API, see our [Row-Level Security with Neon guide](https://neon.com/docs/guides/row-level-security).
Now that our tables are secure, let's look at how to perform CRUD operations using our note-taking app as an example.
## INSERT
Let's start with creating new notes. The demo app does it like this:
```typescript
const { data, error } = await postgrest
.from('notes')
.insert({ title: generateNameNote() })
.select('id, title, shared, owner_id, paragraphs (id, content, created_at, note_id)')
.single();
```
When you create a new note, the app automatically generates a unique, codename-style label for the title using `generateNameNote()`. That's why you'll see names like "tender fuchsia" (as shown below) in your notes list.
Here's what it looks like after creating a note and adding a couple paragraphs:
See [src/routes/note.tsx](https://github.com/neondatabase-labs/neon-data-api-neon-auth/blob/main/src/routes/note.tsx)
## SELECT
To display all notes for the current user, ordered by creation date, the app uses:
```typescript
const { data, error } = await postgrest
.from('notes')
.select('id, title, created_at, owner_id, shared')
.eq('owner_id', user.id)
.order('created_at', { ascending: false });
```
> `.eq('owner_id', user.id)` is a `postgrest-js` method that filters results, much like a SQL `WHERE` clause, to only include notes belonging to the current user.
Here's what your notes list will look like after fetching all notes from the database.
> **Hint:** To get back to your main notes list, click the **"note."** heading at the top of the app.
See [src/routes/index.tsx](https://github.com/neondatabase-labs/neon-data-api-neon-auth/blob/main/src/routes/index.tsx)
## UPDATE
You can rename any note by editing its title directly in the app (for example, changing "additional jade" to "water the plants"). When you do, the app updates the note in the database behind the scenes.
Here's how the app updates a note's title using the UPDATE operation:
```typescript
const { error } = await postgrest
.from('notes')
.update({ title: 'Updated Title' })
.eq('id', noteId);
```
> Tip: With postgrest-js, you can chain methods like `.from()`, `.update()`, and `.eq()` to build queries, like in the example above.
Here's how a note looks after you update its title to something more meaningful in the UI:
See [src/components/app/note-title.tsx](https://github.com/neondatabase-labs/neon-data-api-neon-auth/blob/main/src/components/app/note-title.tsx)
Now let's look at a more advanced pattern you can use with postgrest-js.
## INSERT and fetch related data
You may have noticed that our earlier `INSERT` example included `.select("*")`, chained after `.insert()`. This lets you insert a record and immediately fetch it back in a single query. This is a useful pattern provided by postgrest-js's chainable API (as mentioned above). And you can take it further: you can also fetch **related data** (from other tables linked by foreign keys) at the same time.
For example, in our INSERT example from earlier, we immediately fetch the new note **and** any related paragraphs (if they exist):
```typescript
const { data, error } = await postgrest
.from('notes')
.insert({ title: generateNameNote() })
.select('id, title, shared, owner_id, paragraphs (id, content, created_at, note_id)')
.single();
```
This is particularly useful when you need to:
- Create a record and immediately show it in the UI
- Ensure data consistency by getting the exact state from the database
- Reduce the number of API calls needed
See [src/routes/note.tsx](https://github.com/neondatabase-labs/neon-data-api-neon-auth/blob/main/src/routes/note.tsx)
## Adding delete functionality to the app
If you've played with the app at all, you may also have noticed — there's no way to delete a note.
This is the hands-on part of the tutorial. Let's go ahead and add delete functionality to your local version of the app. You'll see how to implement a complete DELETE operation with postgrest-js.
### Step 1: Add a delete button to your note card component
First, update the `NoteCard` component to include a delete button:
```typescript
import { Link } from "@tanstack/react-router";
import moment from "moment";
import { Trash2Icon } from "lucide-react";
export default function NoteCard({
id,
title,
createdAt,
onDelete,
}: {
id: string;
title: string;
createdAt: string;
onDelete?: () => void;
}) {
return (
{moment(createdAt).fromNow()}
{onDelete && ( )}