Embed an assistant with Django and Vue

Generate a tested Django session boundary and static Vue mount, preserving your existing login, CSRF protection, and package managers.

Keep your Vue frontend static and let Django exchange your verified application identity for a short-lived assistant session. No Node.js production server, new login system, or direct database connector is required.

This generated profile supports authenticated embedding. Public and mixed profiles use the Next.js installer or the framework-neutral contract on that page. Noodle tools and App views remain TypeScript in their own project; this command runs in your existing Django/Vue application.

Preview and install

Use the project-local CLI or your installed developer plugin:

noodle assistant embed --framework django-vue --dry-run --json
noodle assistant embed --framework django-vue --json

Inspect the preview's files, ownership, application seams, conflicts, and next steps before writing. The installer preserves existing files; do not use --force to resolve an unexplained conflict. Read the generated NOODLE-INTEGRATION.md and project skill before adapting code.

Supplied building block	Your application-specific seam
`noodle_assistant/views.py`, contracts, URL configuration and request tests	Implement `authenticate_assistant_request` in `noodle_assistant/auth.py` using existing authentication and server-owned membership
Backend settings example	Bind four values with your existing settings and secret manager
`src/components/NoodleAssistant.vue` and bounded CSRF transport	Mount inside the signed-in application with your current CSRF token and stable user/tenant key
Backend and frontend contract tests	Add actual signed-out and cross-tenant identity fixtures and one authorized sandbox workflow

Install requests with your existing Python package manager and a compatible @noodleseed/assistant with your frontend package manager. Keep the application's Django version and middleware. The profile is qualified against Django 5.2 and 6.1; other versions require your own validation. Include noodle_assistant.urls at the application root and merge the supplied settings example rather than replacing your settings file.

Bind configuration and identity

Complete the deployment and backend-client steps in Embed an assistant in your SaaS. Django needs these backend-only values:

NOODLE_SERVICE_URL
NOODLE_ASSISTANT_CLIENT_ID
NOODLE_ASSISTANT_CLIENT_SECRET
PUBLIC_APP_ORIGIN=https://app.example.com

NOODLE_SERVICE_URL is the control-plane URL in deployment.json, not the MCP URL ending in /v1/mcp. Do not place credentials in VITE_* variables, browser code, logs, or committed files.

The generated identity function initially returns None, so it fails closed. Replace only that seam: return None when signed out, or a verified user with optional claims, preferences and routing. Derive tenant, roles, scopes and customer endpoint URLs from server-owned membership. A raw cookie, browser JSON, query parameter or page context is not verified identity.

If the Noodle project declares a customerEndpoint, use its exact name in the backend-derived endpoint map. If it does not, omit routing. Keep business authorization in the application. Changing a browser field must never choose another tenant or backend URL.

Preserve same-origin cookies and Django CSRF

Route POST /api/assistant/session through the Vue application's public origin to Django, even if their infrastructure is separate. Keep CsrfViewMiddleware and the generated csrf_protect decorator.

The supplied Vue wrapper sets the managed element's fetch property before mounting. It adds X-CSRFToken only to the exact same-origin session POST, never to the Noodle service. Pass the current token from your existing CSRF bootstrap. If cookies are HttpOnly or tokens live in the server session, use your application's existing masked-token endpoint or rendered data. Do not expose the session cookie or disable CSRF.

Pass principalKey as a stable user/tenant identifier and change it on account changes. It clears browser state; it does not grant authority. Render the component only inside the authenticated application. The wrapper creates the custom element programmatically, so no Vue custom-element compiler configuration or React dependency is needed.

Validate before calling it ready

python manage.py test noodle_assistant
vitest run test/noodle-assistant-transport.test.ts
noodle assistant embed --framework django-vue --check --json

Use your existing test runners and build command. Add Vitest as a development dependency only if absent.

The generated request tests exercise the real Django view with CSRF enforcement and synthetic identity and exchange fixtures. They cover signed-out access, wrong origin, malformed/oversize input, browser identity spoofing, missing settings, redirects and exchange failures. The frontend tests verify token rotation, missing-token refusal and exact-destination header confinement.

A signed-out request with a valid CSRF token returns JSON 401, not a login redirect. Missing or invalid CSRF is correctly refused by Django before the view. Successful exchange returns a no-store session; upstream failures are sanitized and neither cookies nor inbound bearer tokens are forwarded.

The CLI host check reports static evidence, not that Django settings imported correctly or proxy rules work. In a real browser, verify CSP connect-src/frame-src, same-origin cookies, CSRF, streaming, App rendering, account changes, and one authorized read and confirmed action. Independently test tenant-A/tenant-B isolation.

Missing real identities, sandbox permission or a reachable service remain unverified. Passing generated tests or installing files alone is not production or customer-authorization proof.

Update safely

Rerun the installer in preview mode before an update. It creates missing files, preserves existing files, and reports differences for review. Keep authentication, membership, settings, proxy rules and business behavior application-owned; do not replace them with a copied demo implementation.